if you have ever run your WordPress website through GTMetrix or PageSpeed Insights then you have probably seen that big yellow Leverage Browser Caching warning. Today I am going dip into what this warning means, how it influences you, and what your options are as it pertains to your WordPress website.

What is the Leverage Browser Caching

Leverage Browser Caching means accumulate static files of a website in a visitor browser. Such as images, JavaScript, CSS or HTML. And then retrieving them from the browser quickly instead of again from the server.

At any moment a browser loads a webpage and download all the web files to properly display the page like the HTML, CSS, JavaScript, and images. A few pages might only consist of some files and be small in size or can be kilobytes. For another however there may be a lot of files, and these may add up to be a couple of megabytes huge. Like Facebook.com, for example, is 5 MB+.

Leverage Browser Caching Warning in WordPress

How to Leverage Browser Caching with Your Server

There are many ways to leverage browser caching on the webserver. The approach you choose will mainly depend on which web server you’re using (Nginx Or Apache). You may also attend your website speed test that certain assets show an “Expiration not specified” warning while others show an actual time value ( 5 minutes). Look like the following image.

How to Leverage Browser Caching with Your Server

In the example of raised, That means that your web server does not have any browser caching rules construe for .png files and the expiry time is only 5 minutes for .css files.

In the following sections, I would like to how to enable Expires and Cache-Control headers on the Apache Web server and Nginx Web servers.

Cache-Control Headers on Nginx

Add the following code snippet of your server block which 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";

Cache-Control Headers on Apache

Add the following code snippet in your .htaccess file.

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

Expires Headers on Nginx

Add the following code snippet of your server block which located at /etc/nginx/site-enabled/default

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

Expires Headers on Apache

Add the following code snippet in your .htaccess file.

## 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 ##

Once complete on your origin web server, you can check if everything is working as normal by opening up Browser Dev Tools or Chrome Dev Tools, operate to the Network tab and click on an asset. You shall now see either the Cache-Control, Expires, or both HTTP Response headers.

HTTP Response headers

I believe if you follow the provided suggestion then the Leverage Browser Caching Warning problem should be solved.

Fix Google Analytics Leverage Browser Caching Warning in WordPress

The most common leverage browser caching warning issue comes from Google’s own script e.g Google Analytics. The issue is that set a low 2 hour cache time see in the screenshot below.

leverage-browser-caching-pagespeed-insights-analytics

There is an excellent free plugin available on WordPress for Complete optimize GA(Google Analytics script) this plugin developed by Daan van den Bergh which grants you to host Google Analytics locally on your WordPress website. This plugin name is CAOS | Host Google Analytics Locally

The plugin available on the WordPress Plugin directory so you should download this plugin for your website. The plugin grants you to host your GA JavaScript file e.g analytics.js locally and keep it updated using WordPress wp_cron() function.

Further benefits to hosting your Google Analytics script locally are that you reduce your external HTTP requests to Google from 2 down to 1 and you now have full authority the caching of the file.

Host Google Analytics Locally

So, Just install the plugin and enter Google Analytics Tracking-ID and the plugin adds the needed Tracking Code for Google Analytics to the website header or footer.

If you would like to use a plugin to remove the WordPress Website Leverage Browser Caching Warning, then I would like to recommend this plugin for you. Leverage Browser Caching in WordPress, You would not need to set up this plugin, just need to instill and active.

I honestly believe, If you follow my suggestion, then your WordPress Website or WooCommerce website speed will be super fast.

If you believe you can’t speed up your website, then you can hire for this job. I can speed up a WordPress website or WooCommerce website. So, Please check the details of my services: Speed Up WordPress Website

Conclusion

I think your website Leverage Browser Caching Warning and Google Analytics Warning will be fix. Or if you have any questions, please feel free to comment. If your website slows yet, You can check my other article for the Speed up WordPress website.

Topics