February 13, 2020

How to Leverage Browser Caching in WordPress?

‘Leverage Browser Caching’

If you’ve ever run your website through a page speed scanner, this suggestion is something you’ve already come across.

It is one of the most common suggestions to increase page speed and looks something like this:

Page Load Speed Test Diagnostics

Taking advantage of browser caching is one of the easiest ways to boost your page speed. It significantly reduces page load time for repeat visitors. Improving your site performance as well as customer satisfaction. 

This article details everything you need to know about browser caching. We start from the very basics so feel free to jump to any section.

What is Browser Caching?

Cache: A temporary storage area in your computer memory. It stores recently downloaded web files. This allows you to quickly load and access pages you’ve already visited.

Let’s consider Epitrove’s website as an example.

Epitrove Website Home Page

The first time you visit this website, your browser will download all the content off the web server to display it. This includes the logo, images, banners, everything. 

Now, you go to a couple of blog articles, check out a few reviews. But eventually, you navigate back to the home page. 

Surely it doesn’t make sense to download all that content again?

Even with high internet speed today, it’s quicker to fetch files from the computer memory. 

And so your browser stores this content temporarily in the browser cache and fetches it easily the next time you need it.

Browser stores content in Browser Cache and fetches it

This is also useful for individual elements that remain consistent across pages. Like your website logo.

Epitrove logo on all over the site and pages

So even when you load a new page, the logo is fetched from the browser cache. This not only loads your page faster but it also reduces the load on your server. 

Browser fetches logo from the browser cache

Why should you leverage Browser Caching?

As a website owner, browser caching can help you:

  • Load web pages faster
  • Effectively optimize the page for repeat visitors
  • Reduce the load on your server and bandwidth consumption
  • Improve SEO rankings

Leveraging browser caching essentially means storing your images, HTML, CSS in the user’s browser cache for a longer time period. So they can be fetched quickly and pages can load faster. 

With all our gadgets and apps vying for our attention, the average reader will click off from your site within the first few seconds. 

Therefore, it’s essential to optimize your website to have faster-loading pages. 

Page speed is also a prominent factor in search engine optimization.

Leveraging browser caching is one of the easiest ways to optimize your website. For the reader as well as search engines. 

How to leverage browser caching in WordPress?

There are various methods you can use to leverage browser caching. Here we’ll be discussing 3 different ways. Each offers various levels of control and ease. 

Method 1 – Using a Caching Plugin

Caching plugin: W3 Total Cache
Difficulty level: Beginner

Using a caching plugin is the easiest way to leverage browser caching. Especially if you are unsure about making edits to the htaccess files. Or not comfortable with editing code.

A plugin is also a convenient and hassle-free way to do it. 

The one we’ll be using is W3 Total Cache. It’s a popular caching plugin with a lot of caching and optimization features including browser caching.

Recommended for you: 7 Best WordPress Cache plugins

Enabling browser caching using this plugin is a simple 2 step process:

Step 1: Install and Activate the plugin 

Install W3 Total Cache

Step 2 – Go to Settings -> Enable Browser Caching

And that’s it!  

Enabling browser caching enables HTTP compression and adds headers. 

You can get more specific with the settings regarding which headers or tags get added. You can also purge the cache anytime using a convenient button. Anytime you make changes to your website you’ll need to clear the browser cache. This ensures that your user sees the latest version of your website. 

W3 total cache performance options browser cache

The downside to this, however, is that you don’t have any control. You cannot tweak the cache settings or the time period for which files are stored in the user’s browser. 

Method 2 – Editing htaccess file

Htaccess file: Short for Hypertext Acess. A configuration file that controls the directories. Used by Apache-based web servers
Difficulty level: Intermediate

This method requires edits to the code but is quite simple.

Having said that, do keep in mind that the htaccess file is important and could break functionality. An alternative option is to ask your hosting company to do it for you. If you’re looking for a good one SiteGround and Liquid Web are both great options.

You can access your htaccess file using FTP or your file manager. And add the lines of code given below. 

But before you do, let’s go over some of the terms in the code so you have a better understanding:

Mod_expires: Generates Expire and Cache-Control HTTP header to help create user-defined cache settings
ExpiresActive: When set to ‘on’ it enables expiration based on ExpiresByType and ExpiresDefault directives
ExpiresByType: Defines the type of content and the time period it should be cached for
ExpiresDefault: Defines the default cache time, can be overridden by ExpiresByType directive

More information can be found here.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 6 months”
ExpiresByType image/png “access 6 months”
ExpiresByType image/gif “access 1 year”
ExpiresByType text/css “access 3 months”
ExpiresByType text/javascript “access 2 weeks 3 days”
ExpiresByType text/css “access 2 months 5 hours 3 minutes”
ExpiresByType application/pdf “access 4 months”
ExpiresDefault “access 1 week”
</IfModule>

Note that this is an example code. You can tweak to include any other content elements. Here’s a list of mod_expires file types.

What we are essentially doing here is setting a time period for how long images, videos, HTML and CSS are saved in the browser cache of your visitor.

Ideally, we want this to be as long as possible. But there’s a downside to it.

The drawbacks of leveraging browser caching:

If you decide to change your website elements, and an older version is stored in the user’s browser, he or she won’t be able to view the new elements. 

So, decide time periods for elements according to how frequently you’re going to be changing them. 

Things like your website logo, that you don’t change often can have the maximum time period. While things like images or videos need to have a shorter one.

Method 3 – Using Cache-Control Header

Cache-control: HTTP header used to specify caching policies
Difficulty level: Intermediate

If you’re a little more comfortable with coding, you can try using the Cache-Control header. It gives you a little more control over things. If you’re looking for advanced cache settings this will help you achieve that. 

Cache-control headers help you define how you want to implement caching on your website. Usually, it comprises of two parameters – the time period that the file should be cached and if it would be public. 

If adding it to your htaccess file, this is what it should look like.

Header set Cache-Control “max-age=31536000, public”

Max-age is defined in seconds, the above example enables the content to be cached for a year.

In fact, for a little more control we can also specify the type of files we want to cache using the FilesMatch Directive. Here we’re specifying it for all image formats:

<FilesMatch “.(jpg|jpeg|png|gif)$”>

Header set Cache-Control “max-age=31536000, public”

</FilesMatch>

Alternatively, you can also put them in different blocks and specify different ages for each.

<FilesMatch “.(jpg|png)$”>

Header set Cache-Control “max-age=86400, public”

</FilesMatch>

<FilesMatch “.(jpeg|gif)$”>

Header set Cache-Control “max-age=31536000, public”

</FilesMatch>

Over to you

Leveraging browser cache is one of the easiest methods to optimize your website. It improves everything from your page speed to your SEO. 

We hope this tutorial helps you take your website to the next level. If you have any questions or any more tips to add. Do let us know in the comments!

Disclosure: Some of the links in this blog post might be affiliate links. When you purchase through a link on our website, we receive a small commission, at no added cost to you, which helps us run Epitrove and keep producing great content. This does not influence our recommendations; we only recommend products we work with or love. Thank you for your support!

Lavanya Deshmukh
Lavanya Deshmukh

Computer Engineer, food enthusiast and die-hard Harry Potter fan that now writes content full time for Epitrove

Responses

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.