Leverage Browser Caching with W3 Total Cache

About a month ago, I posted on a basic setup of W3 Total Cache, a WordPress plugin designed to decrease page load times to improve user experience and SEO. Based on the needs of visitors here, I thought I would go more in-depth into the browser caching feature of W3TC.

How To Leverage Browser Caching in W3TC

Enabling your WordPress site to leverage browser caching can be done in 5 steps.

Step 1. Enable Preview Mode

Before tweaking any settings within W3 Total Cache, make sure you enable preview mode. This setting will allow you to see how the website performs with the new settings before going live with them. Click the “Enable” button to deploy preview mode on your site. This can be found from the General setting tab.

W3TC Preview Mode

Step 2. Enable Browser Caching

You must enable Browser Caching within W3TC in order to leverage general browser caching. On the general settings of W3TC, scroll down and enable the Browser Cache.

Enable Browser Caching

Step 3. Specify Cache Headers

After you’ve enabled browser caching, click the “Browser Cache” section at the top of the plugin configuration, which will bring you to a page with general and specific settings for different configurations of cache headers. Below is a starting configuration and explanation of settings.

General Settings
These check boxes will toggle these settings for the next three sections down. It is recommended that you check the following 5 boxes (and what those boxes represent).

  • Set expires header – The expires header is an expiration time of an entity of the web, whether an HTML document, CSS file, image, etc. The length specified in this header will control how long the cache of the entity is valid.
  • Set cache control header – The cache control header is an additional header to encourage browser caching.
  • Set entity tag (eTag) – The eTag is a validation tag that makes browser caching more efficient.
  • Set W3 Total Cache Header – This is a header set by W3TC to assist in identifying optimized files.
  • Enable HTTP (gzip) compression – Gzip compression will reduce the download time for text-based files.

Browser cache global settings - W3 Total Cache

Now that you have your global settings enabled for browser caching, it’s time to get more in-depth and specific with different sections.

CSS & JS

If you checked all of the boxes correctly in the general settings above, there will only be one change you need to make in this section. Under the “set expires header” section, change the value in “Expires Header Lifetime” to 604800. This is the amount of seconds that a CSS or JS file will be until a new cache of that file is created. 604800 seconds is the equivalent of two weeks, the minimum recommend time for ideal page speed optimization. You can increase the value here if you wish, but just be sure to clear your cache if you make changes to these files, that way users can be served the most up-to-date version of your site.

HTML & XML

HTML and XML files change much more frequently. There should be no changes made here. Make sure you leave the “Expires Header Lifetime” set to 3600 seconds. This controls elements of an HTML page all the way down to text, so make sure this is short enough to reflect how often a page could be updated. 3600 seconds (1 hour) is standard practice.

Media & Other Files

Mimic the settings of the CSS and JS section as these files rarely change.

Step 4. Save and Preview Your Caching Settings

Save your settings and preview your changes by clicking preview at the top of the plugin settings. This will open up a new browser window or tab. From here, you can check the difference in browser caching and how it impacts page speed. I recommend the Google Page Speed plugin. Install the extension for your browser and run the page speed scripts on your page. There may be a few outside elements (CSS, JS) hosted on other sites that may be out of your control in relation to browser caching. Don’t panic, most of these come from plugins. The majority of the files that you want to cache are already hosted in your server. Check the difference in Page Speed Score by running the scripts on the preview of your cache as well as the version without.

Step 5. Deploy W3 Total Cache Settings

Once everything looks good with the W3TC preview, go back to the plugin settings and click deploy, which will migrate all settings toggled in preview mode over the live version.

Notes on Caching

With the correct implementation of W3 Total Cache, leveraging browser caching will improve the speed of your website, giving users a better experience as well as improving SEO. As a WordPress developer, testing settings and implementing them can be tedious. Always use preview mode when making any changes, as they can greatly affect the way your site performs and even looks. Once you have the process down, you’ll be able to enjoy page speed scores of 90 and above! Good luck!

Page Speed Score

25 Responses to Leverage Browser Caching with W3 Total Cache

  1. Kathleen Stimmel May 31, 2012 at 12:08 pm #

    Thanks Ian for the extensive explanation on this great plugin. After reading your instructions, I was able to set up W3 Total Cache in 5 minutes and increased my page screen score to 92.

    -Kathleen

    • Ian Rogers May 31, 2012 at 1:24 pm #

      You’re welcome! I’m glad the guide is easy to use to get W3TC set up. Browser caching will greatly improve your page speed score. I’m working on a few more posts for improving page speed.

  2. Ed Brown June 18, 2012 at 6:52 pm #

    Thanks for the clarification of the browser cache settings, it bumped my google page speed from 90 to 92!

  3. Chris August 2, 2012 at 3:27 pm #

    I set up w3 cache and tested my sites speed on pingdom and the result were great about 3 second load time, thanks Ian

  4. Raju August 9, 2012 at 12:43 am #

    Any reason for not checking “Set cache control header ” option?

    • Ian Rogers August 9, 2012 at 9:07 am #

      Hey Raju-

      Thanks for reading.

      I am actually due to update this post. Adding the cache control header will be beneficial to you to leverage browser caching. If you are using a CDN, it is definitely in your favor (post coming on this soon). It cannot hurt you to enable, just make sure you test it before you set it live.

  5. Andrew K Kirk August 31, 2012 at 2:50 pm #

    Ian,

    This post was extremely helpful. I’ve had W3 Total Cache installed from some time on my sites, but wasn’t fully utilizing it. Might be able to create whole series.

  6. Jenny December 10, 2012 at 6:51 am #

    I have filled out all the options as recommended above – and yet my score remains the same! Any help would be much appreciated!

  7. chris December 17, 2012 at 1:01 am #

    For this to work, does mod_expires need to be enabled in Apache?

  8. Jian March 5, 2013 at 6:10 pm #

    Thank you very much for you clear explanation! Now my website score has got 91 as your instruction.

  9. Steve March 30, 2013 at 4:18 am #

    Thanks…this saved me. Great info on W3…I was looking for this and you explained it perfect. Thanks again For the post!
    Steve

  10. LiveAnimals.tv July 9, 2013 at 5:05 pm #

    Great walk-through. Quick question, though: why aren’t the settings you mention defaults in the plugin? I just want to make sure I don’t mess with anything I shouldn’t!

    • Ian Rogers July 10, 2013 at 9:02 am #

      Google recommends the browser cache be set to at least 1 week. This guide shows you how to set it up for 1 week. The default values are more than that, so make sure that if you are setting the browser cache at longer than 1 week, it is consistent with the way you work and the frequency of updating those resources.

  11. KrisOlin August 29, 2013 at 9:47 pm #

    Jumped from 65 to 77! Thanks, Ian, you’re the best!

  12. andromint October 27, 2013 at 11:04 am #

    Thanks for the article. It helped to configure the cache setting.

  13. JimChmca November 6, 2013 at 8:37 am #

    How longer before we can see if these changes worked?

  14. Scott Simpson November 19, 2013 at 10:31 am #

    Once I applied these settings, I saw a huge improvement in desktop speed but the mobile version of my site went crazy. Is there a particular setting that could cause this, or is it something that has to be resolved another way, like through my theme?

    • Ian Rogers November 19, 2013 at 2:26 pm #

      It is possible that the theme could be the issue. If you provide more details or a link I’ll be happy to try and diagnose the issue…thanks for reading Scott!

  15. QLR November 30, 2013 at 6:51 pm #

    Thank you so very much! You just saved me a lot of aggravation and shot my site speed into the 90’s. Cheers!

  16. Daphne December 3, 2013 at 11:38 am #

    Hello! I’m not a techie but I installed W3 Total Cache. I was looking for the boxes/items on step #3 but when I click “Browser Cache”, it only directs me to #2. I don’t see the 5 items. :( Please help. If you click my Disqus photo it will direct you to my blog/show a link to my website (in case you need info). Thank you so much in advance!

  17. john paul January 6, 2014 at 5:48 am #

    Thank you improved my page speed

  18. Tropical Fish Site March 15, 2014 at 2:17 am #

    Perfect, just what I was looking for, thanks!

  19. David Payette June 9, 2014 at 1:36 pm #

    Hey, great article – really helpful. Just wanted to point out that in the article you said “604800 seconds is the equivalent of two weeks, the minimum recommend time for ideal page speed optimization.”, but 604800 seconds is actually only 1 week – I just counted and I think I’m right, although I may have lost count a couple times…

Leave a Reply