WordPress Browser Caching

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

Many speed optimization 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 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 ##

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;

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“ )

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.

Expires Header

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

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.

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!