Browser Caching Tune-Up With mod_expires and mod

Caching With mod_expires and mod_headers

Allowing visitors to cache images and files in their browser can make your website significantly faster to navigate. This post will explain how to use mod_expires and mod_headers to allow visitors to cache files in their browser. With browser caching, you can set the time for which files can be cached. The caching duration has pros and cons. For example, if you are blogging and you update content, but rarely change images, caching for long time periods can significantly decrease the load from your server and make the user’s experience much better. Alternatively, if you have a small website and make changes daily, caching for the long term can be detrimental if you want your visitors to always see the latest content.

For a larger game plan, you can use Varnish and mod_expires to keep your website running quickly.

Show Modules with Debian / Centos

Debian / Ubuntu
root# apache2ctl -M
root# apachectl -t -D DUMP_MODULES

Alternatively, a tool like Web Host Manager with Centos can show which Apache modules are installed and enabled. You can see that with Easy Apache.

Enable mod_expires (Debian / Ubuntu)

root# a2enmod
root# /etc/init.d/apache2 restart

Now I can cache all the images on my site by adding this to .htaccess in my root directory.

1) Add code to .htaccess.

#mod_expires
ExpiresActive On
<IfModule mod_expires.c>
    ExpiresDefault “access plus 1 month”
    ExpiresByType image/x-icon “access plus 1 month”
    ExpiresByType image/jpeg “access plus 1 month”
    ExpiresByType image/png “access plus 1 month”
   ExpiresByType image/gif “access plus 1 month”
    ExpiresByType application/x-shockwave-flash “access plus 1 month”
    ExpiresByType text/css “access plus 1 month”
    ExpiresByType text/javascript “access plus 1 month”
    ExpiresByType application/x-javascript “access plus 1 month”
    ExpiresByType text/html “access plus 600 seconds”
    ExpiresByType application/xhtml+xml “access plus 600 seconds”
</IfModule>

Using mod_headers

1) Enable mod_headers

root# a2enmod headers

To use mod_headers,
1) Add code to .htaccess file

<FilesMatch “\.(php)$”>
Header set Expires “Sat, 15 Dec 2015 20:00:00 GMT”
#Header set Cache-Control “public, max-age=3600, must-revalidate”
</FilesMatch>

#mod_headers
<FilesMatch “\.(ico)$”>
Header set Expires “Sat, 15 Dec 2015 20:00:00 GMT”
#Header set Cache-Control “public, max-age=3600, must-revalidate”
</FilesMatch>

<FilesMatch “\.(ico|pdf|flv|jpe?g|png)$”>
#Header set Cache-Control “public, max-age=3600, must-revalidate”
</FilesMatch>

Simple Check to See If caching Is Working

If you have Firebug and Yslow addons installed in your browser, you can fine tune your Expires Headers. All you must do is a run a Yslow test and check the Expires Headers. It will give you a grade and tell you what has ‘No Future’ expiry date. With a little tuning, you can fix the expires headers. You may need to add expires for specific file types like ‘.ico’. Or, you may need to remove links to non-existent images (or add 1 pixel transparent images to a folder). As you tune expires Headers your Yslow grade will climb instantly.