WordPress Browser Caching

Speed up your WordPress website drastically with the use of leverage browser caching, also known as expires caching.

Many speed optimisation and test providers will refer to this as “Browser Cache“, “Leverage Browser Caching“, “Expires Headers“, “Cache Headers“, “Cache-Control” and “Web Cache“. As indicated by Google PageSpeed Insights, GTMetrix and MaxCDN follow this guide to set it up correctly.

What is Browser Caching?

Browser caching is the method of your web server telling the browser to store a page or specific resources for a certain period of time so that they don’t have to be downloaded from the server each time pages are loaded. This can cache an entire page and/or resources such as JavaScript, CSS, images (jpeg, png, gif, etc) and much more.

Your WordPress website will load normally for each user the first time but thereafter it will be noticeably faster as they browse through pages and perform actions. The resources are stored in the browser and as a result the are loaded locally instead of downloading again.

The Importance of Browser Caching

Ultimately, the purpose and importance of browser caching is to speed up your WordPress website for your users so that they have a more pleasant experience. This could lead to increased traffic, better search rankings and even improved conversion rates on what you are trying to achieve.

As an added bonus effect, the load is taken off your web server by not downloading resources on each page load for the same visitor and it saves bandwidth on your web server as well.

Web cache provides mutual speed to the server and the user

Implementing Browser Cache

Setting up leverage browser caching on your WordPress website is actually very quick and easy but the setup may differ based on your setup and web server which you are using. By default, the most common setup is WordPress running on an Apache web server but there are other, popular web servers available such as Nginx, IIS, etc.

Using a WordPress Leverage Browser Caching Plugin simplifies the implementation.

To make it even easier, there are several WordPress leverage browser caching plugins available. We have used, tested and recommend the WordPress Leverage Browser Caching Ninjas plugin. It is an install and activate plugin that does the rest for you, simple as that.

Apache Browser Cache

Apache uses a .htaccess file for browser caching. There should be a .htaccess file in the root of your WordPress installation and if there isn’t one, you can create one and put the following lines of code into it, at the very top:

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

(https://gist.github.com/tribulant/36be0f683eedfa468f51)

Nginx Leverage Browser Caching

If you are running an Nginx (En-gine-ex) server, the setup is different to Apache above. You’ll want to add the following code to your vhost configuration file, usually located at /etc/nginx/sites-enabled/default. Add the following to your server block:

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}

(https://gist.github.com/tribulant/19bb56a222af41854ecc)

Lighttpd

The mod_expire module is used by Lighttpd to control the headers that provide caching of content by the browser. This can go into the configuration of the core of Lighttpd accordingly.

$HTTP["url"] =~ "^/images/" {
expire.url = ( "" => "access plus 1 hours" )
}

(https://gist.github.com/tribulant/26263533eee33e3b61ed)

Microsoft IIS Leverage Browser Caching

Setting up browser caching for IIS (Internet Information Services) is very easy.

Select it in the Administration Tools interface, and bring up its properties. After selecting the HTTP Headers tab, you should see two interesting areas; Enable Content Expiration and Custom HTTP headers. The first should be self-explanatory, and the second can be used to apply Cache-Control headers.

Technicality of Browser Caching

Leverage browser caching is achieved by the web server by sending HTTP headers to the browser before the HTML is sent. They tell the browser certain things about the HTML content which is about to follow, such as the content type, current date, server details, cache control and expiration, etc.

The Cache-Control, Expires and Etag headers are the ones that give the browser cache instructions. These headers are automatically created by the methods mentioned above for leverage browser caching in Apache, Nginx and IIS accordingly so you do not need to go into the details unless you’re interested.

Cache-Control Header

Cache-Control gives the browser certain instructions such as how long the content is considered “fresh”, public/private status of caching, validation and more.

Cache-Control: max-age=3600, public

(https://gist.github.com/tribulant/6309926734d3c127064c)

Expires Header

The Expires header provides an HTTP date only until when the resource should and can be cached till.

Expires: Sat, 28 Nov 2015 05:36:25 GMT

(https://gist.github.com/tribulant/1b655d60a8a665b18b85)

Etag Header

Etag was introduced in HTTP 1.1 as a validation method with a token sent by the server and used by the browser to check if the representation of the content has changed. Up until Etag, browsers have mostly used the Last-Modified header but Etag is more relevant now. Most web servers will generate both Last-Modified and Etag headers anyways.

Etag: “pub1259380237;gz”

(https://gist.github.com/tribulant/2b542d76410bc047be00)

The Bottom Line of Browser Caching

Browser caching is mutually beneficial to both you (your web server) and your users by providing speed and performance to both parties.

With browser caching, be strong and aggressive, your web server is clever enough to know when resources have changed in order to generate updated headers for users to get new content as needed. Do not panic that your users will be stuck on old content, it is not the case.

Web browser caching is highly recommended for WordPress websites and ultimately, the recommended WordPress Leverage Browser Caching Ninjas plugin will do the trick. Just install, activate and you’re done!

Website & Email Hosting

Get the best website & email hosting for speed, security, and peace of mind. No restrictions. Freedom to do what you need in order to run your business.

Host Now
Comments
  1. […] First, let’s clear up any confusion between page caching and browser caching. […]

    Reply
  2. Gary Gordon on May 18, 2015

    Hi. Thanks for this great article.

    I was looking at two caching options you referenced in your article and wanted to know (if you could elaborate) why you choose to recommend the plugin “Leverage Browser Caching Ninjas” over “WP Fastest Cache”? They both seem simple to implement and from what I see on this page (https://wordpress.org/plugins/wp-fastest-cache/screenshots/) the WP Fastest Cache seems pretty awesome.

    I was just looking for any additional comments and thoughts that you can share on why you’re preference is Ninjas vs Fastest Cache?

    Thanks,
    Gary

    Reply
    • Antonie Potgieter on May 18, 2015

      Yes, WP Fastest Cache plugin also works, you can use that too. There are other plugins such as W3 Total Cache plugin that include leverage browser caching as well. So if your caching plugin includes it then you can use that, no problem.

      In this case, the reason why Leverage Browser Caching Ninjas plugin was recommended is because it serves this purpose specifically and nothing else. Since the article is about browser cache, that is the most simple solution.

      Reply

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Want More Content Like This?

Want More Content Like This?

Join our newsletter to get more content like this via email!

You'll receive a free, monthly email with a summary of very useful articles. No spam, just great content!

You have Successfully Subscribed!

Pin It on Pinterest