Jump to content

Which is faster to load?


vozzek

Recommended Posts

Hi everyone, quick question:

 

When I first started my website three months ago, I was a total rookie.  I used a lot of <img> tags to create borders around things and to dress up different tables on my site.

 

Later on, I set classes in a CSS external file and used the background-image: command to fill those same tables with the same images.

 

So my question is:  which is faster?  I would think the CSS method.  And how much faster is it?  Fast enough that I should go back through my entire site and change those <img> tags to style sheet references?

 

Thanks for the help!

 

Link to comment
Share on other sites

Hello,

Css is another choice now days,

Most of site is uses the way.

But when you are going to use css styles sheets.

Please try to view in different browser.

like if you directly add a horizontal line in opera and then use a color for line, you donot see the color in opera browser.

like

<hr color=red>

But you see the color in different browser like Firefox. So please make sure.

 

Thanks,

Vishal

vishalgaurav01@gmail.com

http://vishal.benetonfilms.com

Link to comment
Share on other sites

The answer to your question is an external css is faster (in the relative speed of page weight and bandwidth). Because a one time "Select" is faster than a new individual markup "Element".

 

The css file downloads the Select once which designates the image command once. So for every instance of a css styled Select it quickly and easily displays the image from your cache with no further commands or page weight added to your markup (because the Select element's img is recognized as a one time command for every instance on your website of that Select).

 

However, when each new page has new markup level img tags, even if for the same "type" of element, it is perceived by the browser as (and in fact is) a new markup element and command - even though the img is in, and retrieved from, your cache the browser still loads ("virtually downloads") it as a new element with a new command.

 

Every element you add to your markup is like dropping yet another stone in a bucket ... this includes divs, spans, script and even spaces and blank lines!

 

Every duplicate and unnecessary element you can remove from your markup by designating it once in the css as a site-wide Select element immediately helps with page weight.

 

Search engine bots actually look at and consider "code to text percentage ratios". Maintaining at least a 30% text to code ratio is considered ideal.

 

That's why you are better off using a <p class="select"> than using <p><span class="select">.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.