Speed up Your Website - Top Tips

Speeding up your site can often be the key to an enjoyable web browsing experience.  There is nothing more frustrating than waiting for your page elements to load.  This is really one of my pet hates.

What can you do about it?  The elements that basically slow your pages down are as follows:

• Http requests within your page, i.e. loading an image;
• Poor or invalid HTML markup;
• Large images sizes;
• Too many images;
• Lots of DNS lookups;
• Uncompressed JavaScript and CSS;

Having lots of http requests on your page is a real performance killer.  Having lots of external JavaScript files, images and CSS files will kill the performance of your site dead.  But what can you do about it?  Well actually the answers are more simple than you might think.

Your JavaScript and CSS can be easily compressed by removing much of the unnecessary whitespace within your code.  What I personally do, is keep a copy of the uncompressed original and when I want to make a change, I do so to that document and then compress it, making another new smaller file.  A great site that will compress your JavaScript for you is jcompress.com.  Simply paste your code into a text box and it will spit your compressed code back out.

Images can also be combined into CSS sprites, which is essentially one image that can be used to style multiple elements from with your stylesheet.  For example, on my site I have one image that serves as a background for all of my h3 headings, main div headings and for the footer of my site.  This then only counts as just one http request, therefore massively decreasing the loading time for my site.  Have a quick Google around for this as there are many good sites that will give you some great examples.

Ok, so now you are left with a few things to do.  You are wondering how to make those big images smaller without having to sacrifice either the quality or the actual size of the image.  You've got several options.  One of them is to fiddle with the image format.  Personally, I prefer PNGs or JPGs for my images as they keep most of the quality.  Removing colours from the image is one way to also reduce your size.  Ok, now that you've done that, I bet that you are still wondering why your image size is large.  Next, have a go at using Smush.it which is a little tool available from the Yahoo Developer Network.  The tool will compress your images for you, removing extra details such as the Meta information which really isn't important for your site.  Smush.it claims that it is a "lossless" tool, which means that it optimises the images without changing their visual quality.  Once the process has finished, the tool reports how many bytes that it has saved you, along with a zipped your shiny new smaller file.

Lastly, poor or invalid HTML markup is also a performance killer.  If you validate your code according to the HTML spec that you outline in your header, your site will load much more smoothly and quickly as your browser won't be trying to make assumptions as to what your code really should be doing.

Don't panic now.  There are a few tools out there that can help you.  I personally develop for Internet Explorer as that is where the market is.  I then test in other browsers such as Firefox, Opera, Chrome and Safari, and more importantly no longer for IE6.  But, when I'm in the process of quality testing and validation, I use Firefox along with the Firebug, Web Developer, HTML Validator and the YSlow plugins.  For me, these are the best tools available for you to test your site.  I advise anybody who is even vaguely interested in performance to check these out.  YSlow and Web Developer are both brilliant tools as you can fully inspect your markup, and YSlow will even grade your site based on your components.

As you can see from the image above, there are several options available to you in YSlow (also a Yahoo Developer Network tool).  Using the components tab, you can see every element in your site.  One minor point to note, Firebug needs to be installed to use YSlow.

Good luck!