Installation and configuration of W3 Total Cache

Note: this guide has been extensively expanded and updated in 2021

If your site runs on WordPress and you want to improve its performance, we recommend W3 Total Cache, one of the most used plugins to speed up WordPress pages through the method cache.

In this note we are going to tell you how to install this powerful site accelerator, point out the recommended configurations, and also how to make your site even faster by linking W3 Total Cache with Cloudflare, the most used content delivery network on the planet.

If you use the configuration that we developed here together with our optimized plan for WordPress, we guarantee that the speed your site will gain will literally have no competition.

Let's start...

Initial setup

Installation is very simple: it is the same as installing any other plugin.

First we will select the “Add new” option under the Plugins menu.

Using the plugin search field, we will type 'w3 total cache' as shown in the screenshot below.

To measure the before and after

It is essential to have a comparison method to check the effectiveness of the improvements and configurations that we edit thanks to Total Cache. For this we suggest using the online tool of WebPageTest.

At the same time, we highly recommend, if you haven't already done so, consult our note on how to identify the 6 most common speed problems (we talked about the WebPageTest tool in that note). It is transcendental to use WebPage Test (or another similar) to be able to measure the before and after of the speed of our site after having created a cache (as long as we measure the same URL for all tests, which is convenient; eg: mysite.com/services/).

Starting to configure WP Total Cache

The instructions that follow will guide us step by step, illustrating with images to facilitate understanding. First, we will access the configuration of the newly installed plugin by clicking on the link highlighted in the screenshot below:

We will see the following screen. In it we are allowed to grant WP Total Cache the possibility of collect information about the performance of our site. Users granting this permission allows developers to more quickly (and specifically) improve the plugin for various possible scenarios (read, make it more efficient for different Theme/Plugin coexistence).

If we agree to help the developers, we will click the “Accept” button. Otherwise, in “Reject”.

For this example site we have clicked 'OK', but whatever we decide, on the next screen we must click 'Next'.

The screen that appears later allows us to perform a quick test of our cache. Translating, the message says:

 'The time it takes between a visitor's browser page request and receiving the first byte of a response is known as Time to first byte.

» W3 Total Cache can help you speed up time to first byte thanks to page cache.

» We will test your home page with Page Cache disabled, and then with various storage engines. You should review the test results and choose the best option for your website.'

Then, we will click on the blue button “Test Page Cache”.

Next, we will see something like this:

Note that the results will vary according to our hosting service and the virtues that it has.

In this case, we will select “Disk Enhanced” because it is the option recommended by Total Cache ('Recommended'). However, the speed test tells us that “Memcached” provided the most significant speed drop. As we stated before, it is best to test with WebPage Test, but for now we will click on “Next” to continue.

This time we are allowed to test the database cache. As you can imagine, we will click on the blue button.

The result of the new test will look similar to the following screenshot:

As the plugin recommends, we will select “Memcached”.

The message in English says: 'By default, this feature is disabled. It is recommended to use Redis either memcached; otherwise (ie not possible) leave this feature disabled as the server database engine may be faster than using disk caching.'

Therefore, after activating “Memcached”, we will click on “Next”. The proposed new test is for the “Object Cache”.

After clicking on the 'Test Object Cache' button, we will see something similar to the following:

For the example and the server that we are using in the test, Total Cache determined that the best option is to use the speed of the disk to speed up the Object Cache.

Note that the 'Memcached' option, ie using Ram for this type of cache, produces an additional slowdown of 7,21% . It is obvious that we are NOT going to choose that option.

After selecting 'Disk', we will click on “Next”.

The next test on the list is about the Internet Browser.

The message tells us that 'in order to render our website, browsers must download many different types of assets, including javascript files, CSS style sheets, images, and more. For most of these files, once a browser has downloaded them, it shouldn't have to download them again.

W3 Total Cache can help ensure that browsers are properly caching these files.

The Cache-Control header tells the browser how to cache specific files. The settings of maximum time tells our browser how long, in seconds, to use the cached version of a file before requesting an updated one.

To improve the browser cache, it is recommended to enable the browser cache'.

Clearly, we will click on the 'Test Browser Cache' button.

In the screenshot above, we will activate the browser cache and then we will click on 'Next'.

At this stage we can enable an image loading enhancement called 'LazyLoad'. Lazy Load means "delayed loading", that is to say that we will force an internet browser to load (and show) first all the texts, and then the images (because the images weigh much more and tend to slow down the appearance of the texts).

For practical purposes, our users will be able to start reading titles and content while the photographic images load immediately after. Another advantage is that images hidden (images that would require vertical scrolling to view) will not load until the user performs the scroll action.

For this, we will activate the option and then we will click on “Next”.

This has been the last step of the basic installation of Total Cache. The message we will see will be something similar to the following:

In short, we are presented with the details of the configurations that we have been selecting in the basic installation guide.

Next, we will click on “dashboard” to finish.

But this has not been all. Next we will see how to better and more deeply customize each aspect of our cache to work with CloudFlare. More on this below.

More speed with CloudFlare

While we've gone through an initial quick setup provided by the latest version of Total Cache (which will have already speeded up our site a lot), it's true that we can go deeper into the setups and achieve faster speeds. This gets radical when we activate the cooperation between the Total Cache plugin and the free service provided by Cloudflare.

What is CloudFlare?

cloudflare is a company that provides an online service of the 'CDN' genre

CDN stands for the English sentence 'Content Delivery Network', namely 'Content Distribution Network' (“content” refers to the information of existing data and images on our site). CloudFlare increases the speed of a site by allowing optimized content download from your own servers. In other words, our site will be shared from two servers instead of one, our hosting provider.

One of the advantages of this is that CDN, being a network, implies servers located in each country. If I am in Italy, I will enter my site and it will be downloaded from Italy and not from, for example, Argentina. If I am in China, my site will be downloaded from servers located in China, and so on. In other words, with CloudFlare, the site is cloned on hundreds of servers scattered around the planet. And of course, the speed difference is huge when content is downloaded from a nearby, local server.

Next, and as an additional part of this guide, we will explain how to configure our Total Cache plugin to work with the CloudFlare service.

The first thing is to access the General adjustments as we show you in the screenshot below.

On the screen of General adjustments the most important thing is that the Page Cache is active. In addition, we will verify that the “Preview Mode” method is disabled (it is a test method to preview the settings, but since if something goes wrong we can simply disable the plugin completely, we do not recommend using it).

Below we see the configuration section of the minification tool. 'Minify' is a cleanup of our site's programming code to make it more compact, but without removing critical instructions. When we use our site in conjunction with CloudFlare, CloudFlare will take care of minifying directly instead of Total Cache, and therefore this option must be disabled (note: if we are not using CloudFlare, then it must be enabled).

The corresponding configuration should reflect the screenshot below:

Sliding further down we find the section of Database Cache. The following option must be deactivated in the most general cases where our hosting is shared (the same computer hosts different websites, including ours). We will only activate this option when we have contracted a service of dedicated hosting.

Continuing with the personalization of our General adjustments We will see the box corresponding to the Browser Cache. This cache specifically works in conjunction with Internet browsers, such as Edge, Firefox, Safari, and Chrome, checking to see if the content the user intends to view is already on their hard drive (because they've been to the site before). This option must be activated.

Attention with the next section: although we are foreseeing the context of using the CloudFlare network together with Total Cache, precisely this is not where it is configured. Therefore, this option must be disabled as we show you in the screenshot below:

Further down we will find the box to configure what is called Reverse proxy. Reverse proxies are sophisticated security mechanisms associated with private hosting services. Therefore, this option will be disabled in the vast majority of cases.

Next, we will make sure that LazyLoad is activated.

The Fragment Cache it is useful on dynamic sites like those running on WordPress. This method, instead of caching an entire page, caches the largest individual portions. Let's activate it in the method Disk.

Although sliding further down we will see more boxes, here we are going to stop with the optimizations of the General adjustments to make a fine customization of the enabled elements (you can ignore everything that we have not mentioned here without worrying).

Next, we will have to enter the detailed configuration of each method by clicking on the corresponding option in our sidebar tools menu.

Note: We are only going to deal with the options that we have enabled so far in the guide. All the rest we can rule it out.

Page Cache

First of all, we will access the configuration of our Page Cache. The first box, 'General', must reflect the following qualifications:

Important note regarding SSL Request Cache: Since CloudFlare offers free SSL certificate, we are going to leave it enabled. On the other hand, if your site is hosted on Duplika, you also have free SSL in all our hosting plans (and therefore you will also enable this function).

By sliding the screen downwards we can see the box corresponding to the Cache Preload. Here we will activate the options indicated below (without touching anything else):

If we make any changes, remember to press "Save all settings".

Object Cache

Here we will jump straight to the options included in the Object Cache (we have not enabled Database Cache either Minimize, so we don't need to set those options).

By clicking on the Object Cache, let's check that these numbers are actually found in the following fields: 180 seconds for the cache duration, and 3600 seconds for the interval.

After saving the changes by clicking on “Save all settings”, we will jump to the fine configuration of the Browser Cache.

Browser Cache

In the "General" options, we will only activate some additional boxes to those that are already checked by default. We will save the changes and we are ready to activate cloudflare.

How to configure the CloudFlare Total Cache W3 Extension

After having prepared our site to fully benefit from CloudFlare's content delivery service, we will click on the "Extensions" link and activate the one corresponding to CloudFlare as we show you in the screenshot below.

What follows is to configure our account on the pagena herself by CloudFlare. After this step we must return to the screenshot above to enter our login credentials obtained from CloudFlare. If we've made it this far, what follows will be like going down a water slide.

Creating our account in CloudFlare

In a new window of our Internet Explorer we will open https://www.cloudflare.com/es-la/ and we will click on the "Register" button (note: if you do not see the screen in Spanish, please select that language in the right link of the upper menu).

On the next screen we create an account by entering the requested data.

Once our account is created, it remains to add the information from our website. First we will click on “Add site” and then, in the field indicated below, we will simply type our domain (eg: mysite.com) and click on the Analyze DNS records button:

In the field to enter site, NO We will write our domain with HTTP or HTTPS or WWW.

We will simply write the domain as shown in the example.

After this step, the plans will be presented on the next screen. We will press the button "Continue".

Now we have to check our DNS records (for 'Domain Name Server', the names of the domain server). Although the first screenshot may seem intimidating to us, what we need to do is simple: check the orange cloud icon next to our domain.

After "Continue", we will be presented with the NS (Name Servers or Server Names). On the one hand we have the information of names that correspond to the hosting company that provides us with accommodation. As we see in the example, the site we use for this guide is hosted on Duplika (ns1.duplika.com Y ns2.duplika.com).

On the other hand, we have the new server names provided by CloudFlare. It happens that, in order to use the benefits of this service, we must replace the 'old' DNS (eg: ns1.duplika.com Y ns2.duplika.com) for the new ones (eg:  gabe.ns.cloudflare.com Y maya.ns.cloudflare.com). This action must be carried out with the registrant company where we bought our domain MySite.com. If we are already hosting our site, we have probably done this step before. If we have acquired a domain with extension .com.ar, the NS change procedure is carried out in nic.ar; If this is not the case, we can request the hosting company that we have contracted to carry out this process for us. If any specific doubt arises, an alternative is to write in the comments of this guide, or to [email protected]

To finish, we will click on 'Okay, I checked the servers Name'. Cloudflare will give us a tour of their enhancements, describing and activating them for us (let's try enable minification for JS/HTML/CSS).

Note: NS changes usually take up to 24 hours andn fully spread over the Internet. Meanwhile, and until the change is complete, our site will continue to function through the original NS, so we can lose care that it will never be offline.

After 24 hours we will be able to notice the pertinent improvements to CloudFlare (our site will work faster) and we can already proceed. complete the configuration of the beloved Total Cache to further improve speed.

For this, we enter “Settings” as we pointed out in the screenshot below.

Then, we will click on the button «Authorize».

Important note: If we click on the "Authorize" button and nothing happens (as happened in our case while we were making the guide), we must momentarily change the language of our site to English. This is a problem with the CloudFlare extension, so don't worry too much. To change the language of our site to English we will go to Settings → General and we will change it as shown in the screenshot below.

If everything went well, the screen that we will see after clicking on the blue button “Authorize" is the next. There we must enter the mail used to create the CloudFlare account, and the api key that CloudFlare has given us after having created it (we can see the key in our CloudFlare account here).

After entering email and password, we will click on “Following” (remember, if we had to, return our site to the Spanish language).

After this step, we will have finished configuring both Total Cache and our free CloudFlare account.

Conclusions

If we've made it this far, we should be proud that we've taken so many steps to speed up our site and greatly improve its accessibility for our users. This effort will bear beautiful fruits.

It is worth clarifying that faster sites better position in Google/Bing search results.

If something has slowed us down, it is recommended to use the comments to make inquiries.

If you liked the guide, we can evaluate the plans we offer for sites made with WordPress (our hosting service will improve the speed of your site much more because we work every day for that, investing in cutting-edge technology and hardware). ohOur clients speak for us!

If you need professional help, do not hesitate to write to [email protected] that we are here to help you.

Good luck, and thanks for reading.