How To Leverage Browser Caching in WordPress for Speed

How long do you wait for a web page to load? 1 second? 3 seconds? Longer?

According to Google “The probability of bounce increases 32% as page load time goes from 1 second to 3 seconds.” 

The faster your web pages load, the more you engage visitors. It’s as simple as that.

We need to use every trick in the book to speed up load times, including leveraging browser caching.

As a company obsessed with delivering the fastest WordPress theme possible, we know a thing or two about performance. 

While browser caching delivers marginal gains, every little really does help.

So read on to learn everything you need to know about how to leverage browser caching and why.

What is Browser Caching – and Why Do We Need It?

The whole idea behind caching is to “save” an up-to-date version of your website for visitors to access it more quickly.

Here’s a rough idea of how this works: If you’re an artist, caching is like the difference between having a photograph of your drawing at the ready, versus having to redraw the image every time your friend asks to see it. In effect, the photograph “remembers” what’s already been shared, saving it for future display.

In more technical terms, the following is a quick breakdown of what happens behind the scenes when a user accesses your domain in their web browser:

1. The visitor enters your URL.
2. Their browser sends a request to your server.
3. Your website server packages up all the data and sends it to the user’s browser.
4. The browser displays the website page.

Pretty simple, right?

But modern websites are multi-faceted and complicated things, with everything from text and images to scripts and style sheets running all at once. And if you’re like millions of website owners relying on WordPress, all of this is wrapped up in a layer of PHP code with lots of additional processes running.

That’s why a WordPress website without browser caching can take a long time to load. Step 3 above can be time consuming when the site has to send data for every element and script on a page. The reason most web pages online load faster on subsequent visits is because of caching, where different elements of your website have been saved locally for a user, sparing the site from having to serve every element from scratch each time.

To avoid an unwanted slowdown for users and excessive strain on your web server, let’s quickly walk through browser caching in WordPress, what the leverage browser caching error is, and how to fix it.

How to Leverage Browser Caching

If you run a website, you should be aware that server caching refers to the process where your website generates cached web pages for your website. This is server-side – the browser caching is what happens when users access your website in their web browser.

This is the other side of the same coin. When you leverage browser caching, you’re providing instructions for your server on how long the resources should be cached in the browsers of your visitors.

Typically, in order to leverage browser caching, you need to define HTTP headers to set proper expiry times for different file types on your website. How you do this will depend on whether your web server runs on Nginx or Apache, and whether you want to enter the code yourself or use a WordPress plugin.

Below, we’ll cover some of the common ways to configure your browser caching.

Fixing the Leverage Browser Caching Error

Whether you’re setting it up for the first time or you already have it enabled, browser caching needs to be optimized to work properly. When you test your site’s performance, you’ll usually be given a leverage browser caching warning if you don’t have any caching rules established, or if the expiry times are too low.

As a general rule, you should have any static resources expire in 1 year, while dynamic elements should usually be one week or possibly shorter. Cached elements are saved locally for a user in their web browser, but they aren’t saved forever — after a specified expiry time, these different elements have to be reloaded by a user from your site’s server. Truly static content includes things like logos or global CSS styles, but virtually everything else is dynamic and should be updated more frequently.

If you’ve ever run your WordPress site through Google’s PageSpeed Insights, or popular website testing tools like Pingdom and GTMetrix, then you may have come across the leverage browser caching warning by now.

It looks like this in Google’s PageSpeed tool:

The best way to fix it will depend on your unique website and host, but we’ll walk through some different ways to help you leverage browser caching.

Using Plugins to Leverage Browser Caching

If you’re running a WordPress website, you may be able to skip the more involved coding steps outlined later in this post and just use some quality WordPress plugins to leverage browser caching.

W3 Total Cache

One of the best plugins for efficient browser caching is W3 Total Cache. This is a free plugin that helps improve SEO and user experience for your site by reducing load times. It’s a complete caching framework, which means you can handle pretty much every aspect of caching from a single place!

So, are you ready to use W3 Total Cache to leverage browser caching? Here’s how it’s done!

Step 1: Enable Browser Caching

After installing and activating W3 Total Cache (W3TC), you can start to tweak the settings to leverage browser caching.

First, go to General Settings under the Performance tab in your WordPress dashboard sidebar. This is where you’ll be able to adjust the settings.

Scroll down to the Browser Cache and make sure that the browser cache Enable box is checked.

Step 2: Specify Global Browser Cache Policy

After you’ve enabled browser caching, click Browser Cache in the plugin options to go to that page. There, you’ll find a list of settings for global browser cache policy that you can customize.

The check boxes include several options for how to leverage browser caching on your website. It’s a good idea to check all of the top boxes.

• Set expires header – The expires header is an expiration time of an entity of the web, whether an HTML document, CSS file, image, etc. The length specified in this header will control how long the cache of the entity is valid.
• Set cache control header – The cache control header is an additional header to encourage browser caching.
• Set entity tag (eTag) – The eTag is a validation tag that makes browser caching more efficient.
• Set W3 Total Cache Header – This is a header set by W3TC to assist in identifying optimized files.
• Enable HTTP (gzip) compression – Gzip compression will reduce the download time for text-based files.

With these global settings for browser caching enabled, you’re now able to manually adjust the appropriate headers for your site.

Step 3: Specify Cache Headers

As you’ll see in the Apache and Nginx sections of this post, a significant step in leveraging browser caching is specifying the cache headers. Specifically, you need to tell users’ browsers how long to hold onto cached elements before they expire using specialized commands.

You can make adjustments to the header lifetime for the following file types:

• CSS & JS files
• HTML & XML files
• Media & Other files

They’re measured in seconds. As an example, for CSS & JS files, you’ll want to shoot for the equivalent of two weeks, or 604800 seconds.

Ultimately, the amount of time different elements are cached is up to you. It comes down to testing to see what works best.

You may want to use W3 Total Cache’s built-in preview mode to test changes before you actually deploy them, which you can find under General Settings.

Leverage Browser Caching

Yes, there’s a WordPress plugin for browser caching that’s literally called “Leverage Browser Caching.” It’s an open source tool that you can download here.

Why go with this plugin instead? Well, if you’re not interested in installing a full caching plugin like W3 Total Cache, the Leverage Browser Caching plugin is an option that focuses on this one specific activity. If all you’re looking for is a way to fix the leverage browser caching error, this may be all you need.

It’s also very simple: when you activate it, it starts working immediately, and you can deactivate it to stop it as well.

The way it works is to directly add the browser caching code inside your Apache server’s .htaccess file (see below to learn how to do this manually).

Code (Apache) for Leveraging Browser Caching

If you’d rather get your hands dirty, you can bypass WordPress caching plugins completely and just enter some code yourself.

Web servers generally run on either Apache or Nginx. How can you tell which one yours is using?

Well, many shared hosting providers rely on Apache – if your site has an .htaccess file, then you know you’ll need to follow Apache code instructions. Here’s how to leverage browser caching for your Apache server with custom code.

Once you’ve verified that you have a server running on Apache, log into your cPanel or use an FTP application to gain access to your server.

Now, locate your .htaccess file. This may require you to show hidden files (dotfiles), as the .htaccess may be hidden by default.

Your .htaccess file should look something like the image below. Keep in mind that you can usually edit it directly on the server, or you can download it and open it in a simple text editor.

Now, keep in mind that you have a few options for defining browser caching rules: Cache-Control headers or Expire headers.

Technically, you can have both at the same time, but you don’t have to. If you’re unsure which to go with, Cache-Control is newer and generally recommended – but some speed test tools like GTmetrix may still check for Expires headers.

Here’s how to set both types of Apache headers.

Apache “Cache-Control” headers

Once you’ve opened your .htaccess file, you’ll need to add the following snippet of code to the top of your .htaccess file:

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=2592000, public"
</filesMatch>

Apache “Expires” headers

Like with the Cache-Control header, you can add these Expire headers to the top of your .htaccess file. Here’s the code format to use:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access 1 year"
    ExpiresByType image/jpeg "access 1 year"
    ExpiresByType image/gif "access 1 year"
    ExpiresByType image/png "access 1 year"
    ExpiresByType text/css "access 1 month"
    ExpiresByType text/html "access 1 month"
    ExpiresByType application/pdf "access 1 month"
    ExpiresByType text/x-javascript "access 1 month"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType image/x-icon "access 1 year"
    ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

As soon as you’ve set these headers on your server, you can easily check them from Chrome’s DevTools. Simply navigate to the network tab, click on an asset, and check for the header type you added: Cache-Control, Expires, or both.

If they’re there, your work is done!

Code (Nginx) for Leveraging Browser Caching

Nginx (pronounced “Engine-x”) is an open source web server powering more than 400 million websites.

Like with Apache, you have a few options for setting caching expiry times on your website’s static and dynamic elements.

Nginx “Cache-Control” headers

Add the following snippet to the inside of your server block, which is usually located at /etc/nginx/site-enabled/default.

location ~* \.(png|jpg|jpeg|gif)$ {
    expires 365d;
    add_header Cache-Control "public, no-transform";
}

location ~* \.(js|css|pdf|html|swf)$ {
    expires 30d;
    add_header Cache-Control "public, no-transform";
}

Nginx “Expires” headers

Add the following snippet to the inside of your server block, which is usually located at /etc/nginx/site-enabled/default.

location ~* \.(jpg|jpeg|gif|png)$ {
    expires 365d;
}

location ~* \.(pdf|css|html|js|swf)$ {
    expires 30d;
}

Google Analytics Leverage Browser Caching Warning

Some users may find that even with the proper caching headers defined on their origin server, they may still encounter a leverage browser caching warning in Google Analytics.

This is a separate issue from what you’ve already dealt with. The good news is, you’ve done the most important work for your site already. Most of the speed improvements from caching should be there now.

However, an error may still occur because of Google’s own analytics.js script, hosted on Google’s servers. It’s ironic, but basically, Google Analytics uses its own JavaScript file to communicate with your website – and this could trigger the same caching error if it isn’t installed locally.

You can optimize your site’s usage of Google Analytics with a free plugin called Complete Analytics Optimization Suite (CAOS). The CAOS plugin is an automatic way to host Google Analytics locally and fully resolve any leverage browser caching errors you’re seeing.

Conclusion

Why is it so important to leverage browser caching?

Well, by putting rules in place for how browsers should cache your website, you can dramatically improve your site’s page speed. There are WordPress plugins or snippets of code you can easily use to define how long a browser should cache different elements on your site.

Once these rules are in effect, your website should automatically load faster for most users, especially on repeat visits. In order to test the effectiveness of your caching on page speed, you can always turn to a free tool like Google’s PageSpeed Insights, or a paid option like GTmetrix.

While page speed isn’t the be-all and end-all for ranking or user experience, it makes a huge difference – and the good news is, it doesn’t take long at all to properly enable leveraging browser caching for your WordPress website.

Do you have any questions about leveraging browser caching, the best caching plugins, or improving your site speed? Let us know in the comments below!