Web site Front-end optimization
22nd August 2008Every front-end developer should be concerned about their web site load times and do whatever they can to improve their users experience. With a little knowledge of ways to optimize your web site maybe there are some improvements that you can make.
Make your files smaller
The most obvious improvement you can make is to make your files smaller. Smaller file sizes means less data for the client to download, which means less time is needed to download the data, which means a faster web site.
How to make your files smaller?
Well, you should always optimize your images for the web. You should write beautiful code and minify it. What is minify you ask? Minify is basically when you remove all the unnecessary nonsense from your code. I.e. new lines, spaces, comments and so on.
You could use http://shygypsy.com/cssCompress/ to minify your CSS and http://jscompress.com/ to minify your JavaScript.
Here is a post on Six Revisions that has a whole list of Web-Based Tools for Optimizing, Formatting and Checking CSS.
Increase the number of parallel downloads
Browsers have a limit on how many parallel downloads they will make when loading a page. The HTTP 1.1 specification recommends two parallel downloads per hostname. This means that a high number of components, HTTP requests, per page will slow your web site down.
To reduce the number of requests you can use CSS Sprites. Your sprites should also be optimized for the web.
A neat way to increase the number of parallel downloads is to spread your data across multiple domains. You could, for example, store your images on images.yourdomain.com. This way you could let the browser get the data, i.e. pages, from www.yourdomain.com and at the same time get the images from images.yourdomain.com.
Note: Use no more than 2-4 domains for this otherwise the time spent on DNS lookups will offset the time saved by increasing the number of parallel downloads.
Know this about JavaScript
When the browser is downloading JavaScript files it won't download anything else till it's done. Which means it's a really good idea to keep these files as small as possible. Make sure you remove any unnecessary code from your scripts and to minify your files, especially if you have a lot of them.
Note: New IE8 will download multiple scripts in parallel.
Know this about cookies
Browsers send cookie information with every request, even for images. This is another good reason to keep your images on a different domain. This way, if you set your cookies at the appropriate level, your images can be fetched without the cookie information being sent in the request.
Did you enjoy this post?
If you enjoyed this post you can subscribe to my 
RSS feed to know when I post another article. It would also be great if you bookmarked this post on your favorite social bookmarking site, if you have signed up with any.
