How to Leverage Browser Caching in WordPress (Step-by-Step)

Some of the steps in this tutorial involve going to the backend of your website, accessing important configuration files, and inserting code snippets.

Other steps involve installing new plugins and letting it add code snippets into your configuration files. All this is risky business. One mistake can bring your site crashing down. The backup copy will be your safety net for when disaster hits. So take a backup before proceeding with the next step.

1. Install and activate a caching plugin
2. Use configuration files to add code snippets manually

1. Install and activate a caching plugin 🔌

Using a caching plugin is the easiest way to leverage browser caching. All you need to do is install the plugin and set it up properly.

There are several caching plugins to choose from. Some of the most popular ones are WP Rocket, W3 Total Cache, WP Super Cache, WP Fastest Cache, and Comet Cache.

Most of these plugins have a free version that allows you to leverage browser caching.

We have guides on WP Super Cache and W3 Total Cache plugins. Be sure to check them out.

2. Use configuration files to add code snippets manually 🧑‍💻

To manually leverage browser caching, you need to carry out these two steps: determine your web server (Apache or Nginx), and add cache-control headers or expires headers.

Determine your web server

You can get on a quick chat with your hosting provider and ask them whether you are using Apache or Nginx, or figure it out yourself by taking the following steps.

• Open your website in a new tab, right-click anywhere on the page, and select the Inspect option
• On the Inspect panel, go to Network → All → Name
• Select any of the elements under Name and then go to the Header option
• Scroll down until you find the name of your server

Add cache-control headers or expires headers

“Cache-control headers” and “expires headers” are directives used to instruct browsers on how long to store and use cached content.

Both cache-control headers and expires headers serve the same purpose, so you don’t need to add both headers to your hosting server.

In this section, we have covered how to add both, but be sure to add just one on your server. Adding both headers is known to cause conflicts in a WordPress website.

Cache-control headers are more versatile and modern, offering fine-grained control over caching, while expires headers provide a basic way to specify cache expiration times. That said, you are free to add whichever header feels convenient to you.

Nginx server

Nginx users need to log into their hosting server, open their configuration file, and insert the following code snippet to add cache-control headers:

location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ 

 expires 7d;

 add_header Cache-Control "public, no-transform";

This sets the expiration period for the specified file types to seven days. You can change the number of days and add or remove file types from the code snippet.

In the same server block, copy-paste the following to add expires headers:

location ~* \.(jpg|jpeg|gif|png|svg)$ 

  expires 365d;



location ~* \.(pdf|css|html|js|swf)$ 

  expires 3d;

As you can see, this code snippet sets the expiry periods for different file types.

Feel free to customize the code to suit your needs.

💡 Note: If you don’t know how to access the Nginx configuration file, then look for a help doc from your hosting server or reach out to your hosting support team for assistance.

Apache server

Apache users have to log into their hosting account, access the .htaccess file, and add the following code snippet to add cache-control headers.

⌛ Important Be sure to add it before the “#BEGIN WordPress” or after the “#END WordPress” sentence.

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">

        Header set Cache-Control "max-age=172800, public"

</filesMatch>

The code sets the cache expiry period to 172800 seconds or two days.

To add expires headers to your Apache server, insert the following code snippet into the .htaccess file:

## EXPIRES HEADER 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 image/svg "access 1 year"

ExpiresByType text/css "access 1 month"

ExpiresByType application/pdf "access 1 month"

ExpiresByType application/javascript "access 1 month"

ExpiresByType application/x-javascript "access 1 month"

ExpiresByType application/x-shockwave-flash "access 1 month"

ExpiresByType image/x-icon "access 1 year"

ExpiresDefault "access 2 days"

</IfModule>

## EXPIRES HEADER CACHING ##

You can probably tell that the code specifies caching periods based on file types.

Feel free to modify both codes to whatever suits you.

That’s it, folks. That’s how you leverage browser caching on WordPress.

Are you still seeing the leverage browser cache warning?

If the site speed tool still shows you the leverage browser cache warning, then that is likely because of Google Analytics (GA).

You can check whether GA is the real culprit by running your website on Google’s PageSpeed Insight. Expand all the audit results and look for the Google Analytics scripts. If GA is the culprit, then the Page Insight Tool will suggest that you “leverage browser caching for the following cacheable resource.”

To leverage browser caching for GA, you need to use a 3rd part plugin called Complete Analytics Optimization Suite (CAOS).

But before to starting install the plugin on your WordPress website, please know that this method is not supported by Google and that the CAOS plugin is not compatible with many Google Analytics plugins.

Conclusion 🧐

For instance, you can take a look at our guides on how to improve WordPress performance and then how to increase WordPress speed on mobile specifically.

If you have any questions on WordPress leverage browser caching, let us know in the comment section below.