Leverage Browser Caching to Improve Website Speed

Leverage browser caching is often an area highlighted when running a GTMetrix performance report. When activated it can significantly enhance visitor experience as page load times decrease and pages can seem to load instantly.

What does Leverage Browser Caching mean?

Leverage Browser Caching is a process where web page content and data is temporarily stored in the user’s web browser. This can increase page speed because certain elements do not have to be downloaded over and over again. For example, pictures, page banners, logos and CSS / Javascript rarely change. Browser caching stores this information in the browser cache so when the user revisits the web page there isn’t the need to redownload these elements. This results in faster web pages due to a lot of the data already being stored locally.

How to leverage browser caching…

Leverage Browser Caching on WordPress websites

If you are using WordPress there are many plugins available which make this an easy task to undertake. I tend to use WP Fastest Cache but other popular add-ons include W3 Fastest Cache, WP Rocket and of course LS Cache which can be enabled on our servers after last year’s LiteSpeed roll out. If using WP Fastest Cache you may find this post from 2017 useful which outlines a number of steps to take to improve your GTMetrix score.

Leverage Browser Caching using Apache

To enable browser caching using Apache you will need to open your .htaccess file. This can be done via any FTP client or by using the file manager option within cPanel. You can edit the file using any basic text editor. You should add the following code:

<IfModule mod_expires.c>
  ExpiresActive On

  # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"

  # Video
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"

  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"

  # Others
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>

The expiry dates above are suggested time frames. If you find that certain file types are updated more than others you should set an earlier expiry time on them.

Finally, it is worth noting that you should be careful when enabling caching as users may not see the up to date version of your site after an update.