W3 Total Cache -Plugin: The Complete Settings Guide

Learn how to easily install W3 Total Cache -plugin on your self-hosted WordPress blog and how to configure its settings for maximum speed

The extended version of the W3 Total Cache guide is available as a free eBook:

how to install and configure w3 total cache ebook W3 Total Cache  Plugin: The Complete Settings Guide

Download the free W3 Total Cache Installation and Configuration Guide from MediaFire.

Introduction

Installing and configuring the W3 Total Cache -plugin for WordPress is part of a step-by-step process to optimize WordPress for speed that will make it easier to retain readers and keep the site speed on a level that Google appreciates as well.

The initial steps to speed up WordPress are laid out as the WordPress Speed Challenge here at my blog.

Why W3 Total Cache?

With this free guide, you can easily make your WordPress blogs pages load faster than before and save money on hosting bills as you can stay on shared hosting and still make your blog withstand huge amounts of traffic without compromising the performance.

Installing W3 Total Cache (W3TC for short) is just like installing any other plugin for WordPress (super simple via the Dashboard). The default options will make W3TC handle page caching, which it does similarly, and even a bit better, than the WP Super Cache.

But with proper configuration, W3TC does much more, like combining and minifying (compressing & making smaller) JavaScript and CSS-files, and also cache Database queries and make using Content Delivery Network easy (read: automatic). Because of all this, the W3 Total Cache is the best caching plugin for WordPress.

This guide is meant for WordPress blogs on shared hosting, who can't use more advanced caching solutions like Opcode caching and/or memcache, which are available on dedicated servers and virtual private servers. With this guide, you can handle loads of traffic with a blog on shared hosting, and you can stay on shared hosting until you can afford to pay for better (if you need it then).

For blogs that do need more powerful hosting solutions, Total Cache is even better. With the advanced options like Database Caching and automated use of Content Delivery Network, W3TC is the ultimate caching solution (the "Total" in the plugin name is there for a reason) and this is why huge blogs like Mashable use it.

How to Install and Configure W3 Total Cache for WordPress

The first step is to uninstall any other caching plugin you might be using, like WP Super Cache. We don't need (or even can't have) two caching plugins running, so you need to uninstall WP Super Cache before you move on.

Installing and configuring the W3 Total Cache is a simple step-by-step process... and actually since you don't necessarily need to take one of the steps and one you can skip altogether, it's really 3-7 steps, depending on how you count it :)

How to install W3 Total Cache

Here's the installation in short (as installing any WordPress -plugin):

  • (Uninstall WP Super Cache, or any other caching plugin you might have installed)
  • Install W3 Total Cache -plugin: Go to 'Plugins', Click 'Add New', Search for 'W3 Total Cache', click 'Install now' for W3TC, confirm the installation and activate the plugin.

w3 total cache installation 001 W3 Total Cache  Plugin: The Complete Settings Guide

How to Configure W3 Total Cache -plugin

W3TC - General Settings

  • Page Cache: Enabled ('Enable' checked), Disk (enhanced)
  • Minify: Enabled ('Enable' checked), Disk
  • Database Cache: Disabled ('Enable' unchecked)
  • Object Cache: Disabled ('Enable' unchecked)
  • Content Delivery Network: Disabled ('Enable' unchecked) (*
  • Browser Cache: Enabled ('Enable' checked)

*) For the best performance and speed, I recommend setting up a content delivery network (CDN) and configure it into W3TC settings. It's optional as it's not free, but it's well worth it in the end. Depending on your hosting setup, it can even save you money as it takes the load and bandwidth off your main server.

I personally use MaxCDN, and wrote a guide on how to set it up here: CDN with MaxCDN.

W3TC - Page Cache Settings

Page Cache Settings - General

  • Enable (checked) - Don't cache pages for logged in users
  • Enable (checked) - Cache home page
  • Enable (checked) - Cache feeds
  • Disable (unchecked) - Cache URIs with query string variables
  • Disable (unchecked) - Cache 404 (not found) pages

Page Cache Settings - Advanced

No need to touch these.

Page Cache Settings - Cache Preload

With Cache Preload, you can automatically "fill the cache", using a XML sitemap. This means serving pre-cached pages to all visitors, even if a page has not been visited recently. It's OK to leave this disabled, and keep it disabled if you run into performance problems when the preload activates, or lower the number of 'Pages per interval'.

  • Enable (checked) - Automatically prime the page cache
  • Update internal - 907
  • Pages per interval: 7 (increase/decrease as needed)
  • Sitemap URL: Your blogs sitemap.xml URL, e.g. http://example.com/sitemap.xml

W3TC - Minify Settings

This is where the magic happens, and also, this is the hardest part of W3 Total Cache configuration. If you're uncomfortable to look into HTML source and find CSS- and JS-files there, skip this section. You won't have minify, but Page Cache will work just fine. However, for performance optimization and site speed, this is essential.

Skip the General, HTML and JavaScript for now, and scroll to...

Minify Settings - Cascading Style Sheets

CSS Minify Settings:

  • Enable: Enable (checked)
  • Disable: Combine only (unchecked)
  • Enable: Comment Removal (checked)
  • Enable: Line break removal (checked)

w3 total cache configuration 007 minify settings CSS W3 Total Cache  Plugin: The Complete Settings Guide

If you run into problems with badly coded CSS, try disabling the Comment- and Line break removal. Well coded CSS will still work, bad ones might get into problems.

CSS file management

Theme: The active theme should be chosen, but you can set configurations to all installed themes here (even for non-active ones, in case you ever activate them).

  • Open another browser window or tab, and open your blog.
  • Open the page source (right-click, show page source).
  • Open Find (e.g. CTRL+F or from menu: Edit > Find)
  • Search for ".css" (without quotes)
  • Copy the full URL of the first .css-file you find, e.g. http://example.com/wp-content/themes/yourtheme/style.css (do not copy this URL, you must get it from YOUR BLOGS page source)
  • Go back to the window/tab with W3 Total Cache settings and the Minify Setting -page, click 'Add a style sheet' under Cascading Style Sheets...
  • Paste the .css -file URL in, unless the css-file is specific to certain page/template, choose 'All Templates'. Just in case, click 'Veriry URI' to see that the URL is correct
  • Go back to the page source, hit next on the find to locate the next css-file. Copy the URL to the W3 Total Cache, Verify.
  • Repeat until you've added all css-files from the page source to W3TC.

Notes: If there is "version number" like "?ver=2.4.1" in the CSS-files URL, remove it.

For example: /styles.css?ver=2.4.1 would go into W3TC as /styles.css - This way, W3TC will pick up the CSS, even if the plugin/theme updates and the CSS-version changes.

Note that you can change the order of the CSS-files by dragging them (hover your mouse over the file, and you'll see an "up-and-down" arrows), which might help if some CSS-files need to be before/after another. It's best to follow the same order of the files they were in the source code (taken that everything was working).

After you 'Save changes', W3TC might remove part of the URL, this is normal.

Minify Settings - Advanced

  • Update external files every: 216000 seconds
  • Garbage collection interval: 216000 seconds

For high traffic sites, lower the Garbage collection to 86400, or just leave it there by default.

Save Changes.

Minify Settings - JavaScript

TO AVOID PROBLEMS - DO NOT ADD AdSense, Chitika or such advertising code to W3TC!!

The process is similar to adding the CSS-files, but the problem is that many plugin- and theme-authors are not very good JavaScript coders, so they code can't handle minification.

  • Enabled: Enable (checked)
  • Disabled: Combine only after <head>
  • Disabled: Combine only after <body>
  • Disabled: Combine only before </body>
  • Enabled: Comment removal
  • Enabled: Line break removal

w3 total cache configuration 008 minify settings JavaScript W3 Total Cache  Plugin: The Complete Settings Guide

Go to your blogs page source, find ".js" files. Add them one by one to W3TC. Again, remove the "?ver=2.4.1" and similar version numbers if you see'em. For performance, it's better to Embed JavaScript to the bottom of the page = Embed before </body> and use the "Non-blocking" -option

Non-blocking can be used if the functionality of that script is not needed when loading the page, but only after the page is loaded. (In general, interface scripts can be non-blocking, and scripts that modify the content usually need to be "blocking")

If a script doesn't work correctly when embedded to the footer (before </body>), embed it to the same location you found it, e.g. Embed script located originally in the <head>, in <head> = Embed in <head>.

Also, you can change the order of the JavaScript files by dragging them, which might help if some scripts need to be in certain order. It's best to place the scripts in the same order they were in the source code (taken that everything was working).

If a script is only used/needed on certain pages, use the Template selector to choose the correct template from your theme, e.g. Page for page.php, Category for category.php, etc.

Disable 'Comment removal' and 'Line break removal', if you're having problems. And if everything else fails, remove JS-file from W3TC (and seriously consider getting rid of that poorly coded script!!)

Save changes.

Test your site functionality before enabling the HTML minify! If you're on Preview-mode, test your site after 'Deploy' and change configuration if needed.

Change the settings (e.g. Comment-/Line break removal, remove scripts from W3TC, etc.) if there's problems.

Did you have a lot of CSS- and JavaScript -files to go through? Maybe you're running a few unneeded plugins, widgets and external scripts? Do you really need them all? Remember - best performance optimization trick is to remove stuff.

Minify Settings - General

  • Enable: Rewrite URL structure (checked)
  • Enable: Automatically upload mofified files (checked)
  • Minify error notification: Enable this to get error notification if something goes wrong.

w3 total cache configuration 009 minify settings HTML W3 Total Cache  Plugin: The Complete Settings Guide

Minify Settings - HTML

Note: After enabling HTML, your page source will become somewhat difficul to read, so adjust CSS- and JS-settings before enabling this. And if you ever need to look into your blogs source, disable HTML minifying then.

Best Performance:

  • Enable: Enable (checked)
  • Disable: Don't minify feed (checked)
  • Enable: Inline CSS minification (checked)
  • Enable: Inline JS minification (checked)
  • Enable: Line break removal (checked)

Best compatibility with HALF-ASS coded themes:

  • Disable: Enable (unchecked)

Add stuff to ignore-field as needed (Advanced stuff)

Save changes.

Skip Database Cache-, Object Cache- and CDN settings, as those are probably disabled for now + the default options work OK, even if you do have opcode-/memcache running on your VPS or dedicated server.

W3TC - Browser Cache

The browser cache settings will change rules in your .htaccess-file if you have the Browser Cache enabled.

Advanced users probably want to tweak their .htaccess manually, but this is an excellent way for non-techies to get .htaccess-based browser cache set-up.

Go through the settings, and set'em like this...

Browser Cache - General / Default

  • Enable (checked): Set expires header
  • Enable (checked): Set cache control header
  • Disable (unchecked): Set entity tag (eTag)
  • Enable (checked): Set W3 Total Cache header
  • Enable (checked): Enable HTTP (gzip) compression
  • Disable (unchecked): Do not process 404 errors

Save changes.

Browser Cache - Cascading Style Sheets & JavaScript

(default = OK, no changes)

  • Enable (checked): Set expires header
  • Expires header lifetime: 31536000 seconds
  • Enable (checked): Set cache control header
  • Cache Control Policy: cache with validation
  • Disable (unchecked): Set entity tag (eTag)
  • Enable (checked): Set W3 Total Cache header
  • Enable (checked): Enable HTTP (gzip) compression

Browser Cache - HTML

(default = OK, no changes)

  • Enable (checked): Set expires header
  • Expires header lifetime: 3600 seconds
  • Enable (checked): Set cache control header
  • Cache Control Policy: cache with validation
  • Disable (unchecked): Set entity tag (eTag)
  • Enable (checked): Set W3 Total Cache header
  • Enable (checked): Enable HTTP (gzip) compression

Browser Cache - Media & Other Files

(default = OK, no changes)

  • Enable (checked): Set expires header
  • Expires header lifetime: 31536000 seconds
  • Enable (checked): Set cache control header
  • Cache Control Policy: cache with validation
  • Disable (unchecked): Set entity tag (eTag)
  • Enable (checked): Set W3 Total Cache header
  • Enable (checked): Enable HTTP (gzip) compression

Save changes.

You might change the Cache Control policies if you have issues with proxies, but other than that, the above config is solid.

You don't have to, but if you now go and check your root .htacces-file, you'll see that W3TC has added loads of rules there.

W3 Total Cache and Mobile Browsers: User Agent Groups -settings

This is where you'll do tweaks for different agents, e.g. mobile users, but you can skip these for now.

W3TC - Content Delivery Network settings

This is where you'll configure W3TC and the blog to use your CDN or (sub-)domain to server files in the Media Library, the Theme-files, minified-files, etc. W3TC does all this automatically.

In case you are interested in taking CDN in to use, WP Total Cache and MaxCDN make taking CDN into use very, very easy (read my WordPress CDN guide for the step-by-step instructions).

Preview Mode & Deploying the changes

After you've done all the settings, go back to the General Settings -page and hit 'Deploy'.

You'll see 'Preview settings succesfully deployed'

Hit 'Disable' to disable the preview mode and "go live"

Hit 'Empty Page Cache'

Hit 'Empty Minify Cache'

(as noted at the start, the 'Deselect this option to disable all caching functionality.' option seems to be broken, just ignore it, even if its unchecked by default)

If you want, check 'Combatibility Check' for some info. If you're on shared hosting, these are pretty much out-of-your-control, but will give some clue in case you have problems with W3 Total Cache.

It is normal that Opcode cache and Memcache extension are 'Not installed', unless you have a Virtual Private Server or dedicated server and have'em installed there.

But now you're done, you have succesfully installed and configured W3TC on your blog.

The Extended W3 Total Cache Guide

Installing and configuring W3 Total Cache is not overly complicated, but there are a lot of options in it (even that some are OK by default). I noticed that with all the step-by-step instructions, screenshots and additional tips, this guide started to bloat beyond a blog post - so I turned a detailed version of this post into a PDF and uploaded the eBook to my Scribd (embedded below).

UPDATE: Since then Scribd has changed their ways and made the download paid/difficult, but I uploaded the PDF to a free file sharing site, so you can download the W3 Total Cache Installation and Configuration Guide from Mediafire.

W3 Total Cache Installation and Configuration Guide

Don't be too scared about the 30+ 45+ pages, it's a simple step-by-step guide, but there are many options with the plugin and I wanted to include clear screenshots of the settings to make things easy for you.

Scribd has changed their ways and made download difficult and/or paid, thus the PDF is now uploaded to a free file sharing site. Download the W3 Total Cache Installation and Configuration Guide via MediaFire.

Updates and Versions

2010-07-12: 1.0 Post published.

2010-08-15: 1.02 Minor updates and corrections.

2010-10-30: 1.1 Total post re-work and update to the PDF guide.

2011-03-28: 1.2 Checked that everything is up-to-date. Updated CDN info. Uploaded a new version of the extended edition to Scribd.

2012-0912: Uploaded the PDF to MediaFire

Summary

Installing and configuring W3 Total Cache is a simple 7 5 step process, which you can take right now to speed up your WordPress blog:

  1. (Uninstall WP Super Cache, or any other caching plugin than W3TC, like WP Cache, WP Minify or such)
  2. (Place the essential rules to your WordPress htaccess)
  3. Install the W3 Total Cache -plugin
  4. (Optional: Check the General Settings, defaults OK, can be skipped)
  5. (Optional: Adjust the Page Cache Settings)
  6. Adjust the Minify Settings
  7. Adjust the Browser Cache Settigs
  8. (No need to touch the Database Cache or Object Cache -settings, the easiest step!)
  9. Advanced: Configure the CDN settings if you're using one (or skip!)

Download the W3 Total Cache Installation and Configuration Guide from MediaFire for detailed step-by-step instructions.

p.s. I've been told I should be selling my own products, and ask money for eBooks like this one, instead of putting it out there for free... I don't know about that, but if all goes as planned, there'll be plenty of opportunities for you to buy stuff from me at some point, but for now, you'll just have to get it all for free. Sorry.

p.p.s. If you like what I'm doing here, subscribe to this blog via RSS or email and connect with me on my Facebook -page.

Posted by

Topic: WordPress Optimization
Tags: , , , , , , ,

If you enjoyed this post, sign up for updates (it's free)


Feedback, questions and comments are also welcome on my Facebook page