Saving Bandwidth and Speeding Up Your Site With GZIP and Browser Caching

There are a couple of easy adjustments you can make to your web server in order to decrease page loading times, save bandwidth, and reduce load on the server. All you have to do is add a couple of code snippets to either your Apache server configuration file (httpd.conf or apache2.conf) or an .htaccess file.

Note that these require that your server have certain modules installed for this to work. You will need either mod_deflate or mod_gzip for GZIP compression and mod_expires for the browser caching trick.

Enable Browser Caching

When a web browser loads a page, it checks each item it requests (JavaScript, CSS, images, etc) against its local cache. If an item, say the stylesheet, hasn’t expired yet, then it will load the local copy instead of requesting a new one. Now if you were to instruct your server to set the expiration time for images, CSS, and JavaScript files to one month from the present, users viewing multiple pages of your site (even across multiple days) won’t tax your resources as much, as they will use the copies of your stylesheets and images that have already been downloaded.

Insert this into your .htaccess file or Apache config, restarting Apache if you chose the latter:

<FilesMatch "\.(ico|flv|jpe?g|png|gif|js|css|swf)$">
 ExpiresActive On
 ExpiresDefault "access plus 1 month"
</FilesMatch>

Now any file with an extension of ICO, JPG, JPEG, PNG, GIF, JS, CSS, SWF will be set to expire one month from the time the browser caches it.

GZIP Compression

Now wouldn’t it be nice if you could cut down on the size of the file? There’s no point in doing it for images (which are already compressed) but you can greatly reduce the size of text-based files (HTML, JavaScript, CSS) by having the server compress them before sending them out.

Add this to your .htaccess or Apache config (restarting Apache if you chose the latter) as before:

SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ \
 no-gzip dont-vary
SetEnvIfNoCase Request_URI \
 \.(?:exe|t?gz|zip|bz2|sit|rar)$ \
 no-gzip dont-vary
SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

This beast does several things. The first directive tells mod_deflate to get to work. The next several lines determine how mod_deflate will work. It will not affect GIF, JPG, PNG images or already-compressed archive files (e.g. ZIP or RAR), as there is no real benefit in doing so. The final three “BrowserMatch” lines deal with Internet Explorer’s funkiness.

Is it Working?

If you have Firebug and the handy Google Page Speed extension installed, you can run a quick test to make sure everything is working right. There should be two lines mentioning “Leverage browser caching” and “Enable gzip compression.” They should be checked-off instead of having a red icon.

Tags: Apache, bandwidth, Cache, gzip, Hosting, servers, transfer