Pre-compress content for Apache to avoid compressing on every request

Every time you request a CSS, JavaScript, HTML, … file, the webserver will most likely fetch the file from disk, apply the same compression technique it used for the previous 10 requests, and serve you the compressed file.

It seems silly to have to recompress every file before serving it to your visitors. Even though gzip/deflate algorithms are pretty efficient, they still waste an awful lot of CPU cycles on busy servers.

In Apache, there’s a workaround you can use where you actually pre-compress the content yourself and let Apache serve the compressed content instead of having to compress it on-the-fly every time.

Here’s a neat little trick to accomplish that.

<IfModule mod_headers.c>
    # Serve gzip compressed CSS files if they exist 
    # and the client accepts gzip.
    RewriteCond "%{HTTP:Accept-encoding}" "gzip"
    RewriteCond "%{REQUEST_FILENAME}\.gz" -s
    RewriteRule "^(.*)\.css" "$1\.css\.gz" [QSA]

    # Serve gzip compressed JS files if they exist 
    # and the client accepts gzip.
    RewriteCond "%{HTTP:Accept-encoding}" "gzip"
    RewriteCond "%{REQUEST_FILENAME}\.gz" -s
    RewriteRule "^(.*)\.js" "$1\.js\.gz" [QSA]


    # Serve correct content types, and prevent mod_deflate double gzip.
    RewriteRule "\.css\.gz$" "-" [T=text/css,E=no-gzip:1]
    RewriteRule "\.js\.gz$" "-" [T=text/javascript,E=no-gzip:1]


    <FilesMatch "(\.js\.gz|\.css\.gz)$">
      # Serve correct encoding type.
      Header append Content-Encoding gzip

      # Force proxies to cache gzipped & 
      # non-gzipped css/js files separately.
      Header append Vary Accept-Encoding
    </FilesMatch>
</IfModule>

This example actually comes straight from the manual.

If you’re the owner of a site, you can add the following in your deploy/build steps to take a CSS file, create a compressed version and keep that next to the original.

(notice how I’m not using gzip $filename, as that would compress the file but remove the original version in the process – keeping only the compressed file)

$ gzip < style.css > style.css.gz

This takes the file style.css as input and outputs it to style.css.gz, keeping the original file on disk.

The result will be you have the 2 files on your server, side-by-side, and Apache serving the compressed version whenever possible.

$ ls -l
style.css
style.css.gz

I haven’t benchmarked if this is worth the hassle, but it sounds like it might be on busy servers.