Ten ways to speed up the download time of your web pages
Then check out this free article that will give you 10 hints about how to get your web pages into your viewers eyes even faster.
Ten ways to speed up the download time of your web pages
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 both here at DMXzone or at places like 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 here if you like.
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 improve 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.