Leverage Browser Caching

leverage browser caching

What is Browser Caching?

Browser caching is the process of storing previously requested files within your browser’s local cache in order to help reduce loading times. Once a file has been stored locally, less requests are required to be sent to the server and less data is required to download.

There are certain components that must be enabled in order to properly leverage browser caching. For instance, you must ensure that you specify a cache validator to help the browser determine if the file can still be retrieved from the local cache or if a request must be made to the server. Additionally, you must properly set Expires or Cache-Control headers for your assets. Using both would be redundant. Furthermore, Gtmetrix prefers Expires over Cache-Control as it is more widely supported. Therefore this article will focus on using Expires headers when demonstrating how to leverage browser caching.

How To Leverage Browser Caching

Implementing the use of the Expires headers will allow you set a defined time period for which locally cached files can be retrieved before needing to check the server again. Certain file types have different Expires values depending on how often they are projected to change. For instance, a website’s images are likely not going to change much once they have been uploaded. Therefore, it may be acceptable to set the Expires header to 1 year. On the other hand, if you are using PDF documents which are being modified more frequently it would make sense to set the Expire header for these files to 1 month.

The following section describe two separate methods to leverage browser caching.

Method #1

Add the following snippet to the top of your .htaccess file.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

Method #2

If you are running Nginx and want to define your expires headers directly on the web server, add the following snippet to the inside of your server block which is usually located at /etc/nginx/site-enabled/default.

server {
    listen       80;
    server_name  example.com;

    location / {
        root   /var/www/example;
        index  index.html index.htm;
    }

    location ~*  \.(jpg|jpeg|gif|png)$ {
        expires 365d;
    }

    location ~*  \.(pdf|css|html|js|swf)$ {
        expires 30d;
    }
}

Additional resource extensions can be added to the above snippets and the expires headers can be modified to suit your needs.

Additional Browser Caching Recommendations

The recommendation to leverage browser caching should now disappear once you have added the snippet above to either your .htaccess or Nginx server block. In the event that you run your page through a site speed test tool again and see that you still do not score 100%, check which files are being flagged. If the files are being loaded from third party sources such as gravatar.com or googleapis.com these can be safely ignored as you cannot change them. Additionally, the following recommendations should be taken into account when setting your expires headers:

  • In most cases set the expires headers to at least 1 month (recommended 1 year). The settings provided in the section above are acceptable for most of today’s website’s, however if you plan do be making many updates and changes it would be advise to reduce the expires value.
  • Use file name versioning in the event that you do make a change to a resource which is cached locally for a long period of time, this method is called cache busting. For example, if you have a file called foobar.js and make an update to it, you can re-upload the file as foobar-v1.js. This same technique is used to allow for greater control within a KeyCDN push zone.

Upon determining which file types require which Expires headers, be sure to implement them using one of the two methods mentioned in this article. This recommendation will not only help improve the speed of your website for returning visitors, but will also reduce the load on your web server.

Leave A Comment?