How To Leverage Browser Caching

Introduction

Modern internet browsers support file caching. This can often help speed up the loading time of your website as each element (such as images) does not need to be loaded with each page load.

Procedure

There are several types and methods of enabling browser caching. Below are instructions on a few of these:

Cache-Control

Cache-Control headers can set a maximum age of a cached file. This can be defined by adding the following to the .htaccess file in the website's directory:

<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2628000, public"
</filesMatch>

Note: The file extensions shown is an incomplete list. In the example the max-age is the time in seconds with 2628000 being 1 month.

Mod Expires

Apache can define an expire time for cached data as well. This can be configured via the .htaccess file in the website's directory:

<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresByType image/gif "access plus 1 month"
 ExpiresByType image/jpeg "access plus 1 month"
 ExpiresByType image/png "access plus 1 month"
 ExpiresByType text/css "access plus 1 week"
 ExpiresByType text/javascript "access plus 1 week"
 ExpiresByType application/javascript "access plus 1 week"
</IfModule>

Note: This is an incomplete list of file types and can be customized as needed.