How To Leverage Browser Cache In WordPress

A web browser like chrome stores the static files and cache them when you first visit a website. These stored files are generally static files such as images, javascript, and CSS files. We call it browser cache because it is stored in the browser memory, on your computer.

If you run a speed test of your WordPress blog you might find a recommendation saying:

“Leverage browser caching”.

It is a common suggestion given by many speed test tools.

The screenshot above is from GTmetrix. For the recommendation “leverage browser cache” it gave the blog 87 grades.

When you fix this issue, you’ll see an improvement in your page speed scores. Browser caching is essential to make your website load fast.

In this article, Let me show you how to leverage browser caching on your server in a couple of steps.

1. Using W3 Total Cache WordPress Plugin

If you are on WordPress, things would be simple as you only need to install a plugin called W3 Total Cache (W3TC). It is an advanced cache plugin and comes with the features we need.

Step 1: Enable Browser Cache Feature In W3TC Settings

Go to the W3TC general settings. There you’ll find the “Browser cache” Checkbox. Enable it to turn on general browser caching.

Step 2: Enable The Specific Cache Option

Once you enable the browser cache, the settings for the same will become active. Go to browser cache settings to enable specific cache functions.

Step 3: Save & Purge Cache

In order to make your settings work, you’ll have to save them. Click on save all settings button at the end of the setting. Then click on purge all cache to make your settings live on your site.

Test your site now and you shouldn’t the “leverage browser cache” warning anymore.

2. Using .htaccess File in Apache Server

⛔Warning Don’t edit your .htaccess file if you are unfamiliar with it. Ask your web host to do it for you. “.htaccess” is a sensitive file and it could break your site if you put some code incorrectly.

Apache server has a file named .htaccess. This file handles the server request and controls the directory folders and requests.

To enable browser cache and leverage it if you are on Apache server, copy and paste this code at the top or at the end:

## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
## EXPIRES CACHING ##

This code ensures your static files which include images CSS and javascript would be cached in browsers for a long. You will find your .htaccess file in your servers root folder. Look at the image above for reference.

3. Using Cache-Control Header In Nginx Server

Example Nginx config

If you host your blog on an Nginx server, you won’t find a .htaccess file on your server root. That’s because Nginx doesn’t use .htaccess to handle requests. You can read more about why there is no .htaccess in Nginx.

Copy and paste the code below in your server’s configuration location or server root block.

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

And then copy/paste this:

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

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

⛔Warning If you don’t know where to paste this code, ask your host. Confirm you are on the Nginx server and proceed only if you are sure how to locate and edit the config’s file on your server.

There’s Still One Easy Way Remaining…

By Using A CDN

This one way is the easiest way you can solve this caching error. A content delivery network (CDN) handles the cache and HTTP requests faster so your website performs faster no matter where it is accessed from.

By simply using a CDN, you can improve your website loading speed drastically. Moreover, it manages the best cache and browser requests functions automatically.

I recommend using KeyCDN. They are fast and cost-effective.

That’s all. You would also like to read about how to fix wp-admin redirect and refresh error. Read how to fix when the responsive mobile menu in WordPress is not working.

Let me know how much you improved using this guide.

Share on: