How to Easily Leverage Browser Caching on WordPress

If you ever did a site speed test on Google PageSpeed Tools, GTmetrix or Pingdom, then you must notice that line “Leverage browser caching of static assets” or ” Leverage browser caching for the following cacheable resources”. 

Google PageSpeed Test

 

What is Leverage Browser Caching?

Everytime a Browser loads a web page, it has to download the full web files to properly display the page. These files include HTML, CSS, JS and other scripts.
Some of them contain small files and some of them contain big files. For example, if your page size is big than usual, then it will take more time to properly display your page. That’s why here comes Leverage Browser Caching.

Leverage Browser Caching is a rule that specifies how long browsers should keep images, CSS and JS stored locally. If you change any of those, the server will tell the visitor’s browser to clear that cache.

By default, WordPress site doesn’t include Leverage Browser Caching function. So everytime a user visit a website/ web page, the browser has to download full web files to properly display web page content. This takes a lot of time to open the site using a slow internet connection.

Why should You Use it Right Now?

Browser Caching allows you to set an expiry date or a maximum age in the HTTP headers for static resources that tell the browser to load previously downloaded resources from local disk instead of downloading again from the website.

This significantly reduces the load on your web server and increases page load speed.

 

How to Leverage Browser Caching on WordPress?

To enable browser caching on your WordPress, you need to edit your .htaccess file. I recommend you to take a backup of your .htaccess file before you edit.

The .htaccess file is located in your WordPress directory. Either you can log in through FTP or from your cPanel to access to that file. When you find it, just add the following lines in .htaccess.

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

Now save and refresh the page. Don’t forget to clear cache from your web browser and web server if you are using any caching plugin.

Their first visit to your site will take the same time to load, but on his next revisit, he can access to your site very quickly.

How to Check Leverage Browser Caching?

This is mandatory to check Browser Caching if you added on your site. The best way to check Leverage Browser Caching is from GTmetrix.com. Type your URL and check whether it is working or not.

GTmatrix Browser Caching result

In that above picture, you can see Browser Caching is enabled on my site and scored 100 out of 100.

One more thing, there are others Browser Caching checking tools available which show different results than GTmetrix. Don’t worry. The above code is enough to enable Leverage Browser Caching and you don’t need to edit anything.

I hope, this tutorial helped to fix Leverage Browser Caching issue. If you have any question related to this, feel free to ask us in the comment section. Connect with us on  Facebook, Twitter, Google+.

Jyoti Prakash Ray
 

Jyoti Prakash Ray is the founder of WPMyWeb.com. He writes about Blogging, WordPress tutorials, Hosting, Affiliate marketing etc. He mostly spends times on blogging, reading books and cooking. You can find him on Twitter.