Which is faster to load?

[vozzek]

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!

 

[vishal99]

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

[dbrimlow]

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">.