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.
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.
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.
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
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"
ExpiresByType text/css "access plus 1 month"
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"
That's it! You now have Browser Caching enabled.
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
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
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.