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 personalización fina de los elementos habilitados (puedes obviar todo lo que aquí no hemos mencionado sin preocuparte).

A continuación, deberemos ingresar a la configuración detallada de cada método haciendo clic en la opción correspondiente en nuestro menú de herramientas de la barra lateral.

Nota: sólo vamos a ocuparnos de las opciones que hemos habilitado hasta el momento en la guía. Todo el resto podemos descartarlo.

Caché de Página

En primer lugar, accederemos a la configuración de nuestro Caché de Página. El primer recuadro, ‘General‘, debe reflejar las siguientes habilitaciones:

Nota importante con respecto al Caché de Solicitudes SSL: Dado que CloudFlare ofrece certificado SSL gratuito, vamos a dejarlo habilitado. Por otro lado, si tu sitio está alojado en Duplika, también cuentas con SSL gratuito en todos nuestros hosting plans (y por ende también habilitarás esta función).

Deslizando la pantalla hacia abajo podremos visualizar el reacuadro correspondiente a la Precarga del Caché. Aquí activaremos las opciones señaladas debajo (sin tocar nada más):

Si realizamos algún cambio, recordemos presionar “Guardar todos los ajustes”.

Caché de Objetos

Aquí saltaremos directo a las opciones comprendidas en el Caché de Objetos (no hemos habilitado Database Cache ni tampoco Minimizar, así que no necesitamos configurar dichas opciones).

Haciendo clic sobre el Caché de Objetos, comprobemos que en los siguientes campos se encuentren efectivamente dichos números: 180 segundos para la duración de la caché, y 3600 segundos para el intervalo.

Tras guardar los cambios haciendo clic sobre “Guardar todos los ajustes”, saltaremos a la configuración fina del Caché del Navegador.

Caché del Navegador

En las opciones “Generales”, únicamente activaremos algunas casillas adicionales a las que ya vienen tildadas por defecto. Guardaremos los cambios y ya estamos listos para activar cloudflare.

Cómo configurar la Extensión W3 Total Cache de CloudFlare

Tras haber preparado a nuestro sitio para beneficiarse ampliamente con el servicio de entrega de contenidos de CloudFlare, haremos clic cobre el enlace de “Extensiones” y activaremos la correspondiente a CloudFlare como te mostramos en la captura inferior.

Lo que sigue es configurar nuestra cuenta en la página misma de CloudFlare. Tras este paso deberemos volver a la pantalla de la captura de arriba para introducir nuestras credenciales de inicio de sesión obtenidas de CloudFlare. Si hemos llegado hasta aquí, lo que sigue será como deslizarse por un tobogán de agua.

Creando nuestra cuenta en CloudFlare

En una nueva ventana de nuestro Explorador de Internet abriremos https://www.cloudflare.com/es-la/ y haremos clic sobre el botón “Registrarse” (nota: si no ves la pantalla en español, por favor selecciona dicho idioma en el link derecho del menú superior).

En la pantalla siguiente creamos una cuenta ingresando los datos solicitados.

Una vez creada nuestra cuenta, resta agregar la información de nuestro sitio web. Primero haremos clic sobre “Añadir sitio” y luego, en el campo señalado debajo, sencillamente tipearemos nuestro dominio (ej.: misitio.com) y haremos clic sobre el botón en Analizar registros DNS:

En el campo para ingresar sitio, NO escribiremos nuestro dominio con HTTP ni HTTPS ni WWW.

Sencillamente, escribiremos el dominio como se muestra en el ejemplo.

Tras este paso, en la pantalla siguiente se nos presentarán los planes. Presionaremos el botón de “Continuar”.

Ahora nos toca verifica nuestros registros DNS (por ‘Domain Name Server’, los nombres del servidor del dominio). Aunque el primer pantallazo puede parecernos intimidamente, lo que necesitamos hacer es sencillo: comprobar el ícono de la nube naranja junto a nuestro dominio.

Tras “Continuar”, se nos presentarán los NS (Name Servers ó Nombres de Servidor). Por un lado tenemos la información de nombres que corresponden a la empresa de hosting que nos provee alojamiento. Como vemos en el ejemplo, el sitio que empleamos para esta guía se encuentra alojado en Duplika (ns1.duplika.com Y ns2.duplika.com).

Por otro lado, tenemos los nuevos nombres de servidor que nos brinda CloudFlare. Ocurre que, para poder emplear los beneficios de este servicio, debemos reemplazar los ‘viejos’ DNS (ej.: ns1.duplika.com Y ns2.duplika.com) por los nuevos (ej.:  gabe.ns.cloudflare.com Y maya.ns.cloudflare.com). Esta acción debemos llevarla a cabo con la empresa registrante en donde hemos comprado nuestro dominio MiSitio.com. Si ya estamos alojando nuestro sitio probablemente ya hayamos realizado este paso anteriormente. Si hemos adquirido un dominio con extensión .com.ar, el trámite de cambio de NS se realiza en nic.ar; si no es el caso, podemos solicitar a la empresa de hosting que hemos contratado que realicen este proceso por nosotros. Si surge alguna duda puntual, una alternativa es escribir en los comentarios de esta guía, o bien a [email protected]

Para finalizar, haremos clic en ‘Listo, verifiqué los servidores de nombre’. Cloudflare nos realizará un tour por sus mejoras, describiéndolas y activándolas por nosotros (procuremos activar la minificación para JS/HTML/CSS).

Nota: Los cambios de NS suelen tardar hasa unas 24 horas en propagarse completamente por Internet. Mientras tanto, y hasta que no se complete el cambio, nuestro sitio continuará funcionando a través de los NS originales, así que podemos perder cuidado de que nunca quedará offline.

Tras 24 horas podremos notar las mejoras pertinentes a CloudFlare (nuestro sitio funcionará más rápido) y ya prodemos completar la configuración del querido Total Cache para mejorar aún más la velocidad.

Para esto, ingresemos en “Settings” como señalamos en la captura inferior.

Luego, haremos clic sobre el botón «Autorizar».

Important note: si hacemos clic en el botón “Autorizar” y no sucede nada (como ocurrió en nuestro caso mientras confeccionamos la guía), debemos momentáneamente cambiar el idioma de nuestro sitio al Inglés. Este es un problema de la extensión de CloudFlare, así que no hay que preocuparse demasiado. Para cambiar el idioma de nuestro sitio al inglés iremos a Ajustes → Generales y lo cambiaremos según se enseña en la captura inferior.

Si todo ha ido bien, la pantalla que veremos tras hacer clic en el botón azul de “Autorizar” es la siguiente. Allí deberemos ingresar el mail usado para crear la cuenta de CloudFlare, y la clave API que CloudFlare nos ha entregado tras haber creado la misma (podemos ver la clave en nuestra cuenta de CloudFlare aquí).

Tras ingresar correo y clave, haremos clic en “Siguiente” (recordemos, si hemos debido hacerlo, devolver nuestro sitio al idioma Español).

Tras este paso, habremos terminado de configurar tanto Total Cache como nuestra cuenta gratuita de CloudFlare.

Conclusions

Si hemos llegado hasta aquí debemos sentirnos orgullosos de haber realizado tantos pasos para acelerar nuestro sitio y mejorar mucho su accesibilidad para nuestros usuarios. Este esfuerzo dará hermosos frutos.

It is worth clarifying that sitios más rápidos posicionan mejor en los resultados de búsqueda de Google/Bing.

Si algo nos ha frenado, se recomienda emplear los comentarios para realizar consultas.

Si la guía te ha gustado, podemos evaluar los planes que ofrecemos para sitios hechos con WordPress (nuestro servicio de hosting mejorará la velocidad de tu sitio mucho más pues trabajamos día a día para eso, invirtiendo en tecnología y hardware de vanguardia). ¡Our clients hablan por nosotros!

Si necesitas ayuda profesional, no dudes en escribir a [email protected] que estamos para ayudarte.

Good luck, and thanks for reading.

We are Duplika

Give your site the hosting it deserves

no comments on Installation and configuration of W3 Total Cache

back to blog

Duplika

Duplika

We are online, we are not a bot :)

I will be back soon

Duplika
Hi 👋
Select the prefered contact method to get in touch.
Connect via:
chat