Configuring W3 Total Cache: An Introduction

The page speed of an optimized website scaled for high traffic is a phrase which a developer often hears from the moment they enter the industry. There is a lot of discussion about these topics, and rightly so!

In this tutorial, we're going to be taking a look at some of the topics that are often discussed - especially caching - and how it can not only benefit our site, but how to configure our WordPress installation to achieve the best results possible.

Here are several reasons that we will be looking into caching:

User Experience. If your site loads faster, your visitors stay happy, your conversions increase, extended number of page views compliment the engagement as well as the increased revenue in case of RPM based ads.
Search Engine Experience. Sites that load quickly are ranked higher by all search engines. Google has especially mentioned that if your site is optimized and scaled to load faster, then you can expect high SERP rankings.

In the last series, we looked at how to configure your WordPress SEO plugin by Yoast for providing solid SEO. In the article, we discussed about the importance of page speed and how it impacts your ranking. From there, I've received a number of questions about various caching plugins, as well as the best way to configure them.

So in this article, we're going to take a look at W3 Total Cache and how to provide an optimal configure for our website.

Specifically, we're going to take a look at the following points:

What is caching?
Why should we use the W3 Total Cache plugin?
What does the W3 Total Cache plugin offer?
How are we going to configure W3 Total Cache?

With that said, let's take a look.

What Is Caching?

According to Wikipedia:

In computer science, a cache is a component that transparently stores data so that future requests for that data can be served faster. The data that is stored within a cache might be values that have been computed earlier or duplicates of original values that are stored elsewhere. If requested data is contained in the cache (cache hit), this request can be served by simply reading the cache, which is comparatively faster. Otherwise (cache miss), the data has to be recomputed or fetched from its original storage location, which is comparatively slower. Hence, the greater the number of requests that can be served from the cache, the faster the overall system performance becomes.

In short caching is the process of temporarily saving data on the server-side, on the client-side or maybe both in order to speed up the page lifecycle.

For example, when you produce your site's cache on the server side, your users don't actually compile your work. Instead, they view pre-compiled versions of your work. Typically, we see compressed a minified versions of CSS and JavaScript.

To put a page in context, let's assume that your work is a WordPress page (which is written in PHP and MySQL). In that case, you're looking at having up to 250 queries fire when the page loads. Let's assume it takes 10 seconds to execute the request on your server. That means every time a visitor views any page on your site, your server has to assemble the code with at least 250 queries which take 10 seconds in returning the output.

When multiple visitors are hitting your site all at once, your server will require more resources in order to return the page. As a result, the load time suffers. Furthermore, think what will happen if 1000 users are simultaneously browsing your site - this can lead to a significant utilization of resources especially if you're on a budget host.

But if you cache your site's pages on the server-side then you can make progress is preventing the server from crashing. But why's that?

When you cache your site's pages on the server, each page is compiled for a certain amount of time. Now, when a user views your site, the page doesn't takes 250 queries to compile, but the user is served with already pre-compiled.

Such is the case with client-side caching, as well. In client-side caching, some data is stored in your visitor's browser. For example, assume that you have the same logo in the header. You can cache the image to user's browser so that the browser - not the server - returns the image.

To be clear, let's take a look an image for illustration:

Why Use the W3 Total Cache Plugin?

There are a lot of caching plugins that are available, but W3 Total Cache is a solid choice because it has a lot of options, it works with a wide array of server configurations, it has over than three million downloads. Additionally, a plugin as famous as W3TC is also secure in contrast to some lesser known, lower quality plugins.

Sure, this is a bit subject, but most of the services you will find (such as MaxCDN and New Relic) often ask you to install W3TC to take full advantage of their services.

So why not install and configure W3TC before hand?

I have optimized more than 100 sites for my clients using W3TC and it has produced nothing but positive results. The following screenshots depict the results of using a caching plugin.

Ahmad_Awais_W3TC_Results_Scaling_Optimizing_Sites-1

Of course, there is an advanced side of optimization to achieve all of the goals demonstrated in the above results, but a beginner with simple optimizations can still achieve significant results.

What Does W3 Total Cache Plugin Offer?

There are a lot of other benefits of using this plugins, let's take the developer's word for it. Frederick Townes has done a great job explaining the features.

They are as follows:

W3TC Is Trusted By:

AT&T
stevesouders.com
mattcutts.com
mashable.com
smashingmagazine.com
makeuseof.com
yoast.com
kiss925.com
pearsonified.com
lockergnome.com
johnchow.com
ilovetypography.com
webdesignerdepot.com
css-tricks.com
...and tens of thousands of others.

Some of the Benefits of W3TC:

At least 10x improvement in overall site performance (Grade A in YSlow or significant Google Page Speed improvements) when fully configured
Improved conversion rates and "site performance" which affect your site's rank on Google.com
"Instant" subsequent page views: browser caching
Optimized progressive render: pages start rendering quickly
Reduced page load time: increased visitor time on site; visitors view more pages
Improved web server performance; sustain high traffic periods
Up to 80% bandwidth savings via minify and HTTP compression of HTML, CSS, JavaScript and feeds

It's Features Include:

Compatible with shared hosting, virtual private / dedicated servers and dedicated servers / clusters
Transparent content delivery network (CDN) management with Media Library, theme files and WordPress itself
Mobile support: respective caching of pages by referrer or groups of user agents including theme switching for groups of referrers or user agents
Caching of (minified and compressed) pages and posts in memory or on disk or on CDN (mirror only)
Caching of (minified and compressed) CSS and JavaScript in memory, on disk or on CDN
Caching of feeds (site, categories, tags, comments, search results) in memory or on disk or on CDN (mirror only)
Caching of search results pages (i.e. URIs with query string variables) in memory or on disk
Caching of database objects in memory or on disk
Caching of objects in memory or on disk
Minification of posts and pages and feeds
Minification of inline, embedded or 3rd party JavaScript (with automated updates)
Minification of inline, embedded or 3rd party CSS (with automated updates)
Browser caching using cache-control, future expire headers and entity tags (ETag) with "cache-busting"
JavaScript grouping by template (home page, post page etc) with embed location control
Non-blocking JavaScript embedding
Import post attachments directly into the Media Library (and CDN)
WP-CLI support for cache purging, query string updating and more

In short, we can easily improve the user experience for our readers without having to change WordPress, your theme, your plugins or our workflow.