How to load your site faster: HTTP Compression

Pras Sarkar — Tue, 08 May 2007 04:49:56 +0000

In this series, we take a look at how to reduce load times across your site. The first part of the series tackles one of the most important techniques which usually proves to drastically reduce your load times. Usually it’s not enough to use HTTP Compression alone (best results when coupled with smart caching), but I’ve seen anywhere between 40%-80% speed increases.

So how is it done? Well, two different ways, depending on your Apache version and configuration options. To check what version you’re running (for the folks who use a hosted solution), try this on any unix shell:

$> curl -I http://headphono.us HTTP/1.1 200 OK Date: Wed, 02 May 2007 02:49:22 GMT Server: Apache/1.3.37 (Unix) mod_throttle/3.1.2 DAV/1.0.3 mod_fastcgi/2.4.2 mod_gzip/1.3.26.1a PHP/4.4.4 mod_ssl/2.8.22 OpenSSL/0.9.7e X-Pingback: http://headphono.us/xmlrpc.php X-Powered-By: PHP/5.2.1 Content-Type: text/html; charset="UTF-8"

As you can see, I’m using Apache 1.3.37 (yes, thats a very 1337 version). You can also see that my Apache has been compiled using mod_gzip — which is exactly what I need. Follow the directions below depending on the version you’re running.

If you’re using Apache 1.3, you’ll need mod_gzip. I won’t get into the process of recompiling/installing Apache with mod_gzip, but look around and you’ll find lots of places that explain it. From this point on, I’m assuming you have mod_gzip already.

You’ll want to edit either the .htaccess file (per directory on your server) or the httpd.conf file for a global Apache configuration. I usually like to edit my .htaccess files so that I can move my directories across servers and they maintain the compression settings.

The following explicitly states the following:

All text files (text/css, text/javascript, text/html, etc.) will be compressed.
All javascript application files (that aren’t text/javascript) will also be compressed.
All images (which are usually compressed already) need not be compressed.
All PDF documents need not be compressed.

mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript$ mod_gzip_item_exclude mime ^image/.*$ mod_gzip_item_exclude mime ^application/pdf$

If you’re using Apache 2.x, you’ll need to use mod_deflate. Again, I won’t get into the complexities of recompiling Apache with mod_deflate (see here for that info).

To turn on mod_deflate:

SetOutputFilter DEFLATE

To explicitly exclude files from being gzipped, add the following for every type of file you want to exclude:

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

But if you want to explicitly include the files:

AddOutputFilterByType DEFLATE text/* AddOutputFilterByType DEFLATE application/ms* application/vnd* application/postscript

You can even turn on gzip compression for certain directories:

AddEncoding x-gzip .gz AddType application/x-javascript .gz AddOutputFilter DEFLATE js

So only javascript files in the subdirectory “js” would be compressed.

Now if you wanted to get real funky (and you should), you’ll want to be aware and compress according to the browser clients that can handle HTTP compression. You can tweak compression by limiting them to certain browsers:

# Netscape 4.x has some problems... BrowserMatch ^Mozilla/4 gzip-only-text/html


# Netscape 4.06-4.08 have some more problems

BrowserMatch ^Mozilla/4\.0[678] no-gzip
# MSIE masquerades as Netscape, but it is fine

# BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48 # the above regex won't work. You can use the following # workaround to get the desired effect: BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

This should be a pretty basic (if very brief) introduction to HTTP compression. I highly suggest the further reading below, and really fine tuning your Apache settings to get the best results. Using Firefox plugins like Firebug also help analyze and debug your settings to make sure your gzip compression is working and is being effective.

How to load your site faster: Introduction

Pras Sarkar — Mon, 30 Apr 2007 04:00:46 +0000

Given my recent obsession with optimizing website load times recently, I felt the need to share my research findings. There are more ways than flavors at a gellato store, but fear not, I’ll try to condense them into a consumable chunk in the next few series of posts.

Here’s a rough breakdown of what I intend to explore:

HTTP Compression
Application level caching (PHP)
Client side requests optimization
Non-vital scripts optimization
Client side caching (i.e. browser caching)

There’s a lot of neat tips and tricks out there, and I’ll try to post as much code and/or scripts that I can. I’ve used tactics from all the above topics in real world applications that I’ve been developing and the results have been very encouraging. On one particular site, using a combination of #1,#2 and #3, I went from an initial load time of 3.6 secs to 455ms (87% decrease).

Stay tuned for some good stuff.

headphono.us » Optimization

How to load your site faster: HTTP Compression

How to load your site faster: Introduction