HomeBlogUse W3 Total Cache to enable WordPress browser caching

Use W3 Total Cache to enable WordPress browser caching

Empty Browser Cache (W3 Total Cache)

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.


Skip to how to use W3 Total Cache if you are familiar with browser cache

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.

Example of Browser Cache

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.

Browser cache CrazyEgg

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.

WP Engine WordPress hosting

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.

Enable Browser Caching W3 Total Cache

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.

W3 total cache Browser Cache settings

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.

Set expires headers W3 total cache

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.

Page Cache W3 Total Cache

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 the Cache W3 total cache

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

This entry was posted in Blog, Conductor, Development, Plugins, WordPress

4 comments on “Use W3 Total Cache to enable WordPress browser caching

  1. 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.

    1. 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!

      1. 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!

  2. Thanks for the article! Just a quick note though, in the “expires header” section here, 3600 seconds is 1 hour not 1 day (which is 86400).

Leave a Reply

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