- 1 W3 Total Cache techniques for WordPress
- 2 How does a Web Cache work?
- 3 The goal of caching your site
- 4 W3 Total Cache
- 5 Installation
- 6 General Settings
- 7 Page Cache
- 8 Minify
- 9 Database Cache
- 10 Object Cache
- 11 Browser Cache
- 12 User Agent Groups
- 13 Referer Groups
- 14 CDN
- 15 Monitoring
- 16 Extensions
- 17 Summary and Conclusion
W3 Total Cache techniques for WordPress
What is a cache? In simple terms, a cache is a time-saving device. As business owners, web administrators, and bloggers we are well aware of the speed limitations of our websites. Reducing download times is a high priority for most of us but many people are not familiar with web cache software, which can significantly improve download speed on your site. We’ll examine the benefits of using of the most popular cache tool for WordPress, W3 Total Cache
Improving a site’s efficiency is often an overlooked practice. A good example of software ripe for some optimization work is WordPress. Out of the box, WordPress is an excellent tool for building a blog or business website but it’s rather inefficient unless tweaked a little. Caching for WordPress is a great way of squeezing a few more percentage points of speed from your site.
How does a Web Cache work?
Using caching properly can have the biggest positive effect on the response time of your site
Caching is used by computers, your ISP, your web server and your browser. It’s a very important technology used for two main purposes:
- To conserve bandwidth by reducing traffic.
- To reduce latency (delay in transferring data).
One question I hear is if caching is bad for sites that continually update data. The answer is it depends on what kind of web pages the site is delivering. Let’s look at an example. Reuters, the news site, no doubt uses caching for their homepage and you might wonder if the content you’re reading is out of date, because it’s somehow cached. What happens is that when you look at the Reuters front page for the first time the site’s server will deliver all the content including images, video, and text. If you request the page an hour later the caching software checks to see what has changed. If the images remain the same then the original images are displayed again, removing the need to download a second time. Perhaps the content has changed slightly with some updates news. This text is downloaded quickly, as text generally is, and the end-user experiencing a very fast and up to date Reuters front page.
A photographer site, with high-quality images that don’t change very often, would benefit greatly from the bandwidth saving features of caching. It would be a waste of resources to download the images, which will generally be of large file sizes for this type of site, every time the visitor looks at the page.
Your browser uses a cache also and this is like a mini store of web items that the browser keeps on your computer. It’s used in case you decide to return to a site soon after first visiting. (Chrome is notorious for causing developers all kinds of problems by not displaying immediate updates to a site. A developer, or indeed anyone that needs the freshest version of a web page always should use a ‘clear cache’ plugin to refresh the cache at the click of a button).
The goal of caching your site
There are many goals but the main one is better site performance which leads to a higher ranking on Google. I’d imagine that nearly every site on the internet would want that. Bear in mind that site speed is one of 200 different ranking factors so it’s pointless to ignore the other factors in favour of your site’s PageSpeed results but we should also consider the visitor experience. A faster site will create a better experience for your visitors, meaning better visitor interaction and conversion, which resulting in better ranking.
W3 Total Cache
Let’s have a look at one of the most used performance optimizer tools available for WordPress, W3 Total Cache.
With more than 1 million active installs of this plugin we can safely presume it does what it says on the tin: Increases server performance and a reduces download times.
W3 Total Cache does the job of storing data from previous requests to prevent re-downloading of the same data for further requests. It also compresses elements of your page before they are sent to the browser, reducing the overall page size and increasing the speed.
Before installing and configuring W3 Total Cache you should test your site using GTmetrix to see what the current performance report for your website indicates. If it scores an A on PageSpeed then the improvements will be incremental but we can still look at other improvements. The Page Load Time value is something that can be still reduced significantly if it’s above 5 seconds. Note: this value depends quite a bit on the WordPress theme and also on the hosting provider but I’ve successfully reduced Page Load Time from around 8 seconds to less than 2 seconds on sites that were in the high ‘B’ and low ‘A’ PageSpeed score index.
To begin make sure that you aren’t running any other caching software as this will cause conflicts.
Add the plugin as you would add any other plugin on WordPress. In the Admin backend, hover over the Plugins menu and click Add New. Search for W3 Total Cache, install and activate it. The plugin will add another menu option to the Admin sidebar called Performance. If you hover on this a second menu will pop up showing several different configuration options for this plugin. W3 Total Cache installs with the basic options available to the plugin so a little bit of configuration is necessary to get the most out of it, but don’t be overwhelmed by all of the options. For most needs, there are just a few key areas that we need to look at.
There are a couple of things to be aware of.
1. If you are using CloudFlare then certain standard recommendations will not be used.
2. Changes to the minify settings (for compacting the style sheets and scripts) can cause the formatting and features of your site to stop working. It’s good practise to check each individual change in the browser before moving on
In WordPress Admin go to Performance -> General Settings. This is the overall settings configuration area for the plugin. Enabling options here can make sweeping changes across the site so we’ll look at what initial changes we should implement here and then look at more in-depth and granular changes.
The option to Toggle all caching types on or off (at once) should be ignored as it’s too general and can cause your website to stop working properly.
On this same display area, there’s an Enable button for the Preview mode which lets you check what your changes might affect before saving these changes.
The next section in General Settings is the Page Cache. This should be enabled and start off with the Disk:Enhanced method.
If using CloudFlare or another CDN leave the Database Cache option disabled. Many web hosts will recommend against using this feature so it’s worth testing thoroughly. If you’re using a SiteGround account (The choice of many small businesses, bloggers, and hobbyists) then the plugin developers recommend using the ‘disk’ method with caution. This basically means that the Database Cache option is prone to issues with only certain hosts. Test and evaluate!
Test the Object Cache option with GTmetrix and record the results so you can compare before and after performance. You may see some improvement but there’s a chance that a degradation in performance occurs because of incompatibilities with the hosting or another plugin.
This should be enabled in most cases.
If you’re using CloudFlare then leave this option disabled. If you use MaxCDN or some other supported CDN then you can add it in here and configure it later with the CDN-specific tab on the Performance Plugin. I recommend either MaxCDN or KeyCDN as they both offer excellent value.
If you’re using the New Relic monitoring software then this setting can be configured here.
The Pro version of w3 Total Cache includes extra performance boosts for users of the StudioPress Genesis Theme Framework and enhanced CDN support. Leave disabled unless you’re using the Genesis Theme and want to spend the $99/year on this service.
If you would like to use the Google PageSpeed dashboard inside the plugin then you’ll need to get an API key from the developer’s console. I would leave this disabled for now and come back to it when you’ve configured everything.
Verify rewrite rules should be enabled.
Disable Enable file locking.
The Optimize disk enhanced page and minify caching for NFS option should be tested before applying permanently. Half of the experts and webmasters recommend using this option and the other half recommend against using it. Test both situations and decide.
The Debug section is useful for testing purposes and the Import/Export settings option is used for saving a good configuration or importing another one.
Now let’s look at the individual performance tabs that make up the W3 Total Cache plugin
Set these options as follows.
Cache front page – Enable
Cache feeds: site, categories, tags, comments – Disable
Cache SSL (https) requests – Enable if using SSL. You could also leave this enabled even if not using an SSL.
Cache URIs with query string variables – Disable
Cache 404 (not found) pages – Disable
Cache requests only for the mydomain.com site address – Enable
Don’t cache pages for logged in users – Enable
Don’t cache pages for following user roles – Enable
For the Cache Preload section, I’d recommend leaving Automatically prime the page cache enabled and make sure to add a site map to the Sitemap URL. This is quite an important part of the plugin. It’s sort of like an automatic cache system that will speed up the site for the first user to a page. The cache is set up after a specified interval and so automatically kicks off the process that would normally happen on the first request of a page by a visitor.
The Purge Policy:Page Cache settings are by default generally set to optimum for most sites. The default settings tell the Page Cache to purge if the front, post, and blog pages are changed. This makes sense as we’d want these pages refreshed after any changes. The other elements are not as important and can be left disabled.
In the Advanced settings, there is really only one setting to experiment with. Many people will argue against using the Compatibility Mode feature as it can reduce performance but it has several advantages. Your WordPress installation might work more efficiently with your hosting plan if this is enabled. I’d suggest testing enabling this and testing performance.
If you’re using CloudFlare then there’s no need to use the minify options as CloudFlare takes care of this with it’s Auto Minify options. Using both together could cause issues. If you’re not using CloudFlare then read on.
Rewrite URL structure – enabled
Disabled minify for logged in users – disabled
HTML & XML
To start off with tick all boxes in the HTML minify settings except for Line break removal. Test your site to see if any formatting issues arise and debug by deselecting the Inline CSS minification and Inline JS minification options in turn if you’re having problems.
I’d recommend enabling this setting but watching out for any issues.
The defaults for the rest of this section work fine in almost all cases.
This setting can cause similar problems to the JS setting above. Enable and test, that’s the golden rule here.
Select Enable and Line break removal.
The @import handling feature deals with the way CSS files are dealt with on web pages. @Import is used to import one CSS file into another. We can make this process smoother and faster by setting the @import handling to Process.
In this section, there’s not a whole lot to do unless you want to specify that certain CSS or JS files are not minified if using the auto-minify option
WordPress relies on a database to display the content you have created. Your posts, images, and pages are all stored in a database while the structure of the page is kept separate and can be upgraded, deleted, or changed without affecting the database entries. Database caching allows WordPress to serve up information without hitting the database by caching information that is regularly accessed. If something has changed in the backend then the plugin will figure this out and serve up the new information. If the information hasn’t changed then the cached version will be available to avoid extra bandwidth usage.
Make sure Don’t cache queries for logged in users is selected. Everything else can be left as default.
A word of warning for people on shared hosting, test this feature (enable and disable through the General Settings section) before finishing your review of the plugin, as it might cause unwanted issues with your site.
In the General section, I recommend selecting all options except for the last two.
The CSS & JS, HTML & XML, and Media & Other Files sections don’t require much configuration if the default settings are enabled. Leave the defaults but enable HTTP (gzip compression) on each.
User Agent Groups
This is an interesting option to examine at a later stage. Most people will not use this feature but if you wanted to redirect people coming from (referred by) Yahoo search engine to one display version of your site and people coming from Google to another you can set up the options here. Leave disabled for the purposes of this performance review.
A CDN is a Content Delivery Network which is a valuable asset for reducing the overall load on your servers. If you’re using CloudFlare for this purpose then leave this setting disabled. If you are using MaxCDN, KeyCDN, Amazon CloudFront or another service you can enter all the details here. A future post will explain the various options available.
New Relic is an excellent service that allows you to monitor your website for issues arising the database, the backend server, the code, plugins or another external service. You can monitor user interactions and find out where customer flow is falling off. Data and analytics are key factors in determining the quality of the user experience on your site so it’s worth investing in one of the better tools around for this purpose. Leave disabled if you don’t use New Relic.
This is fairly easy to understand but as the defaults are all disabled it’s worth checking and enabling any options that you will use.
Obviously, if using CloudFlare the CloudFlare extension should be enabled here.
For users of the excellent Genesis Themes you can get a (developer-claimed) 30-60% increase in speed by using their extension. This is already an extremely fast theme so there’s quite a speed improvement to be gained by using this combination.
I’d highly recommend using Yoast so if you have this excellent plugin installed activate the extension here.
Summary and Conclusion
W3 Total Cache is an excellent plugin that will help you squeeze a lot more speed from your WordPress installation. The basic configuration will give you some performance boost but a complete configuration can see those efforts doubled.
Some points to keep in mind when performing performance reviews on your site
- PNG should be used for logos.
- JPEG should be used for photos.
- Ads will slow your site down so always think about this when considering putting advertisements on side-bars or headers.
- Use caution with social sharing plugins such as the Jetpack Sharing feature. Facebook like buttons and Twitter feeds can also seriously impact download times.
- Keep analytics scripts, affiliate links, and other scripts to a minimum.
- It’s worth testing your WordPress theme in the demo version online before purchasing or downloading as it might show you some inefficiencies in the theme’s code.
- Sliders and full-screen auto-play video will add significantly to the server load. Only use sliders and video if absolutely necessary.
- Be sure to perform full tests on Photon, the plugin that comes with Jetpack for WordPress, at the same time as another CDN, or caching system. I don’t recommend it and I’m sure many people would disagree with my view. The truth is that it’s not a very versatile plugin, it’s not a real CDN, and it can have issues with many other plugins.
- Remember to empty the cache whenever you make changes. A dialogue box appears at the top of the WordPress Admin page whenever you change anything in W3 Total Cache indicating that changes have been made and asking if you want to empty the cache. Do this before testing the site in your browser.
- If you’re using SiteGround (my recommendation for web hosting) then you could, in theory, use their SuperCacher plugin which removes the need for W3 Total Cache. SiteGround claim it is optimized to work for WordPress on SiteGround’s hosting. In a later post I will fully test W3 Total Cache vs. SuperCacher on SiteGround and document the results.
So far W3 Total Cache has outperformed SuperCacher in all aspects.
If you have questions regarding the use of the W3 Total Cache Plugin, or any other cache plugins please let me know in the comments or via the Social Media. Alternatively please reach out on Social Media.