How to Leverage Browser Caching on WordPress Blog

Share This Article:

How to Leverage Browser Caching in WordPress using .htaccess file. It is always good to have a faster loading website, both search engines and visitors like it that way. Google also considers blog loading speed in generating results for a particular query.

Check Out: How to Optimize and Clean Up Your WordPress Database

So if you are a serious blogger and want to improve your blog loading speed, then the very first step you have to do is to follow this simple guide on Why and How to  “Leverage Browser Caching” in WordPress.

leverage-browser-cache-wordpress

Why Browser Caching

Here is some small info on “why browser caching”. Whenever you open a website using a browser, all the media files will be stored in a local folder and next time when you open the same website, all those files will be loaded from local, instead of making HTTP requests to the server.

Read This: How to add nofollow to all External Links in your Blog

Here by using this trick we are going to “increase the span of expiry period” of all those files. Consider this example and it will be clear for you:

Case 1:  PNG file will be cached by browser and set to expire after 1 day.

Case 2:  PNG file will be cached by browser and set to expire after 1 year.

Hope you understand how this “Browser Caching” works and lets move on.

How to Leverage Browser Caching in WordPress

You need to edit .htaccess file and have to add the below code to it. This .htaccess file is present in your blog WordPress installation folder. If you are unable to find it, you can add it by creating a new .htacess file using notepad or by contacting your hosting service support.

  • Login to your hosting account and navigate to WordPress installation folder.
  • Search for .htacess file and edit it.
  • Add the below code and update that file.
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

Functionality of this Code

This code instructs the browser to cache media files like images, java scripts, flash files, pdf files etc for certain span of time. In the above code, all image formats including jpg, png, gif etc will be cached and expire after 1 year. Similarly, media file types like pdf, flash etc  will be cached and expire after 1 month.

Recommended: Download or Update to WordPress 3.4 “Green” now

You can edit these values based on the requirement and can also add other media file types to this list manually. For further information on this check Apache mod_expires and how to make use of this code in other ways.

Hope you like this simple yet powerful tip and if you know any other tips to improve blog loading speed, please consider sharing with us, we are always glad to hear from you.

Genesis is the most flexible WordPress theme framework that comes with tons of options. We have been using Genesis on all of our blogs and recommending the same to you. Every bit of it is coded according to the standards. Give it a try!

Comments

  1. Does this really help @Bharat if it does then why your Leverage Browser Caching score grade is (F) according to gtmetrix ?

    • Ajay says:

      Yes, this really helps. Just check your Google page speed before and after putting this code to your .htaccess file and you will see the difference.

  2. Evryu says:

    I tried to use this but unfortunally nothing is changed :(

  3. Bro,
    In my root folder there are 2 .htaccess files, in which file should I add the above code?

    • WPSquare says:

      There should be only one .htaccess file in the root folder. Compare both the files and delete the one which you feel is not perfect. Now, add the code to the existing .htaccess file and save it.

  4. do you put this code on the very beginning or it doesnt matter??

Speak Your MindComments Policy →

*

Looking for More Awesomeness?