How to: mod_expires & mod_deflate in Apache running on CentOS 5

While trying to improve the performance of our internal workflow I was tasked with setting up mod_deflate and mod_expires, based off of Yahoo's! Best Practices for Speeding Up Your Website.

The nitty gritty of these two is to make sure they are both listed in your httpd.conf file:

LoadModule expires_module modules/mod_expires.so

LoadModule deflate_module modules/mod_deflate.so

Since this server is running the default CentOS 5 apache I already had the support I needed.  I then continued on to find the documentation online. Both modules support vhost context so that is the route I went with. I added the lines below to each vhost that I wanted the settings to take place for.

ExpiresActive On

                ExpiresByType image/gif A2592000

                ExpiresByType image/jpeg A2592000

                ExpiresByType image/png A2592000

                ExpiresByType text/css A2592000

                ExpiresByType application/x-javascript A2592000

                ExpiresByType application/pdf A2592000

        

The syntax for the ExpiresByType directive is:

ExpiresByType mime/type TimeInSeconds. 

The A2592000 is Access time + one month.  If I wanted the file to be cached for one month from modification date I would have done M2592000 instead.

Other handy numbers in seconds:

86400 = One Day

604800 = One Week

2592000 = One Month

31536000 = One Year (365 Days)

157680000 = Five Years

3153600000 = Ten Years

Why might these large numbers come in handy?  Well you want to set far future expiration dates for things that don't change often.  The catch is if you need to update one of these items with a far future expiration date.  You have to change the file name.  Modify the case of the filename will work in the short term but really you want to start adding version strings to all of your static files like CSS and JavaScript.  

mod_deflate is much easier to setup.  Simply add the line:

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/x-javascript text/css

Again based on the mod_deflate documentation you can add this directive to the vhost directives.  Please note that this directive can be placed on just about any context level and as such is very powerful.  Also note that you should not try to compress image file because they are already compress and it really is just a waste of CPU and time.

Using these two methods we where able to reduce our website on a first visit from 190.7Kb total to 157.3Kb total.

Before:

9.4K HTML/Text

32.1K Javascript

12.9K Stylesheets

0.4K CSS Images

135.9K Images

190.7K Total

After:

3.1K HTML/Text

15.0K Javascript

2.9K Sytlesheets

0.4K CSS Images

135.9K Images

157.3K Total

I also used the yuicompressor to minify our main Javascript and our CSS file.

After:

3.1K HTML/Text

12.3K Javascript

2.2K Sytlesheets

0.4K CSS Images

135.9K Images

154.0K Total

As you can see using mod_deflate to compress the Javascript and CSS is a more substantial savings in terms of bandwidth than trying to minify.

Granted based on my observations if we really wanted to save on bandwidth and make our pages load faster we would reduce the substantial image footprint.

In case anyone is wondering where I culled all of these numbers from I used Y! Slow for Firebug in Firefox.