Click here to Skip to main content
Click here to Skip to main content

Ten ways to speed up the download time of your web pages

, 9 Jul 2004
Rate this:
Please Sign up or sign in to vote.
10 Tips to improve responsiveness for your reeades

Why is download speed so important?

Do you like to wait for pages to download? Neither do your site users. Read on...

1. Lay out your pages with CSS, not tables

CSS downloads faster than tables because:

  • Browsers read through tables twice before displaying their contents, once to work out their structure and once to determine their 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 (stored) 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

To learn more about CSS and the amazing things it can do for your website, check out the excellent tutorials at HTML Dog.

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 decorative 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:

<div class="pretty-image"></div>

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 disables the ALT attribute though so if you really want to have one then replace the above HTML code with this:

<image src="spacer.gif" class="pretty-image" alt="description" />

Spacer.gif is a 1px x 1px transparent image. Now you have a 50 byte transparent image and the main content loading first, and your great big decorative image, complete with ALT text, loading second. Perfect.

Please note that this technique is only good for decorative images and not informational ones. Any user who has CSS disabled will not be able to see your CSS-embedded images (or their alternative text).

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 returns and comment tags

Every single letter or space in your HTML code takes up one byte. It doesn't sound like much but it all adds up. We've found that by working through your page source and eliminating unnecessary white space and comments, you can shave off up to, or even over (if your HTML is really inefficient) 10% of its file size.

7. Use relative call-ups

Try to avoid absolute call ups as they take up more space. 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 these shorthand properties:

  • <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 pretty much unnecessary and don't achieve very much. 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 they've 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 are not good for search engines anyway because they dilute your keywords.

9. Put CSS and JavaScript into external documents

To place CSS in an external document use:

<link type="text/css" rel="stylesheet" href="filename.css"/>

To place JavaScript in an external document use:

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

Any external file is called up just once and then cached (stored) 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! For example, 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 server doesn't know if the link is pointing to a file or to a directory. By including the slash the server instantly knows that the URL is pointing to a directory and doesn't need to spend any time trying to work it out.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Trenton Moss
Web Developer
United Kingdom United Kingdom
Trenton Moss is crazy about usability and accessibility - so crazy that he founded Webcredible, an industry leading user experience consultancy, to help make the Internet a better place for everyone. He's very good at information architecture and interaction design.

Comments and Discussions

 
Generalalt Pinsusstty0130-Aug-04 18:48 
GeneralUse / at the end of directory links PinmemberHiltonG15-Jul-04 23:39 
GeneralA few comments Pinmemberlemur215-Jul-04 2:41 
I totally agree with using CSS for formatting rather than tables - it can hugely simplify formatting by eliminating tables and make an author's life much easier.
 
However, I'm not as convinced of the benefit of CSS as a *general* performance improver - there are a lot of things that go on in the background when CSS is involved. Specific improvements are possible, yes, but general performance improvements? See below.
 
A few comments:
 
1) Tables aren't necessarily displayed all at once - Mozilla and other Gecko based browsers will progressively render a table and reformat as new constraints arrive. Konqueror may do this too.
 
From research that I and some colleagues in an old job did it's possible to format a table in a single pass for *some* tables as long as you accept the potential price of having to reformat it if new constraints are found.
 
2) CSS controlling the loading order of images? There's nothing in the CSS spec about this sort of capability. What do you mean?
 
3) Having huge CSS pages can actually be a performance hit! Go to www.cnn.com and chances are you'll notice that there are a few seconds (depending on your download speed) where data *is* downloading, but nothing is being rendered. This is all of the CSS loading and being processed.
 
Most browsers (the sole exception being Konqueror I believe) will read CSS (and javascript pages for that matter) "out of line". This means that they'll stop the HTML parser until the CSS is read in. This allows them to ensure that when they build their document object model all of the css formatting information is present.
 
Konqueror reads in CSS pages asynchronously and reformats the document each time a CSS page loads - it isn't faster but it often gets text displayed faster.
 
What you say about caching is true. Reload cnn a second time and you won't have as long a wait as the CSS hasn't been downloaded. This doesn't seem too bad in the long run, but its the first time a page is loaded that makes an impression on a new visitor to your site. If they have to wait for ages when a huge CSS page loads, they'll form an immediate poor impression.
 
4) Be careful with contextual selectors! I've actually written a CSS module and formatter for a commercial web browser and contextual selectors are a performance hit (Mozilla developers agree with me BTW - check out their articles on XUL).
 
When matching a selector ".class P" to a P element, the *entire* set of ancestor elements must be searched for a class of "class". If P is a deeply nested element, this takes more time than simply matching a class.
 
There isn't much point saving a few bytes downloading if you increase the formatting time for a large document. Granted, performance isn't a big issue on today's computers, but on a big enough page, forcing a contextual selector match on thousands of elements for the sake of saving a few dozen bytes to process a handful of element doesn't necessarily make sense.
 
If you really want to use this trick, use a selector of ".class > P" which will only check the immediate parent element for a class. However, this selector isn't as widely supported, so portability may be more of an issue.
 
4) You have a mistype in your "margin: 5em 1em 3em" shortcut example. The "instead of" should be "margin-top ... margin-left ... margin-right ... margin-bottom".
 
5) Finally, do you have any actual measure results ? These would be interesting to share.
 
Thanks for the article.
 
Kev
GeneralSome more... PinmemberPhilippe Lhoste15-Jul-04 0:28 
Generala typo PinsussAnonymous14-Jul-04 21:47 
GeneralTesting Tool PinmemberEricLaw13-Jul-04 16:51 
Generalnice tutorial ! PinmemberBillWoodruff12-Jul-04 17:00 
QuestionTesting? PinmembertheJazzyBrain11-Jul-04 22:29 
QuestionWhat about compression? PinsussAnonymous10-Jul-04 9:47 
QuestionWhat about compressio? PinsussAnonymous10-Jul-04 9:47 
AnswerRe: What about compressio? PinmemberSuper Lloyd13-Jul-04 17:41 
GeneralRe: What about compressio? PinsussAnonymous14-Jul-04 20:48 
GeneralRe: What about compression? PinmemberPhil Bolduc16-Jul-04 13:02 
GeneralRe: What about compression? PinmemberSuper Lloyd16-Jul-04 13:26 
GeneralRe: What about compression? Pinmembererdogant21-Feb-06 0:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.1411028.1 | Last Updated 10 Jul 2004
Article Copyright 2004 by Trenton Moss
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid