Web Site Monitoring Central | Network Monitoring | Website Monitoring

	Avoid tables for layout Don't use images to display text Call up images through CSS Use contextual selectors Use shorthand CSS properties Minimise white space, line breaks and comment tags Use relative call-ups Remove unnecessary META tags and META content Put CSS and JavaScript into external documents Use / at the end of directory links

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

About The Author
This article was written by Trenton Moss. He's crazy about web usability and accessibility - so crazy that he went and started his own web usability and accessibility consultancy to help make the Internet a better place for everyone.