Correct Silly HTML Mistakes

For those of you that have read my blog, you will know that I'm a little OCD about website performance - and so should you be.  If your website becomes the source of frustration for an end user, more often than not you will lose your viewer and since the choice on the web is now so vast, you may not ever get them back.
For every mistake that is made in your code, your browser has to interpret what it is that it should be doing.  Not a problem you think?  Well you might be right, but squeezing every ounce of performance should be your key goal.  Just using a handful of my favourite tools will highlight any problems that you have very quickly.  These include:

• Firefox / Chrome Plugins: Google Page Speed, HTML Validator, Firebug, Web Developer Toolbar and YSlow
• Smush.it
• Jcompress.com
• W3 HTML Validator (bit of a given really!)

These tools are brilliant, but if you can avoid making some mistakes in the first place you have less work to do later on making changes and refinements to your code.  For example, say you have inserted an image into your website and it displays correctly, but is missing the alt, width and height parameters, then your browser will identify three errors with that particular image element, which you then have potentially replicated elsewhere in your page.  One solution to partially get around this is to use some form of dynamic language to call a function that will display your images for you correctly each time.  Below is a quick image function to show you what I mean.

<?php
function show_image($url, $width, $height, $alt) {
     return '<img src="'.$url.'" width="'.$width.'" height="'.$height.'" alt="'.$alt.'" />';
}
?>
You could include this in your header or whatever and then call it each time you need an image on your page.  This way, you are forced to have each parameter so that your image will be displayed properly.  The function could also be expanded to include JavaScript, Class and ID parameters etc. but for a quick and easy solution there isn't much else better.  You could then apply this theory to other elements on your page and you will quickly then get the hang of things.

Always, always run a validate check to see if your code really does validate.  If you are confident in your code being very good, you could think about making your site XHTML 1.0 strict and while this sounds easy, it sometimes isn't and could mean that you have to redesign part of your site to compensate.

Other areas that will offer performance increase are:

• CSS sprites;
• Too much JavaScript;
• Images that are too large for the job, i.e a 16x16 image shouldn't be 10kb;
• Cache as much of your code that won't be changing, i.e. JavaScript;
• Minify your HTML, CSS and JavaScript;
• Avoid DNS lookups;
• Too many HTTP requests within your page;

Revisit these steps often and you will be surprised about the difference that it makes!