Googles PageSpeed Insights tool often reports that you should consider fixing levering browser caching . This is often one of the easiest options to increase your score on the insights tool. Below is an explanation of what Brower caching exactly is and how to leverage brower caching.

 

What is browser caching?

• Browser caching stores webpage resource files on a local computer when a user visits a webpage.
• “Leveraging” browser caching is when a webmaster has instructed browsers how their resources should be dealt with.

When a web browser displays your webpage it has to load several things like your logo, your CSS file, and other resources.

What browser caching does is “remember” the resources that the browser has already loaded. When a visitor goes to another page on your website your logo, CSS files, etc. do not need to be loaded again, because the browser has them “remembered” (saved). This is the reason that the first view of a web page takes longer than repeat visits.

When you leverage browser caching, your webpage files will get stored in the browser cache. Your pages will load much faster for repeat visitors and so will other pages that share those same resources.

If you have tested your webpage for speed and found out that you need to leverage browser caching, here is how you do it.

How to leverage browser caching

1. Change the request headers of your resources to use caching.
2. Optimize your caching strategy.

Change the request headers of your resources to use caching

For most people, the way to enable caching is to add some code to a file called .htaccess on your web host/server.

This means going to the file manager (or wherever you go to add or upload files) on your webhost.

The .htaccess file controls many important things for your site so be very careful when editing it as you can easily break your whole site. Make and keep a backup of your .htaccess file before making any changes.

Browser caching for .htaccess

The code below tells browsers what to cache and how long to “remember” it. It should be added to your .htaccess file.

Save the .htaccess file and then refresh your webpage.

How to set different caching times for different file types

You can see in the above code that there are time periods like “1 year” or “1 month”. These are associated with file types, as an example the above code states that a .jpg file (image) should be cached for a year.

If you want to change that and say you want your jpg images cached for a month you would simply replace “1 year” with “1 month”. The values above are pretty optimized for most webpages and blogs.

Alternate caching method for .htaccess

The above method is called “Expires” and it works for most people using .htaccess so it takes care of caching for most people who are just getting started.

After you are more comfortable with caching, you may want to try Cache-Control, another method of caching which gives us more options.

It is also possible the expires method did not work for your server, in that case you may want to try to use Cache-Control which is topic for a different post.

Common caching issue

If you list your html and images to be cached for one year or some other long time period, remember that this can mean if you make a change to your pages they may not be seen by all users. This is because the users will look to cached files rather than the live ones. If you have file that you tweak occasionally (example – a CSS file) you can overcome the cache issue by using URL fingerprinting.

URL fingerprinting

Getting a fresh (not cached) file resource is possible by having a unique name. An example would be if our css file was named “layout.css” we could name it “layout_1.css” instead. The next time we change it we can call it “layout_2.css”. This is useful for files that change occasionally.