The Ultimate Guide to W3 Total Cache: All Your Questions Answered

Datetime:2016-08-23 01:26:42          Topic: PHP  JavaScript  CSS           Share

The Ultimate Guide to W3 Total Cache: All Your Questions Answered

Jon Penland

Most W3 Total Cache users have a love-hate relationship with the plugin. When it works the way it’s supposed to, it’s all love as page load time is reduced by leaps and bounds. However, when things go wrong, the plugin can be frustratingly (and notoriously) hard to deal with.

In this article we’ll look at the issues that crop up in the WordPress.org support forums on a regular basis. Whether you’re wrestling with minification and PHP versioning, struggling to get W3TC to detect Memcache, or dealing with marketing popups, this article is a prescription for dealing with W3TC headaches.

This is the third installment in our four-part Ultimate Guide to W3 Total Cache. If you want to catch up on all of the W3TC goodness we have on top, be sure to check out the other articles in this series:

  • Part 1: Introduction  – How caching can speed up WordPress and an overview of what W3TC does.
  • Part 2: How to Set it Up  – A detailed walk through W3TC’s 16 menus so you can set up W3TC like a pro.
  • Part 3: All Your Questions Answered  – How to fix the most common headaches and roadblocks encountered when setting up W3TC.
  • Part 4: Works-Every-Time Settings for Shared Web Hosting  – Run WordPress on a shared server? Here are set-them-and-forget-them settings you can use that will work 99.9% of the time and produce a measurable boost in website performance.

This article is 100% affiliate-free!

We will never take money to promote others, everything you read is genuine.Learn more.

W3TC Ailments Cured

What headaches are we going to resolve in this post? I’m glad you asked. Here are the challenges you’ll better-equipped to handle after reading this post:

  • How to Minify CSS and JavaScript Without Breaking Your Site
  • How to Know if W3 Total Cache is Working
  • Using W3 Total Cache with PHP 7
  • Getting W3 Total Cache to Recognize Memcache
  • How to Keep Certain Pages from Being Cached
  • Get Rid of the Marketing Popup
  • How to Completely Uninstall W3TC

Ready? Let’s get right to it.

Issues #1: How to Minify CSS and JavaScript Without Breaking Your Site

Note:Hummingbird can be used to combine and minify CSS and JavaScript files. If you use Hummingbird, make sure to leave the minify feature disabld in the W3 Total Cache General Settings menu.

Minifying CSS and JavaScript is usually the most challenging part of setting up W3 Total Cache. Many users report that enabling minification breaks the presentation of their site or doesn’t provide the sort of performance boost they’re hoping to see.

Why Does Minification Break Sites?

You have to pinpoint why your site is breaking when minification is enabled if you hope to fix the issue. While there are many potential reasons for this to happen, one of three issues is usually in play when minification breaks a site.

Common Issue #1: The order of JavaScript files is incorrect and files are loading before their dependencies.

This usually happens when files that contain jQuery load before jquery.js has loaded. The solution is to make sure JavaScript resources load in the proper order.

Common Issue #2: Content is displayed before critical CSS or JavaScript files have been downloaded and processed causing a flash of unstyled content.

Fix this issue by identify the CSS and JavaScript resources needed for the initial page load and making sure they load with the initial rendering — even if that means they remain in a render-blocking position.

Common Issue #3: Syntax errors occur when files are combined and minified.

If this happens, affected resources will fail to load. The solution is to identify the affected files and exclude them from the minification process.

In most cases, the solution to your minification woes can be found by addressing problems stemming from one or more of these root causes.

A Suggested Minification Workflow

Since every website is a little different there is no one-size-fits-all solution. You will have to study your website, identify the issue that is causing your site to break and work out a solution to fix that specific issue.

Having said that, the following workflow should help you minify and combine CSS and JavaScript resources with the greatest chance for success.

Step 1: Turn on Manual minification mode.

Go to Performance > General Settings , scroll down to the Minify section, and select the Manual minify mode and then click Save all settings .

Step 2: Add all JavaScript files to the file management area.

Go to Performance > Minify . Select the help button. In the dialog popup, scroll down and click on Check / Uncheck All under the JavaScript files to select all of the files, then click Apply & close .

Don’t add the CSS files at this point. It’s best to get JavaScript resources loading properly without the added influence of the CSS files.

Step 3: Reorder and move JavaScript files for maximum improvement without breaking site presentation.

This is an iterative process.

  • Start with all resources in the head, arrange the files until you get them in an order that works.
  • Then, start moving files between the head and body and loading them with a non-blocking method one a time.
  • After each change, save the changes, clear the caches, and view the results to make sure you’re on the right track.

You will want to put jquery.js at the top of the list and embed it in the head.

This will ensure that any files that contain jQuery scripting load after jQuery has loaded.

You will want to follow up jquery.js with any other jQuery libraries such as jquery-migrate.js and jquery-ui.js . Try to order any remaining files according to the order in which they affect the appearance of the website. Things like functions.js should generally go before files titled things like comment-reply.js since the first file is likely to contain scripts necessary for core features while the second won’t be needed until the comments section is reached.

Critical files, such as jQuery and files with names like functions.js will probably need to be embedded in the head. Files of secondary importance, such as those related to comments, can be embedded lower on the page in the body or after the closing body tag.

Just remember, as you rearrange files and change the embed location, save the changes and view your website frequently to make sure that your site is still rendering as you expect it to.

In a worst case scenario you may have to remove all JavaScript files and add them back one at a time using the help button, testing each file in different locations until you find a location and order where your site renders properly.

Step 4: Add all CSS files to the file management area.

Go back to the top and use the help button to select and add all CSS file.

Step 5: Arrange CSS files in order of importance.

Your theme’s style.css file should be listed first.

If your site does not render properly will all CSS files added and minified, you may have to remove all of the files and add them back one at a time using the help button. Test the site after each file is added until you identify the file that breaks your site’s presentation. Once you identify the culprit file, delete it from the file management area and don’t add it back.

By following this workflow you should be able to add all (or nearly all) CSS and JavaScript files to the file management area, minify them, and have your site render properly. The result should be a reduction in the number of files that have to download to render your site and a noteworthy improvement in page load speed.

Issue #2: How to Know if W3 Total Cache is Working

One question that is frequently posed by new users of W3 Total Cache is this: “How do I know the plugin is working?” Thankfully, all you have to do is turn on debugging and you’ll be able to see which W3TC modules are in effect.

To turn on debugging go to Performance > General Settings and click on Debug from the list of links near the top of the General Settings menu.

In the Debug section there are six checkboxes. However, you will only be able to select the checkboxes for the modules you have enabled in the other sections of the General Settings menu. For example, in the image below, only the Page Cache and Minify debug modes can be enabled because those are the only modules activated on this particular W3TC installation.

Enable all of the available checkboxes, select Save all settings , and clear the cache(s) if prompted to do so. Then, load the front end of your site and view the page source (in Chrome, right-click to open the context menu and select View page source .) Scroll to the very bottom of the page source code and you will see debugging information for every activated module.

Now you know that W3TC is working.

1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!

Issue #3: Using W3 Total Cache with PHP 7

Note: This next section applies to using W3TC version 0.9.4.1 with PHP 7. If you’re using a newer version of W3TC make sure the issue exists before attempting to fix it.

Some users have reported issues when using W3TC on a server that is running certain versions of PHP 7. In some cases, you might see an error notice that looks like this:

Warning: Parameter 1 to W3_Plugin_TotalCache::ob_callback() expected to be a reference, value given in WP_PATH/wp-includes/functions.php on line 3297

In other cases, you may not see an error message, but W3TC may just stop caching anything and saving any changes you make the plugin settings. When you view the page source with debug mode enabled, you may find that no debugging information is added.

You have two options if you encounter this issue:

  1. Revert to PHP 5.6, or
  2. Make a few manual changes to the plugin code.

The process of reverting back to PHP 5.6 varies from one server and host to the next. If you don’t know how to do it, get in touch with your hosting provider for help.

If you would rather keep using PHP 7 and W3TC, you can fix this problem by changing &$buffer to $buffer in several different plugin files. To identify all of the affected plugin files, follow the instructions provided in this tutorial from IT Nota .

It’s worth noting that if you do make changes to the plugin code, the next time W3TC is updated all of the changes will be deleted. As a result, it would be a good idea to keep an eye on the W3TC changelog or to download and browse the plugin source code to make sure the plugin update addresses this issue before upgrading.

PERFORMANCE

Super speed and performance with WP Hummingbird

Lightweight and fast, Hummingbird caches, minifies, combines, defers and compresses, making optimizations in line with Google PageSpeed, and turning your website into a lean, mean, speed machine.

FIND OUT MORE

Issue: #4: Getting W3 Total Cache to Recognize Memcache

Another thorny issue users report on a regular basis goes something like this:

I have a wordpress installation running with memcached installed but W3 Total Cache doesn’t seem to recognize it. The compatibility test reports the extension is not installed and memcached is not offered as an option in the various cache configurations.

I didn’t make that up. That quote is paraphrased from a question posted at WordPress Development Stack Exchange , and the same question has been posed various times in the WordPress.org support forums .

In every case, the solution was the same: install the PECL memcache PHP module . What has happened in each case is that the user had installed the memcached server, but not the memcache PHP module needed by W3TC.

In short, you will need to install both the memcached caching system and the PECL memcache PHP module ( not the PECL memcahe d PHP module ) for the memcached method to be detected and available within W3TC.

If you need help installing either or both of these components navigate to Performance > Install . Scroll down until you see the instructions for Memcached (Daemon) Installation . Follow those first, and then follow the instructions for PECL Memcache Module Installation .

Issue #5: How to Keep Certain Pages from Being Cached

You may not want certain pages to be cached. Thankfully, W3TC makes preventing specific pages from being cached quite simple.

Go to Performance > Page Cache . Scroll down to the Advanced section and look for the field labeled Never cache the following pages . There will already be a couple of entries in this field. On a new line, add the URL for the page that you do not want cached omitting the domain name.

For example, to omit the page with the URL http://www.example.com/do-not-cache/ , just add do-not-cache* to this field.

Save the changes, clear the caches, make sure debug mode is enabled, and load the page that should now be excluded from caching. When you view the page source you should now see a note added to the bottom of the page letting you know that caching is disabled because Requested URI is rejected .

Now, whenever someone accesses that page they will be shown a dynamic version of the page and not a cached static copy.

Issue #6: Get Rid of the Marketing Popup

After W3TC has been installed on your site for 30 days a marketing dialog box will appear encouraging you to add a link to W3 EDGE to your site, tweet your support for W3TC, rate the plugin at WordPress.org, and sign up for the W3 EDGE newsletter.

If you click the “x” in the upper right corner the box will go away. However, it will keep coming back again, and again, and again, every time that you load a W3TC menu.

The key to making the dialog box go away, and stay gone, is to click the Cancel button appearing at the bottom of the box rather than the “x” appearing in the upper right-hand corner. A simple solution, but one that can drive you crazy if you don’t figure it out.

Also, if you’re using the free version of W3TC and feel it helps your site perform better then you really should do at least one of the things W3TC asks you to do. It’s only fair.

Issue #7: How to Completely Uninstall W3TC

If you want to uninstall W3TC it’s important to do it the right way. This is a complex plugin with tentacles that reaches deep into a WordPress installation. Uninstalling it incorrectly can cause additional headaches. If you do want to uninstall the plugin, here are the steps you should take:

  1. Go to Performance > Dashboard and select the buttons to empty all caches.
  2. Go to Performance > General Settings . Scroll through each section and make sure that each Enable checkbox is unchecked. Once you’re sure all of the boxes are unchecked, click Save all setting s anywhere that it appears in the menu.
  3. Go to Plugins > Installed Plugins . Locate W3 Total Cache , select Deactivate . Once it has been deactivated, select the Delete link below W3 Total Cache and then Yes, delete these files from the following screen.

In theory, at this point W3 Total Cache should be completely removed from your WordPress installation. However, in practice, some users have reported that additional manual cleanup is also necessary. Just to make sure you’ve completely removed all traces of the plugin, follow these additional steps.

  1. Access your sites files using an FTP client or the file manager provided by your host.
  2. Navigate to wp-content/plugins directory and look for the W3 Total Cache plugin folder. It shouldn’t be there. If it is there, delete it.
  3. Back up one level to the wp-content directory and delete the w3tc-config and cache directories. You may also see files named w3-total-cache-config.php or advanced-cache.php in this directory. If you see them, delete them as well.
  4. In the root of your WordPress installation locate wp-config.php and .htaccess . Open each and look for anything that was added by W3TC. Most notably, keep an eye out for code enabling W3TC Edge Mode in wp-config.php . You may not see anything, but if you do, delete the instructions being careful not to delete anything else inadvertantly.

Once you’ve completed those steps W3TC will be completely uninstalled from your WordPress website.

Wrapping Up

W3TC is a powerful and complex beast. It can do a lot of good for your site, but it can also be a bear to deal with due to its complexity.

Thankfully, due to the massive number of sites using W3TC, the internet is replete with tutorials and articles – such as this one – that can help you deal with W3TC headaches when you encounter them.

What issues have you faced when working with W3TC? Were you able to resolve them? If so, how did you fix them?POST the first comment




About List