From: http://www.evolt.org/article/10_new_ways_to_speed_up_download_time/20/60294/index.html?format=print

10 new ways to speed up download time

Author: trenton (evolt@webcredible.co.uk);
03/06/2004;

1. Avoid tables for layout

Here are six reasons why pages that use CSS for layout download faster than tabular pages:

Browsers read through tables twice before downloading them, once to work out its structure and once to determine its content
Tables appear on the screen all in one go - no part of the table will appear until the entire table is downloaded and rendered
Tables encourage the use of spacer images to aid with positioning
CSS generally requires less code than cumbersome tables
All code to do with the layout can be placed in an external CSS document, which will be called up just once and then cached on the user's computer; table layout, stored in each HTML document, must be loaded up each time a new page downloads
With CSS you can control the order items download on to the screen - make the content appear before slow-loading images and your site users will definitely appreciate it

2. Don't use images to display text

It's our old friend CSS to the rescue again. There's no need to use images to display text as so much can be accomplished through CSS. Have a look at this code

a:link.example, a:visited.example, a:active.example  {
color:#fff; 
background:#f90; 
font-size:1.2em; 
font-weight:bold; 
text-decoration:none; 
padding:0.2em; 
border:4px #00f outset
}
a:hover.example {
color:#fff; 
background:#fa1; 
font-size:1.2em; 
font-weight:bold; 
text-decoration:none; 
padding:0.2em; 
border:4px #00f inset

This will give you a really simple button that appears to be pushed down when you mouseover it - See it in action if you like. To find just how far you can take this concept check out the CSS articles at A List Apart.

3. Call up images through CSS

It's possible to present images as part of the background, called up through CSS. If you've got an image that's 200px by 100px you can use the following HTML code:

And this CSS:

.pretty-image { background: url(filename.gif); width: 200px; height: 100px }

This may at first seem a little pointless but this technique could really increase the download time of your pages. Browsers basically download background images after everything else. By using this technique, your text will load instantaneously and your site users can freely roam about the page while your 50kb fancy image downloads.

This technique is absolutely fine for decorational images that are effectively just screen furniture. However, if the image is part of the content, you need still need to use the IMG or OBJECT tag to apply it to the document. You could use an IMG with the above class and a transparent image as the src, but that represents an accessibility issue, as the user needs to have your CSS enabled to reach the image content.

4. Use contextual selectors

This is inefficient:

<p class="text">This is a sentence</p>
<p class="text">This is another sentence</p>
<p class="text">This is yet another sentence</p>
<p class="text">This is one more sentence</p>

.text { color: #03c; font-size:2em }

Instead of assigning a value to each individual paragraph, we can nest them within a <div> tag and assign a value to this tag:

<div class="text">
<p>This is a sentence</p>
<p>This is another sentence</p>
<p>This is yet another sentence</p>
<p>This is one more sentence</p>
</div>

.text p { color: #03c; font-size:2em }

This second CSS example basically says that every paragraph within class="text" should be assigned a colour value of #03c and a font size of 2em.

At first glance this doesn't look too important, but if you can apply this properly throughout your document you can easily knock off 20% of the file size.

You may have noticed the colour values are shorter than normal. #03c is a shortened version of #0033cc - you can assign this abbreviated value to any colour value like this.

5. Use shorthand CSS properties

Font

Use:

font: 1em/1.5em bold italic serif

...instead of

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

Border

Use:

border: 1px black solid

...instead of

border-width: 1px;
border-color: black;
border-style: solid

Background

Use:

background: #fff url(image.gif) no-repeat top left

...instead of

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Margin, padding, border

Use:

margin: 2px 1px 3px 4px
(top, right, bottom, left)

...instead of

margin-top: 2px
margin-right: 1px;
margin-bottom: 3px;
margin-right: 4px

Use:

margin: 5em 1em 3em
(top, left and right, bottom)

...instead of

margin-top: 5em;
margin-bottom: 1em;
margin-right: 1em;
margin-right: 4em

Use:

margin: 5% 1%
(top and bottom, left and right)

...instead of

margin-top: 5%;
margin-bottom: 5%;
margin-right: 1%;
margin-right: 1%

These rules can be applied to margin, border and padding.

6. Minimise white space, line breaks and comment tags

Every single letter or space in your HTML and CSS code takes up one byte. It doesn't sound like much but it all adds up. Don't hit return so often, don't indent lines and squash up those stylesheet rules together.

You may need proper linebreaks and indentation to keep the code maintainable (for example when several developers work on the same documents). In this case you could think of a tool that strips unneccessary whitespace only when the documents get published to the live site.

7. Use relative call-ups

Never use an absolute call up as it takes up more space, and more importantly, takes the browser longer to download the page. An example of an absolute call up is: <a href="http://www.URL.com/filename.htm">. Much better would be <a href="filename.htm">. But what if some files are in different folders to other ones? Use absolute or relative linking:

<a href="/"> - Calls up http://www.URL.com
<a href="/filename.html"> - Calls up http://www.URL.com/filename.html
<a href="/directory/filename.html"> - Calls up http://www.URL.com/directory/filename.html
<a href="./"> - Calls up index.html within that directory
<a href="../"> - Calls up index.html one directory above
<a href="../filename.html"> - Calls up filename.html one directory above
<a href="../../"> - Calls up index.html two directories above

8. Remove unnecessary META tags and META content

Most META tags are completely unnecessary and do nothing. If you're interested, you can see a list of META tags that are available. The most important tags for search engine optimisation are the keywords and description tags, although due to mass abuse these have lost a lot of importance in recent times. When using these META tags try to keep the content for each under 200 characters - anything more increases the size of your pages. Lengthy META tags aren't good for search engines anyway because they dilute your keywords.

9. Put CSS and JavaScript into external documents

We all know to do this, yet we so often don't do it!

To place CSS in an external document use:

To place JavaScript in an external document use:

Any external file is called up just once and then cached on the user's computer. Instead of repeating JavaScript or CSS over and over again in HTML files, just write it out once in an external document.

And don't forget, there's no limit to the number of these external documents that you can use! Instead of making one huge CSS document, have one main one and some others that are specific to certain areas of your site.

10. Use / at the end of directory links

Don't do this: <a href="http://www.URL.com/directoryname">

Do this instead: <a href="http://www.URL.com/directoryname/">

Why? If there's no slash at the end of the URL the browser doesn't know if the link is pointing to a file or to a directory. By including the slash the browser instantly knows that the URL is pointing to a directory and doesn't need to spend any time trying to work it out.

Reader Rating

Don't want the reader rating?? Then Remove It.

This article currently has a rating of 3.71 out of 17 total ratings.

shaggy wrote on 03/08/2004

"5. Use shorthand CSS properties"

I'd rather use the full form if I'm not sure about something or need to make it easier to read.

"Never use an absolute call up as it ... takes the browser longer to download the page"

It doesn't take much longer to download the page but it definitely makes the site harder to maintain and test with a local/dev copy.

"10. Use / at the end of directory links"

Browsers are not actually that smart to start figuring out such things, but it takes an additional request/response from the server to redirect the browser to the dir/ URL.

12) Minimizing HTTP requests, AKA do not load too many files at the same times (like 20 images), so most browsers can multithread

13) use HTTP compression with mod_gzip or similar products. (I haven't tried this one yet)

lemoncurry wrote on 03/08/2004

hmn.. this is a little weak, to say replacing a class="text" with a smarter css rule will knock 20% is far fetched... if u designed ur stylesheet more intelligently it wouldn't need class="text" on every P!!!!! too generalised.... the fact is most people can grasp classes, rules, and matching tags. What is neglected by most sites, are the advanced cascading concepts of css, eg. inheritance and what is and what is not explicitly supported by a browser. Similarly with JS, how to build intelligent adv objects is neglected and to some extent the modular ideas encompassed by xhtml1.1

if the site is built from several sources (xml, data) this will be quicker to assemble as one flat file... but that can only then be cached as a final page, id seriously consider whats happening on the actual server.... External files are better when universal across the site, its a far more important point: use css instead of spacers and images! no more small design elements....

secondly just use an editor with the carriage return character turned on, it makes worrying about whitespace easy, and u can ensure it uses as least as possible whilst writing it... saves more time...

ras wrote on 03/08/2004

Got inspired and took a look at my web site. This is what I started with:

.bannerText A {

COLOR: white; TEXT-DECORATION: none;

}

.bannerText A:active {

COLOR: white; TEXT-DECORATION: none;

}

.bannerText A:hover {

COLOR: white; TEXT-DECORATION: none;

}

.bannerText A:visited {

COLOR: white; TEXT-DECORATION: none;

}

And this is how it ended up looking:

.bannerText A,

.bannerText A:active,

.bannerText A:hover,

.bannerText A:visited { COLOR: white; TEXT-DECORATION: none; }

Much easier to read and shortened the stylesheet considerably. Also it is possible to declare this class in the TD field in stead of in the actual link, thus saving a lot of extra typing, when you can apply it to x amount of links with one line.

flump wrote on 03/09/2004

@ras: that code could be improved more.
.bannerText a { COLOR: #FFF; TEXT-DECORATION: none; }

will do what you want.

also it doesnt take longer to download pages like http://mysite.com/mypage.htm
the browser has to convert all your page links to this format before requesting each page/file anyway.

ras wrote on 03/09/2004

@flump: You're right, if I didn't have a general A { COLOR: #000066; TEXT-DECORATION: underline; } ruining it all for me... Otherwise you're spot on!

RichardM wrote on 03/11/2004

"Never use an absolute call up as it takes up more space, and more importantly, takes the browser longer to download the page."

I'm pretty sure that's wrong.
Every GET request to a webserver would pretty much look like this in the server logs wether the URLs are relative or absolute:
www.evolt.org - - [11/Mar/2004:13:40:18 -0000] "GET /index.html HTTP/1.1" 200 6306

As far as I can see, it wouldn't take the browser any longer (or shorter) to download the file because the request would always be the same, unless it uses some kind of persistent connection to the server.

joek wrote on 03/11/2004

"As far as I can see, it wouldn't take the browser any longer (or shorter) to download the file because the request would always be the same"

Acutally, I think the issue might be about filesize. "http://www.domain.com/filename.html" uses more characters than just "filename.html". In similar advice is to use shortened directory names for common elements, like "s" instead of "styles" or "i" instead of "images", because those small savings of a few characters can add up on larger pages.

notabene wrote on 03/15/2004

"Tables appear on the screen all in one go - no part of the table will appear until the entire table is downloaded and rendered"

That's not true anymore. It was, back in Netscape 4 days. But not anymore. Mozilla for instance displays table cells as soon as it has read their content. Then it most often has to re-lay out the page, since basically there won't be only one cell per row.

Also:

To place JavaScript in an external document use:

<script language="JavaScript" src="filename.js" type="text/javascript"></script>

Please keep in mind that language="JavaScript" implicitly says that the browser can consider the script as Javascript 1.0 or any superior version. Most often, one tends to test every method/property before using it, thus JS versioning (1.0, 1.1, 1.2 etc) tends to become obsolete, and the language attribute has been declared deprecated in HTML 4.01.

mrnbk wrote on 03/16/2004

Hi.

1. Avoid tables for layout

"CSS generally requires less code than cumbersome tables"

Less code != better code

3. Call up images through CSS

Nonsense. Browsers usually use placeholders for big images.

4. Use contextual selectors

"You may have noticed the colour values are shorter than normal. #03c is a shortened version of #0033cc - you can assign this abbreviated value to any colour value like this."

You can, but you should not use those.

10. Use / at the end of directory links

True, but the *problem* is on the server side:

http://www.URL.com/directoryname -> 2 HTTP requests

http://www.URL.com/directoryname/ -> 1 HTTP request

$ telnet www.evolt.org 80
Trying 207.189.150.139...
Connected to www.evolt.org (207.189.150.139).
Escape character is '^]'.
GET /evolt HTTP/1.0
Host: www.evolt.org

HTTP/1.1 302 Object Moved
Location: http://www.evolt.org/evolt/
Server: Microsoft-IIS/5.0
Content-Type: text/html
Content-Length: 150
Connection: Close

Document Moved
Object MovedThis document may be found hereConnection closed by foreign host.

@899, Nbk

dotcomikaze wrote on 03/18/2004

4. Use contextual selectors

"You may have noticed the colour values are shorter than normal. #03c is a shortened version of #0033cc - you can assign this abbreviated value to any colour value like this."

You can, but you should not use those.

Why not?

nainil wrote on 04/05/2004

Hi,

Web site visitors hate to wait, so many Web designers preload images to speed
up page display. Although JavaScript is the most common way to preload images,
it isn't your only option. Consider using the CSS DISPLAY property instead. It
may be more reliable and it requires less complex code.

The article below shows it all

http://www.netmechanic.com/news/vol6/css_no18.htm

haidary wrote on 04/20/2004

First, the way you're calling up images with CSS is actually bad. Why? I don't see any way to give that image alt text do you? It also requires you to use extraneous markup (the div). Only use images in style sheets if they're part of the site style, not if they're related to the content.

Second (@ nainil), the display property shouldn't help you preload anything as the W3C defines it to completely supress rendering of an element and its contents. If the element isn't rendered than it wouldn't make sense if the image was loaded anyway. If it gets loaded in a browser while it's displayed as none it's a bug (even if the vendor doesn't consider it one).

joek wrote on 05/11/2004

DanteCubed:
I would think that the download time saved by using shorthand CSS properties would be a drop in the ocean: like milliseconds (or nanoseconds).

"One raindrop raises the sea."

Think of it this way: FC0 is 50% smaller than FFCC00. Sure, in the larger scope of your whole CSS file, it may only be a little, but in the long run (as your CSS file grows), a little can add up.

Or think of it another way... do you save pennies? Why? Because eventually they'll add up.

freewanderer wrote on 05/16/2004

Jain, How about using CSS-P for layout? There are plenty of workarounds available to make CSS positioning work in modern browsers ( IE 5+, NN5+, Mozilla etc.). It's high time to move on to standards-based designing.

freewanderer wrote on 05/20/2004

There are plenty of resources out there on the web explaining the art of CSS-P, which will help you get rid of all the messy tables.

Some nice tutorials for CSS are housed at css.maxdesign.com.au.

CSS Positioning can be found at www.positioniseverything.net.

All the best CSS related stuff tend to appear at www.alistapart.com.

I'll come up with some more places soon.

mantik wrote on 06/06/2004

I love to use nested tables. They are just so handy for laying out xml pages. But I know that they can be a problem, so I try to make sure that they're really necessary to my design. Almost worse than nested tables are entire Web pages enclosed in one table. Your page won't appear until the entire table has been written by the browser. If possible, try to break Web pages into several small tables.

nags of a similar ilk

Ten New Ways to Speed up Download Times

10 new ways to speed up download time

1. Avoid tables for layout

2. Don't use images to display text

3. Call up images through CSS

4. Use contextual selectors

5. Use shorthand CSS properties

Font

Border

Background

Margin, padding, border

6. Minimise white space, line breaks and comment tags

7. Use relative call-ups

8. Remove unnecessary META tags and META content

9. Put CSS and JavaScript into external documents

10. Use / at the end of directory links

Reader Rating

meta

recent blog posts

in brief