Heard of the 80/20 rule? This rule states that you get 80% of your business from 20% of your customer base.
They are your stalwart companions // your diehard fans // your most precious resource.
The problem is, when these folks visit your WordPress website, it takes a while to load your page.
With browser caching in place, you are given the opportunity to provide a faster, smoother experience for your customer as they revisit your site. Find out how easy it is to use W3 Total Cache to enable WordPress browser caching.
We are going to start the article with a top level view of browser cache, a major element of speeding up websites.
If you have ever run a website speed test for your WordPress site, you may have noticed that a major recommendation to improve page load speed and SEO is to enable browser caching.
While we have talk about specifically caching photos — a larger chunk of what makes website run slowly — we have never discussed the entire site.
Browser cache is a browser level process that optimizes the data that a server sends to a website. In short, a visitor’s browser will remember choice elements of the site upon the first load to reduce page load speed in future requests.
For example, if the logo and navigation bar load up the same on every page, this is an element that will no longer need to be reloaded on subsequent page visits. If someone visits the same page 100 times, there is no need to load the same content 100 times over.
The benefits of browser caching
It should make sense from the above, but the major benefit to browser caching is that it improves the load speed of most pages. This is good from a technical level (think Google and SEO) and also from a user experience perspective (Less time waiting to load a page).
It also reduces the number of requests that your server has to send, which helps to increase performance as well.
Image from a study by CrazyEgg.
In one particular study conducted by our friends at CrazyEgg, it was shown that enabling caching reduced page load time by almost 2 full seconds. On the web, that’s a very big deal! Two seconds can mean the difference between someone visiting your page and bouncing somewhere else.
Browser caching and page caching are best used on websites with static content that does not change very often. Once the content has been committed to memory, why load it again?
The negatives of browser caching
If not handled correctly, browser caching can be a problem for sites with consistently updated content. If your content is set to cache and you later change it, it is possible that a returning visitor might not see the updated content.
Picture a shop page with consistently updated content or a “specials” page with consistently changing coupons or promotions.
Any site with lots of changing content might want to watch out for heavy browser caching as it can display old content for viewers when not handled properly.
Use W3 Total Cache on WordPress
Before we start, here are two questions:
Do you already have browser caching? The first thing you need to do before you add W3 Total Cache to your site is determine if you actually need to add the plugin. There are plenty of WordPress hosts that include browser caching. An example of a web host like this would be WPEngine. Many people do not even realize this fact when they try to add caching.
If you are still not sure, you can also run a test of your website using a tool like GTMetrix to test the WordPress site and see if browser caching is enabled.
Is your server restrictive? Because browser cache can take place on the server level, there are specific server configurations that will not work with certain ways in which you can set up browser caching.
Most of time, this is not a problem, but if you are getting errors from the plugin upon installing it, then you might want to check with your host to see what you can do to fix this error.
Install W3 Total Cache
W3 Total Cache is a free caching plugin for WordPress, so you can find it from the WordPress repository or search for it within the Add New section of Plugins while logged in to your WordPress site.
Once installed, you will to navigate to their settings panel.
Changing W3 Total Cache Settings
1. Go to the General Settings section of W3 total cache and check the box to enable Browser Cache. Save your settings.
2. Go to the Browser Cache settings section of the W3 Total Cache page and modify your advanced settings. For the most part you can check most of these boxes, especially if your site is simple or has unchanging content.
3. Set your “expires header“ — Check the box in Browser Cache that enables Expires Headers, and then set the individual expires headers for each segment of the site.
Here, the defaults are generally good. HTML requests expire after a 1 day (3,600 seconds) and CSS and Javascript styles expire once a year (31,536,000 seconds).
You might want to adjust the media (images and video) as it defaults to one year. If you have a habit of updating your content, you may want to lower the amount of time between the requests expiring in the cache.
Enable Page Cache on W3 Total Cache
By enabling page cache, you can set rules for different categories and page types on your website. From the General Settings, check the box to enable Page Cache. Now go to the Page Cache settings.
From the Page Cache area, you can set up what pages are included in getting cached:
Front Page
Blog Page
Posts
Category pages
RSS feeds
404 Page
You can leave the other settings at their defaults for most WordPress sites. Page caching is an important and often requested feature and allows you to tweak the layout so that often updated content is not included.
Clear the cache — W3 Total Cache
Want to manually modify your cache after making content changes to your website? You can do this from the top bar of your website on any page or post and selecting “Empty the Cache”. This will clear the cache of all the content that you have.
“Empty caches” deletes cached content from the server and starts fresh.
Enable Browser Caching on your WordPress site
Grab W3 Total Cache from the repo and use these steps to set it up on your WordPress site. You should see a significant increase in page load speed, especially on pages with static content.
If you have any questions or recommendations on WordPress browser cache plugins, let us know in the comments below!
BONUS: MaxCDN integration!
Want to find out how to implement W3 Total Cache with MaxCDN (the most popular Content Delivery Network) by reading our other resource here! The content delivery network will allow you to speed up your site in a different way, on the server level.
We hope that you enjoy our content. If you decide to make a purchase after clicking on one of our affiliate links, we’ll earn a small commission at no extra cost to you. Thanks for reading! View our Affiliate Disclosure
3 thoughts on “Use W3 Total Cache to enable WordPress browser caching”
Shelly
Nice article. I do have a question: is there way to automatically clear the cache in W3 Total Cache? I find I have to clear the cache everyday, otherwise the pages on my site look like those old-fashioned HTML pages. That is, they don’t take the CSS styling I’ve set for them. Any ideas on how to automatically clear the cache or ways to improve my user experience? Thank you.
We normally empty the cache manually just to make sure all changes are made correctly. You might try tweaking some settings under “Page Cache” for preload and purge, but that will not help with the CSS changes you are requesting. Currently you have to schedule something with the Cron through custom code to solve this problem.
Thanks so much for your reply. Ok, I guess the cache clearing just has to be done manually. At least now, I know how to do the clearing with one click, rather than multiple clicks. I had a feeling the CSS problem wouldn’t be that easily solved; guess I will have to go back to the drawing board. Thanks anyway!
Nice article. I do have a question: is there way to automatically clear the cache in W3 Total Cache? I find I have to clear the cache everyday, otherwise the pages on my site look like those old-fashioned HTML pages. That is, they don’t take the CSS styling I’ve set for them. Any ideas on how to automatically clear the cache or ways to improve my user experience? Thank you.
Shelly,
We normally empty the cache manually just to make sure all changes are made correctly. You might try tweaking some settings under “Page Cache” for preload and purge, but that will not help with the CSS changes you are requesting. Currently you have to schedule something with the Cron through custom code to solve this problem.
We wish there was an easier solution too!
Thanks so much for your reply. Ok, I guess the cache clearing just has to be done manually. At least now, I know how to do the clearing with one click, rather than multiple clicks. I had a feeling the CSS problem wouldn’t be that easily solved; guess I will have to go back to the drawing board. Thanks anyway!