If you check your website in page speed test tools such as Pingdom, Google Page insight’s Lighthouse or GTMETRIX you will probably get an error called Leverage Browser Caching or Add Expire Headers. Today we will deep dive into this warning Leverage Browser Caching and how it affects your wordpress website and how to fix this warning and speed up your website.
What is Leverage Browser Caching?
Leverage browser caching is a process where browser stores static resources locally through HTTP HEADER RESPONSE from the server. If you open any browser like Google Chrome, Mozila Firefox or any browser; clear history, cache and cookies now try to visit your website you will see it is loading slowly. Refresh your website it will load faster. Here is what will happen on the browser:
- The browser fetch all static resources like images, styles, scripts, etc. from the web server during first time loading of the site.
- When browser caching is enabled on the site for static resources then browser will follow the instruction from the server received through HTTP headers.
- Browser will store the static resources on local storage with the expiry date or the maximum age received from the server.
- If browser caching is not enabled on the site (expiry time is not set), then the browser will fetch the files every time it loads. This will increase the page load time as well as the load on the server.
- Expiry time should be specified for each file types like png, jpg, css. js, etc.
How to Fix Leverage Browser Caching Warning in WordPress?
I always recommend to do this by manually. For fixing manually it depends on servers. If you are using Nginx there is a method and if you are using Apache server there is another method. I will show you both of them.
Adding Cache-Control Header in Nginx
You can add Cache-Control headers in Nginx by adding the following lines to your server config’s server location or block.
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 30d;
add_header Cache-Control "public, no-transform";
}
Adding Expires Headers in Nginx
You can add Expires headers in Nginx by adding the following lines to your server block.
location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}
Adding Cache-Control Headers in Apache
Add Cache-Control headers in Apache by adding the following to your .htaccess file. Snippets of code can be added at the top or bottom of the file (before # BEGIN WordPress or after # END WordPress).
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>
Adding Expires Headers in Apache
## 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 ##
What About Other 3rd Party Scripts?
It is a little bit tricky to fix leverage browser caching for 3rd party scripts. Most of the people says it is impossible but I found a way by that method I made it workable.
First of all, you need to download the script that you’re running. I will be using Google Analytics as an example (this appears to be the most problematic script people complain about, but you can replicate this for any external scripts).
Look in your code and find the name of the script, in our case it is: google-analytics.com/ga.js. Pop this URL into your web browser and it will bring up the source code. Simply make a copy of it and save it as ga.js.
Save this newly created JavaScript file onto your webserver, in my case:
- JS
- ga.js
Next you will need to update the code on the pages that are calling your script and just change the directory that is calling the JavaScript file. Once again in our case, we will be changing this line:
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
to
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.yoursite.com/js/ga.js';
At this point, your site will now run the script from your website locally! However, this means the script will never update. Unless you re-run this short process every week. That is up to you.. but I’m far too lazy for that.
Summary
Now you must have some methods for fixing Leverage Browser Caching. After Leverage browser caching your page speed will decrease and this will solve a lot of problem in future of your website. If you looking more article about speed optimization check our blog.
