How to Leverage Browser Caching

When I published our new site I had to go back to basics on a number of things. In fact 2 weeks later I’m nowhere near done but I have made significant headway and wanted to share a few things that I found – then main one being How to Leverage Browser Caching.

On-page SEO is dead

On-page SEO these days is just about dead. Of course we all still need to add the basics like Title tags and basic metadata and other basic things as keywords in H1 tags and so forth but your On-page optimization these days should be focused on site speed and making your website appear in a visitor’s window as quickly as possible. As well as the usability factor this is also a ranking metric so it’s in your interest to make your site download and render as fast as possible. Fortunately many of the things that affect PageSpeed are handled on the server side. These are such things as gzip compression, Accept-Encoding (proxy compression) and Keep-Alive settings. One thing we can also do on the server side is “Leverage Browser Caching”. But many people have hosts that don’t set these things.

How to Leverage Browser Caching

When someone visits your website your front-end files are downloaded to a temporary folder on the visitor’s computer. This is known as caching and hopefully it’s something that most webmasters are familiar with. Leverage Browser Caching means your website is telling a browser how to handle the caching, what to cache and how long to cache the files for. So your site will always load fast for repeat visitors.

How to Leverage Browser Caching on Linux servers.

To enable Browser Caching on Linux servers you will need to edit the .htaccess (or create one if you don’t have one). This is a hidden file in many FTP programs so make sure you have your FTP program set to see hidden files. Or alternative your control panel’s file manager will display by default. There are a few ways to do this but the following is the simplest (in my opinion).
Add this to the top of your .htaccess:

1
2
3
4
5
6

# 1 Month for most static assets
<filesmatch ".(css|jpg|jpeg|png|gif|js|ico|woff|woff2)$">
Header set Cache-Control "max-age=2592000, public"
 
  <filesmatch ".(x?html?|php)$">
    Header set Cache-Control "private, must-revalidate"

The first “filesMatch” line is specifying what type of files to cache. This willl be your images files, css, javascript and in mine I also have some font extensions.
The second line instructs how long to cache for. The “max-age” variable is in seconds so 1 day being 86400 seconds multiplied by 30 and we get age=2592000. Many set this to one year so research and set what you feel if a good fit for your site.

How to Leverage Browser Caching on Windows servers.

On Windows server in Plesk’s httpdocs you will have a web.config file. Find this code:

1

<system .webServer></system>

Simply add the following code straight after:

1
2
3

<staticcontent>
<clientcache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00"></clientcache>
</staticcontent>

The above obviously sets a one year cache. You can change 30 to 365 to instruct a browser to cache for a year. Conventional best practices state that the caching should be at least a month so consider that before setting a lower cache timeframe.

Test It Actually Works

There are some fantastic tools that will tell you if this is working or not and also report on many other things you should consider and also provide the solutions.

https://tools.pingdom.com/

https://gtmetrix.com/

I’ll write more about the different types of caching you can do at a later date. Caching is often misunderstood and webmasters often use not enough or too much. There is a delicate balance that can be acquired for database driven sites like WordPress but it’s handy to understand what you are actually doing rather than activate multiple plugins that can often cause conflicts and resource issues.