Web Development - Optimizing A Website for speed!

For a lot of web developers and website owners, one factor which is over looked a lot, is that of optimization.  Now a days with Google basing index results based on the time it takes for a website to load a number of techniques can be employed to speed up the loading.  I will talk about a few of these techniques here to hopefully allow some new webmasters to concentrate more on their web development rather than on waiting for their pages to load!

Firstly there a number of tools users can use to help profile their websites, and these come handily in the form of browser extensions.  For this article I am going to concentrate on Firefox as it most web developers browser of choice, and the Addons I recommend everyone get are YSlow and PageSpeed.  You will need to install the firebug extension first as this allows the other extensions to do their job, but I assume most if not all of you already have these extension as its invaluable for doing CSS work and Javascript debugging.  Here is an excellent video I found to help you get to grips with YSlow.

YSlow was developed by Yahoo and is the older of the two tools, and one could argue more comprehensive, after installing both the extensions in Firefox you can select them in Firebug, and run an analysis of your website using each extension.  This will give you lots of information on what you are doing right or wrong.  Areas I feel which are relatively easy to address but should be given a lot of weight is the use of minification for your JavaScript and html, and tools to do this should definatly be considered and there are plenty of free utility's to complete this job.  This should shave off a number of kb from the size of your website almost instantly as they remove all the line breaks and white space.  More agree minification utilities even change and shorten the variable names in JavaScript but I have found most of these tend to cause conflicts.  

An even more important area to address is the number of requests which your website is making, if you are loading 20 JavaScript files or css files, or both!  Each file has to be requested individually and as such can cause REAL bottlenecks,  so if possible try find minification software which also concatenates your JavaScript and css.

This can also be done to your background and icon images using css sprites, which essentially merge all the images into one file therefore reducing the number of requests and also reducing the overall size.  This process is fiddly though and all the automated tools I have seen do a bad job!  I generally ignore this rule, but if I had plenty of time or a really nice utility I would pursue it further.

Another very important subject is the use of Content Delivery Networks or CDN's for short.  CDN's allow you to place your websites files on servers around the world so anyone visiting your site gets the files loaded from a place close to them.  Normally the use of CDN's was reserved for the big boy websites as they require placing hardware in lots of different countries.  This has all started to change though, with companies like Amazon offering their Cloud Front service for relatively cheap.  If you do not want to pay for these services there are still a number of ways you can easily leverage the power of CDN's.  If you use some of the popular javascript librarys such as jQuery, then the good news is that these libraries are hosted by google and other CDN's for public use.  I really recommend using the Google CDN though as it is the most common and any user who has already downloaded the required file via another website will have the file you need for your website already on their computer.

There is also another alternative to these standard CDN's and that comes in the form of Cloud Flare, which is a company which has been making headlines of late as it allows users to get the benefits of a CDN for absolutly no cost, they cache a lot of your resources and provide a layer of security for your website to, so not only are they free but also reduce your costs.  Here is a video with a brief overview of their service.

Things to not worry so much about:

While these tools do give lots of information, some of their recommendations carry more weight than others, one such recommendation is ETags, generally I completely ignore this recommendation as it requires you have access to the server or a very friendly hosting company!

Conclusion:
The tools I have mentioned WILL help you improve your websites speed, of that their is no doubt and which in turn should also help your website get a better rating on google!  I have learned a lot from this web development site, which itself seems to score well in those tests so I guess they must be doing something right!  I hope to keep posting things I learn so stay tuned more web development news and tips!