How to Leverage Browser Caching in WordPress

Dec 27, 2015

If your website loads a little bit slow and you want to reduce the load time especially for repeated visitors, then you have to do a leverage browser caching. This is something that you can do in order to speed up your website and increase your PageSpeed Insights score.

Basically when you do the leverage browser caching you’re reducing the loading time of your website’s most used pages by storing them from your website to your visitor’s browser. This significantly reduces the loading time of the website’s pages for repeated visitors and it’s perfect if you have a website with users that regularly re-visit the same pages.

What Leverage Browser Caching means?

You probably already know that when your browser loads some website it must download all files like HTML, JavaScript and CSS files to display the website’s page properly. For most simple websites, usually the loading of these files isn’t that bad because they usually don’t contain tons of files, but for some more complicated websites that contains lots of animations and images the loading time can be quite long. And if the internet connection is slow, then the loading is even worse.

To avoid this issue, you need to leverage browser caching. What this does is it stores some of your website’s files on the user’s browser. So when a user visits your website for the first time, it’ll load like usual. But when that same user visits your website for a second time, your website will load much faster because some of the files are already stored on your user’s browser.

How to Leverage Browser Caching in WordPress

Why you should leverage browser caching in WordPress?

There’s one simple answer to this: To speed up the loading time of your website, especially if you have repeated visitors. This also means better PageSpeed Insights score and happier users.

But one thing that you should keep in mind is that you need to set the time parameters properly, because if you’re doing changes to your website, your repeating users might not see them right away just because they have the old files still cached on their browsers. So make sure that you set the time parameters properly or clear the cache or disable your caching plugins if you’re doing major changes to your website.

Leverage browser caching in WordPress with .htaccess

To leverage browser caching using the .htaccess file is really simple, and your website doesn’t even has to be on WordPress. You can do this on any kind of website, from simple HTML website with few pages to website that uses another CMS.

To do this you need to do the following: If you’re using Apache server, log in into your CPanel and find your .htaccess file or access your .htaccess file through a FTP client software and open it with an editor of your choice. If you don’t have a .htaccess file, you need to create one in an editor. Add the following lines to your .htaccess file:

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"

And this is basically all you need to do. Just save your file and re-upload it to your website and you’re done. It can’t be easier.

Leverage browser caching in WordPress with plugin

If for some reason you can’t access your .htaccess file or you just want to use a plugin to leverage browser caching for your WordPress website thre are couple of plugins available. One of them is W3 Total Cache that we mentioned in our Why and How to Enable Gzip Compression in WordPress article. If you already have the W3 Total Cache plugin installed all you have to do is:

  1. On the bottom of your admin menu in WP you’ll see a tab called Performance.
  2. Go to Performance > Browser Cache
  3. It’s recommended that you check Set W3 Total Cache Header, Set expires header, Set cache control header, Set entity tag (eTag) and Enable HTTP (gzip) compression, but it totally depends on you what you want to be cached and what not. So choose whatever works best for your website.
  4. And you’re done!

Two other plugins that you can use if you don’t want to use W3 Total Cache are Leverage Browser Caching Ninja and Page Speed Plugin. These two plugins, especially the Leverage Browser Caching Ninja don’t require some complicated setup, you just install, activate them, navigate through their menus, find the Leverage Browser Caching, check it and update them and you’re done. They are really easy to use and do the trick.

No comments

Leave a Reply

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