Learn How to Leverage Browser Caching in WordPress

Caching allows some of your content such as images, JavaScript and CSS to be stored locally within users’ browsers. This means they will not have to re-download the content when viewing the same resource twice. This can speed up your site as users will be able to see some of your site’s content much faster than they were previously

How to Leverage Browser Caching in WordPress

WordPress Browser Caching Matters

What is leverage browser caching?

Leverage Browser Caching refers to storing static files of a WordPress site in the visitor browser. And then retrieving them from the browser quickly instead of again from the server.

What is leverage browser caching
ExpiresActive On
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/xhtml-xml "access 1 month"
ExpiresByType application/javascript "access 1 month" 
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresDefault "access 1 month"

Fix Leverage Browser Caching Without Plugin

Steps to Fix Leverage Browser Caching via htaccess (without plugin)

  • Open .htaccess file (or config file) from WordPress Dashboard/cPanel of your website
  • Paste the code given above in the .htaccess file and Save changes
  • Now Test your site again with PageSpeed insights or GTMetrix

Hire a WordPress speed optimization expert

Fix Leverage Browser Caching With Plugin(no htaccess method)

It can be done just by adding a plugin like w3 total cache or WP Rocket and sometimes it requires some server changes. Another more simple option is to use cloudflare CDN free one will solve the browser cache issue and paid one will optimize the images as well.

W3 Total Cache or WP Rocket: Best Caching Plugin For WordPress?

The best is a server-level caching setup like LiteSpeed Cache or FastCGI for NGINX. These completely eliminate the need for running any PHP scripts of WordPress for serving cached pages. So they are more efficient. LiteSpeed Cache for WordPress works seamlessly with the LiteSpeed server so it is the easiest to deal with when compared to other solutions like FastCGI.

LiteSpeed Cache WordPress plugin

LiteSpeed Cache plugin is the most advanced but only if your server is using Litespeed otherwise Wp Rocket and Nginx helper for Nginx servers. I use to use W3 Total Cache over WP Rocket as I use to get faster websites they even tried to match my performance that W3TC was giving me. This was 3 years back. Today it’s the other way around. I have drop W3TC Pro and only use WP Rocket or Litespeed depending on server set up.

Fix Leverage Browser Caching with LSCache Plugin

After Installing the LiteSpeed cache plugin go to the cache setting option from

Fix Leverage Browser Caching with LiteSpeed Cache Plugin

This will add the above-mentioned code into the htaccess file of your root. The code will be added automatically and you don’t need to touch the htaccess file. You can choose a cache lifespan but leave it to default unless you have a very dynamic content-based website

Fix Leverage Browser Caching with WP Rocket Plugin

WP Rocket auto applies the browser caching upon activation. After activating WP Rocket you can test your site with PageSpeed Insight or GTMetrix or Pingdom Tools and you will notice the browser caching warning is gone. WP Rocket also separates the caching for mobile if you choose to do so.

FAQ on Leverage Browser Caching

Can I Use Hummingbird WordPress Plugin to fix Leverage Browser Caching?

I recently had plenty of issues with Hummingbird asset optimization as well and ended up removing it, had it for a year with no problems, and then that. WP Rocket is a really good one, I have it on most of my sites. I’ve done comparisons on the same site and it’s pretty even with WP Rocket metrics-wise. But WP Rocket perceived load times are insane. Even if performance metrics are even, UX ends up feeling faster on WP Rocket.

Should I set browser caching for one year?

Personally, I believe setting 1 year for browser cache is counter-productive for dynamic eCommerce sites. I’m doing updates, changes, etc every day on my site. So I can’t imagine what would happen if a user comes back after 10 months, browsing on my site while thousands of changes would have been made meanwhile, therefore harming the user experience. If you have a really good host, good site optimization, and cache preloader, you can reduce the browser cache to a few weeks at most.

Caching HTML pages for 1 year or even 1 hour is definitely a bad idea. But caching static files for 1 year is actually good. Most of the plugins/themes add version no. at the end of static files so that if there is a change, new files will be delivered. Similarly, most of the cache plugins generated hashed file names to automatically send updated files.