Making your site load faster with gzip

Although internet speeds are always on the increase, it is important for web developers not to start cutting corners when it comes to compression and file sizes.

One little trick to utilise it gzip compression, if you have not heard of it, there is a great article which can be found here. In short, gzip compression zips your main files before sending them to the clients browser. The browser will then unzip the content and display it, reducing needed bandwidth by around 60%.

It’s such a great feature because pretty much all browsers support it, and those that don’t will not be served the zipped file, so it degrades gracefully.

To utilise this on your server add the following to you .htaccess document:

# use gzip on the following file types: text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

You will notice that only the text based formats are included in this rule. That’s because images should already be compressed as much as they can be before set to production on a live site. So compressing them again won’t reduce their file size by much at all, it will just use CPU cycles for nothing!

You can check if a site is using gzip compression by using this tool.

So… get compressing! 🙂