The average internet connection is much more capable of delivering sizeable web content today than it was even 12 months ago – the UK average broadband connection at time of writing is 4.6Mb/s.

The problem

It’s important to remember that:

1. Not everyone has broadband
2. Most web browsers don’t take advantage of the bandwidth available

GZIP Compression

If you’re developing a site in Joomla for example you often hear people suggesting “turn on compression” within Joomla. This option compresses the page content created by Joomla before sending it back to the browser in real-time.

While this is a great solution for some sites, there are significant issues with this approach for many sites. It’s important to realise that the HTML page is only 1 of the many requests needed to generate a webpage – you also need all of the images, CSS files, and JS.

Take for example a typical template from YOOtheme – a major Joomla theme provider. The actual HTML for March 2009 theme demo is 1 out of 31 requests, and just 7kB out of a total of 144 kB.

It’s worth noting that if the objective is to make your site “faster” then Joomla’s gzip may not be the best option. The downsides to this approach are:

• It only affects the size of the HTML page
• It does that by compressing the content on-fly
  • Cacheing aside – this can result in you compressing the file every time it is requested – adding a significant processor load to your server
  • The process of compressing the data adds a delay (However small) before your content can be sent
• It does nothing about the other files that make up the webpage
• It doesn’t maximise your bandwidth usage by minimising total number of requests

My Approach

For the sites that I run I use the following approach:

• Identify files that are included widely, but updated infrequently
• Consolidate multiple files into one (ie, create just one .js file for your site, and one .css file)
• Create a compressed version of these files alongside the original
• Use a bit of .htaccess magic to serve the compressed files to everyone who can deal with them.

This is a good solution for files which don’t change frequently (CSS, template images, JS includes etc.) This approach gives you the best of both worlds, compressed files, but low server CPU impact.

The HOWTO

To implement it simply create a compressed copy of the file(s) you want to compress. If you have shell access to your website files you can do:

This should leave you with your original uncompressed file, and a compressed variant with the suffix “gz”.

Now add the following to your .htaccess file:

Remember if you do change any of the uncompressed versions you’ll have to re-generate the compressed version otherwise clients that support gzip won’t see the changes.

There are some complications when using Joomla with Virtuemart (Since it insists on loading CSS/JS support files itself) – but that’s a topic for another day!

When we implemented this on SnugBaby it reduced the total number of files required from over 35 to 27, and the total download size from over 200k to 144k – would love to hear other’s experiences.