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?
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:
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:
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.
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.
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 gives the browser certain instructions such as how long the content is considered “fresh”, public/private status of caching, validation and more.
Expires header provides an HTTP date only until when the resource should and can be cached till.
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
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!