Path // www.yourhtmlsource.com ā†’ Optimisation ā†’ EXTREME OPTIMISATION

Extreme Optimisation

by Ross Shannon

Extreme HTML optimisation is a mindset that many web designers are in, where “every byte counts.” Here I’m going to give you an overview of many different methods to cut off a few bytes off each element of your site. Most of these will speed up your site, but make it a little harder on you to maintain.

Some practices that have been in use for a while are very dangerous, like leaving out end tags for instance. I have left those tips to the bottom, with reasons why they shouldn’t be used. All the rest are safer and should definitely speed up your site.

Clock This page was last updated on 2012-08-21


Safe Techniques

Edit the <head>
Since the <head> part of your page must be downloaded first, it delays the top elements of your page — which are used to hold a user’s interest — from displaying. Much of the meta tags up there serve no real purpose. Use external script files, or leave JavaScripts out of the head and put them lower down in the body nearer the elements they affect. Also, don’t go overboard on keywords — stick to a few main ones and delete the rest.
Use short class names
When utilising stylesheets, you can use things like class="h" instead of class="headline", which saves space especially if you are referring to these classes frequently. Using contextual style you can format elements without using classes at all. And instead of using things like <span class="large">, why not just redefine a less-used tag like <big>?
Use short image names
If you use an image many times on a page (especially common with single pixel graphics), name them 1.gif, instead of single_pixel.gif.
Cut out the comments
Most comments are not needed in your code. You should know your code well enough to leave most of them out. If you do need one or two, keep them simple. One or two words should be enough to tell you what the comment is there for.
Take out the invisible characters
Tabs, carriage returns and spaces are all invisible and rarely affect how a page is rendered in a browser. They can usually be cut out to sharpen up your code. You’ll find that if you run an optimised page through any WYSIWYG editor it will do all sorts of things to your code to space it out, adding in many unnecessary indents and line breaks. Don’t use them. Put as much of your code on the same line as you can to avoid them; although keeping your code readable should also be a concern. Try running your pages through a HTML optimisation program.
Align across the row
Instead of setting align="right" into each cell in a table row, just put this attribute into the tr tag, and it will apply it across the way.
Shorten URLs
Since most of your pages will link to the same files every time (like on our right nav bar), if you can shorten the address of the files you’re linking to, you’re shaving bytes off every page on your site. When saving files, use short filenames. Links back to your homepage can always be made as "/", so long as you have your own domain or subdomain.

There is another method to do this without renaming all your folders, but it involves » configuring your server. You will probably have seen this technique on » Yahoo’s homepage, which has been heavily optimised, and also contains lots of links.

Dangerous Techniques

Leaving out the quotes
In the earlier versions of HTML, when adding in attributes, the quotes around the values were optional in most cases. You could write cellpadding=5 and your browser wouldn’t have a problem. This technique should no longer be used, as the quotation marks are now going to be mandatory in future HTML drafts, including the current XHTML. Get out of this habit as soon as you can.
Leaving out closing tags
Another optimisation trick that has always caused big problems is people leaving out the closing tags for certain elements — notably <body> and tables. You could close a table without closing all of its internal cells and rows with one </table> and Internet Explorer would let you get away with it. Netscape would not, and your table would not appear. Do not leave out these tags, as your page will not » validate, and so will not work in a lot of browsers. In fact, in XHTML with its stricter rules, all your tags now have to be closed.