What is browser caching?

Browser caching is one of the easiest to implement website speed performance optimization tasks.  And while it may have little impact on the initial load time of your web page, it can make subsequent page views significantly faster.

How to fix leverage browser caching WordPress

When a visitor first reaches your website, all of the resources for your web page, apart from the HTML, are loaded.  These resources would include cascading stylesheets (CSS), JavaScript files, and images.

To find out if your website is set up with browser caching enabled, you can use the following tool.

Does your website have Browser Caching enabled?

Find out whether your site needs to enable browser caching, and if so, how much of an impact it can make on your PageSpeed score.

However, if the website is set up with browser caching enabled, the visitor’s web browser will store a copy of those resources in cache — a temporary holding space for files that are not likely to change for a specified period of time.   These stored files are referred to as “cache”, “browsing data”, or “temporary internet files” by different web browsers.

By telling the web browser to “hold on” and “re-use” these resource files, subsequent views of your web pages by the same visitor can be much faster, as the majority of resources will already be available on the visitor’s computer or device.

Setting up your website to inform the visitor’s web browser to use browser caching is fairly easy if you’re running an Apache web server (which is the typical setup for Linux hosting platforms).

If you do not already have a file named .htaccess within the root folder of your website, create one.

Once you have a .htaccess file, add the following code to it:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 14 days"
ExpiresByType text/css "access 7 days"
ExpiresByType text/html "access 2 days"
ExpiresByType image/png "access 1 month"
ExpiresByType image/gif "access 1 month"
ExpiresByType image/jpg "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType text/x-javascript "access 1 year"
ExpiresByType application/pdf "access 1 week"
ExpiresByType image/x-icon "access 2 months"
ExpiresByType application/x-shockwave-flash "access 7 months"
</IfModule>

You can change the cache duration in the above code for each of the file types if you feel that you want the visitors’ web browser to retain the resources for a longer period of time, however.

The code above is surrounded by a set of tags (<IfModule mod_expires.c> and </IfModule) which instruct the Apache web server to only attempt to set the included instructions if the “mod_expires” Apache module is installed.  Mod_expires, which allows for browser caching, is available by default in most Apache installations.

Ensure you’ve uploaded your .htaccess file up to the root folder of your website.

To check if your website has browser caching enabled, re-run the test at the top of the page.

 

Join Us For A 14 Day Free Trial Today

Offsite Resources

Now, you can instruct your web server to tell the visitor’s web browser to cache the resources served by your website.  However, if you reference external resources, such as third-party JavaScript or CSS that do not have browser caching enabled, then you’ll still end up with some PageSpeed penalty.  This penalty, as we have observed it, is usually about 1 point per external resource that does not have Browser Caching enabled.

So how do you resolve those third-party files that do not have browser caching enabled?  Well, many of them do not have caching enabled for a very good reason, such as the resource itself may be dynamically generated (rather than being a static file) that serves time-sensitive data.  You can see this in weather widgets and embedded maps.

But if you’re willing to try, you can try loading those resources in your web browser, saving a copy of them to your local PC.  Then, transfer those resources to your website, and then in your web pages, change the reference to those resources to those that you just saved into your website.

I will caution you that this may have undesirable effects as the vendor of the CSS or JavaScript may update it on a regular basis, and if you do not regularly update the resources that you store to your website, you may end up retaining (and serving to your visitors) a stale copy that may be outdated.

Automating Browser Caching

Browser caching, of local and offsite resources, is just one of the features that are automatically enabled in the Pegasaas Accelerator automated WordPress speed optimization plugin.

Stick around our blog & keep reading more on how to speed up web page loading time, how to improve website loading speed, and how to improve a website performance test.

Image Optimization for WordPress