When using Google Pagespeed to check your website's performance, you could get the message to leverage browser caching, or Serve Static assets with an efficient cache policy. But what is browser caching? And how does it affect page speed and website performance? This article helps you find out more.
What is browser caching?
If a visitor opens a page, the browser will download a number of files to display that page: the HTML itself, but also images, stylesheets, javascript files, fonts, and more. This can add up to a lot of data.
Most of these files are used not just on that page, but across your website. Most sites use the same stylesheet across the site, and the same javascript, the same logo, and so on. Wouldn't it be great if all those files had to be downloaded only once?
That's what browser caching does: it stores the files in the browser cache, and the next time that file is needed, it fetches it from the browser cache instead of from the server. The result: fewer MB's to be downloaded, and much better performance.
Browser caching is often used for images, fonts, javascript files, and stylesheets - static resources that are relatively large, used across multiple pages, and don't change too often.
How browser caching works
By setting up browser caching, you basically tell the browser for how long they can store a certain file, without requesting it from the server again. That period is called the Expiry Time.
Imagine you tell the browser to cache the stylesheet for a month. After the first visit, the stylesheet is locally stored, and only after one month, it will download a fresh stylesheet from the server again.
But there's a catch: if you've changed that stylesheet since the visitor last came to your site, they won't see that until after a month. Luckily, there are ways to avoid that. More on that later.
If you don't explicitly specify an expiry time, the visitor's browser will always try to fetch a fresh copy from the server, severely slowing down their experience.
Check if your site has browser caching enabled
By now, you probably want to know if caching is enabled on your website. Giftofspeed.com has a good checker that tells you, for each file type, what the Expiry time is
How to set up browser caching
Apache: Expires headers
Are you using Apache, and can you change the .htaccess file? Great! You can now set up caching by filetype. For every filetype, you determine how long the browser is allowed to cache it. Let's set the expiry time for fonts to one year, images to 3 months, and to one month for stylesheet and javascript:
<IfModule mod_expires.c>
ExpiresActive On
# Images
ExpiresByType image/jpeg "access plus 3 month"
ExpiresByType image/gif "access plus 3 month"
ExpiresByType image/png "access plus 3 month"
ExpiresByType image/webp "access plus 3 month"
ExpiresByType image/svg+xml "access plus 3 month"
ExpiresByType image/x-icon "access plus 3 month"
# Stylesheets
ExpiresByType text/css "access plus 1 month"
#Javascript
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
# webfonts
ExpiresByType font/truetype "access plus 1 year"
ExpiresByType font/opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
# Web Open Font Format (WOFF) 2.0
ExpiresByType application/font-woff2 "access plus 1 year"
</IfModule>
That's it! You now have Browser Caching enabled.
Apache Cache-control
An alternative way to set caching instructions is the Cache-Control header, introduced in Apache 1.1. It works very similarly and has a couple of extra options. For most websites, ExpiresBy will suffice.
More info about Cache-Control
Browser Caching in Wordpress
If you're using WordPress and you can change the .htaccess file, we recommend you follow the instructions above. If you don't have access, or rather use plugins, W3 Total Cache is a good option. Among many other features, it lets you enable browser caching
Invalidating cache
What if I need to change a cached file? Say you changed your stylesheet, but everyone who visited your site recently is still using the cached version. Asking everyone to clear their local cache is probably not an option.
One way to fix this, and force every visitor to download the latest file instead of relying on the cached file, is to change the name. Rename style.css to style-new.css, and change the reference in the head of your template to use the new file. Although this works, it can get out of hand when you regularly make small changes to the stylesheet.
A good alternative is to use the file's last modified date in the name, or as a URL parameter. An example in PHP would be:
<link rel="stylesheet" type="text/css" href="style.css?changed=<?=filemtime('/path/to/style.css')?>">
The result is :
<link rel="stylesheet" type="text/css" href="style.css?changed=160509795">
The browser will think this is a new file and download the latest version from the server.
