How to Leverage Browser Caching on WordPress Blog

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.

Comments

    • 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.

    • 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>