Minify, Move and Externalise Javascripts

Minify

Many common javascript libraries ship with a min version. This is a minified javascript file where all the extra whitespace has been stripped out. Stripping out whitespace can significantly reduce the size of a javascript file. You can find many tools on the net to minify your javascript files for you.

Note:You can also minify css files

Move

Going back to the way a browser downloads resources, it is worth considering the priority with which those resources are downloaded. Javascript for example should not start running until a page is completely loaded. For that reason it should be the last thing the browser loads. By moving our javascript to the end of the page you ensure that the visual elements are loaded before the javascript giving the impression of a faster page load (although in reality the page takes exactly the same time to completely load).

Note: While you should move scripts to the page bottom they should still be before the closing body and html tags.

Externalise

Going back to the javascript libraries I mentioned. Its not too commonly known but google hosts minified copies of the most common javascript libraries. By linking to one of these copies instead of hosting it yourself you reduce your own bandwidth usage and if a user has visited another site that also uses the same google hosted js file then the file will already be cached in their browser and wont have to be downloaded at all!

Combine and minify CSS

As with javascript if you combine all you css into one file and minify it you can significantly reduce the size and thus time required to load the css.

The one caveat to this technique is if you have a large css file for a public site with another large css file for an internal application it makes sense to keep those css files seperate as you are probably going to have alot more public visitors to your site who will never need the internal css rules.

Enable gzip Compression

Gzip compression is a process by which the webserver takes a webpage (after the scripting language php/asp/jsp/CF has finished working) and compresses the output into the gzip format. The compressed output is then sent to the client browser which then reverses the compression.

Note: Images do not benefit much from compression, only the html,css and js output really benefit.

On the face of it this seems like alot of work. And yes it does add load both to the server which has to compress the output and to the client to uncompress it. However the payoff comes in two ways.

Bandwidth

By compressing the page you can achieve some impressive size reductions. I have seem up to 80 percent compressions. This can drastically reduce bandwidth bills.

Time to recieve vs Time to decompress

Provided that both the server and client machine are not excessively stressed, the time saved by sending a smaller page file over the net will exceed the time required to compress and decompress the file.

Note: Unpatched editions of IE 6 have been noted to have problems with gzip compression. I personally do not worry about people who use unpatched editions of IE 6 nor will I ever. It is not the responsibility of any developer to bend over backwards for stupidity.

Update 15-jan-2011: New blog entry with instructions on enabling gzip compression on IIS 6.

Update 17-jul-2012: New blog entry with instructions on enabling gzip compression on Apache HTTPD.