Speed Tips: Add Cache-Control Headers

The speed of the site is a crucial part of an SEO and user experience aspect. There a lot of ways on how to optimize your site in order to achieve your target loading performance. One of them is by adding expiration headers or cache-control header. Basically, it composed of two aspects.

1. For static components – these are fixed components of your site such as images that often set to “Never Expire” policy of expires header. Meaning, these components headers are set in a year so since they are not subject to change.

2. For dynamic components – for dynamic components such as contents that are driven in database, using appropriate cache control header help the browser to determine it caching request.

So, now that we understand the two aspect of cache-control. We will proceed on how to implement it on the httpd.conf or in htaccess file. But before you do that, please make sure that you enabled the mod_expires and mod_headers modules in your Apache.

Here is the sample code that you can add in your htaccess file.

<IfModule mod_expires.c>

ExpiresActive On
ExpiresByType text/html "access plus 10 days" 
ExpiresByType image/gif "access plus 60 days"
ExpiresByType image/jpg "access plus 60 days"
ExpiresByType image/png "access plus 60 days" 
ExpiresByType application/x-javascript "access plus 60 days"
ExpiresByType text/css "access plus 60 days"
ExpiresByType image/x-icon "access plus 360 days"

</IfModule>

<IfModule mod_headers.c>
<FilesMatch "\\.(ico|jpe?g|png|gif|swf|css|js)$">
Header set Cache-Control "max-age=2692000, public"
</FilesMatch>
<FilesMatch "\\.(x?html?|php)$">
Header set Cache-Control "max-age=600, private, must-revalidate"
</FilesMatch>
Header unset ETag
Header unset Last-Modified
</IfModule>

Note: Please don’t forget to back up your htaccess first. Just in case you messed up, you can easily revert it back.