Do you like to wait for pages to download? Neither do your site users. Read on...
CSS downloads faster than tables because:
To learn more about CSS and the amazing things it can do for your website, check out the excellent tutorials at HTML Dog.
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
border:4px #00f outset
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.
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:
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).
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>
Instead of assigning a value to each individual paragraph, we can nest them within a
<div> tag and assign a value to this tag:
<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>
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.
font: 1em/1.5em bold italic serif
border: 1px black solid
background: #fff url(image.gif) no-repeat top left
background-position: top left;
margin: 2px 1px 3px 4px (top, right, bottom, left)
margin: 5em 1em 3em (top, left and right, bottom)
margin: 5% 1% (top and bottom, left and right)
These rules can be applied to
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.
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
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.
To place CSS in an external document use:
<link type="text/css" rel="stylesheet" href="filename.css" />
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.
Don't do this:
Do this instead:
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.
This article was written by Trenton Moss. He's crazy about web accessibility and usability - so crazy that he went and started his own web accessibility and usability consultancy, Webcredible, to help make the Internet a better place for everyone.09 dec 2003 - 4922