blog-instalacion-configuracion-w3-total-cache

Instalación y configuración de W3 Total Cache

Nota: la presente guía ha sido ampliamente expandida y actualizada en 2021

Si tu sitio corre en WordPress y deseás mejorar su rendimiento, te recomendamos W3 Total Cache, uno de los plugins más utilizados para acelerar las páginas de WordPress a través del método cache.

En esta nota vamos a contarte cómo instalar este poderoso acelerador de sitios, señalarte las configuraciones recomendadas, y también cómo volver tu sitio aún más rápido enlazando W3 Total Cache con Cloudflare, la red de entrega de contenidos más usada del planeta.

Si empleas la configuración que aquí desarrollamos en conjunto con nuestro plan optimizado para WordPress, te garantizamos que la velocidad que ganará tu sitio no tendrá literalmente competencia.

Comencemos…

Índice de contenidos

Configuración inicial

La instalación es muy sencilla: es igual a instalar cualquier otro plugin.

Primero seleccionaremos la opción «Añadir nuevo» bajo el menú de Plugins.

Instalación y configuración de W3 Total Cache 1

Empleando el campo de búsqueda de plugins, tipearemos ‘w3 total cache’ como se muestra en la captura inferior.

Instalación y configuración de W3 Total Cache 2

Para medir el antes y el después

Resulta fundamental tener un método de comparación para comprobar la efectividad de las mejoras y configuraciones que editemos gracias a Total Cache. Para ello sugerimos emplear la herramienta online de WebPageTest.

Paralelamente, te recomendamos mucho, si aún no lo hiciste, consultar nuestra nota sobre cómo identificar los 6 problemas de velocidad más comunes (hablamos sobre la herramienta WebPageTest en dicha nota). Es trascendental emplear WebPage Test (u otro similar) para poder medir el antes y el después de la velocidad de nuestro sitio tras haber creado un caché (siempre y cuando midamos la misma URL para todas las pruebas, que es lo conveniente; ej.: misitio.com/servicios/).

Comenzando a configurar WP Total Cache

Las instrucciones que sigen nos guiarán paso a paso ilustrando con imágenes para facilitar la comprensión. Primeramente, accederemos a la configuración del plugin recién instalado haciendo clic en el enlace remarcado en la captura inferior:

Instalación y configuración de W3 Total Cache 3

Veremos la siguiente pantalla. En ella se nos permite conceder a WP Total Cache la posibilidad de recabar información sobre el rendimiento de nuestro sitio. Que los usuarios concedan este permiso permite a los desarrolladores mejorar más rápidamente (y específicamente) el plugin según los diversos escenarios posibles (léase, volverlo más eficaz para diferentes coexistencias de Temas/Plugins).

 

Instalación y configuración de W3 Total Cache 4

Si estamos de acuerdo en ayudar a los desarrolladores, haremos clic en el botón «Aceptar». Caso contrario, en «Rechazar».

Para este sitio de ejemplo hemos hecho clic en «Aceptar», pero, cualquiera sea nuestra decisión, en la pantalla siguiente debemos cliquear en ‘Next’.

Instalación y configuración de W3 Total Cache 5

La pantalla que aparece luego nos permite realizar un testeo rápido de nuestro cache. Traduciendo, el mensaje dice:

 ‘El tiempo que se tarda entre la solicitud de página del explorador de un visitante y la recepción del primer byte de una respuesta se conoce como Tiempo hasta el primer byte.

» W3 Total Cache puede ayudarte a acelerar el tiempo hasta el primer byte gracias al caché de páginas.

» Probaremos tu página de inicio con Page Cache deshabilitado, y luego con varios motores de almacenamiento. Debes revisar los resultados de las pruebas y elegir la mejor opción para tu sitio web.’

Entonces, haremos clic sobre el botón azul «Test Page Cache».

Instalación y configuración de W3 Total Cache 6

A continuación, veremos algo como esto:

Instalación y configuración de W3 Total Cache 7

Nótese que los resultados variarán según nuestro servicio de hosting y las virtudes que éste disponga.

En este caso, seleccionaremos «Disk Enhanced» porque es la opción recomendada por Total Cache (‘Recommended’). No obstante, la prueba de velocidad nos indica que «Memcached» brindó la merma en velocidad más significativa. Como manifestamos anteriormente, lo mejor es hacer pruebas con WebPage Test, pero por ahora haremos clic sobre «Next» para poder continuar.

Instalación y configuración de W3 Total Cache 8

En esta ocasión se nos permite testear la caché de la base de datos. Como se imaginarán, haremos clic sobre el botón azul.

El resultado del nuevo test lucirá similar a la captura siguiente:

Instalación y configuración de W3 Total Cache 9

Como nos recomienda el plugin, seleccionaremos «Memcached».

El mensaje en inglés dice: ‘De manera predeterminada, esta característica está deshabilitada. Se recomienda usar Redis o Memcached; de lo contrario (es decir, si no es posible) deje esta característica deshabilitada ya que el motor de base de datos del servidor puede ser más rápido que usando el almacenamiento en caché de disco.’

Por ende, tras activar «Memcached», haremos clic en «Next».

 
El nuevo test propuesto es para el «Cache de objeto».

 

Instalación y configuración de W3 Total Cache 10

Tras hacer clic sobre el botón ‘Test Object Cache’, veremos algo similiar a lo siguiente:

Instalación y configuración de W3 Total Cache 11

Para el ejemplo y el servidor que estamos empleando en el test, Total Cache determinó que la mejor opción es emplear la velocidad del disco para acelerar el Cache de Objeto.

Nótese que la opción ‘Memcached’, es decir usar la Ram para este tipo de cache, produce una lentitud adicional de 7,21% . Es obvio que NO vamos a elegir dicha opción.

Tras seleccionar ‘Disco’, haremos clic sobre «Next».

El siguiente test en la lista es sobre el Navegador de internet.

Instalación y configuración de W3 Total Cache 12

El mensaje nos dice que ‘para presentar en pantalla nuestro sitio web, los navegadores deben descargar muchos tipos diferentes de activos, incluidos archivos javascript, hojas de estilo CSS, imágenes y más. Para la mayoría de estos archivos, una vez que un navegador los ha descargado no debería tener que descargarlos de nuevo.

W3 Total Cache puede ayudar a garantizar que los navegadores estén almacenando correctamente en caché estos archivos.

El encabezado Cache-Control indica al explorador cómo debe almacenar en caché archivos específicos. La configuración de tiempo máxima indica a nuestro navegador cuánto tiempo, en segundos, debe usar la versión almacenada en caché de un archivo antes de solicitar uno actualizado.

Para mejorar la caché del navegador, se recomienda habilitar la caché del navegador’.

Claramente, haremos clic sobre el botón ‘Test Browser Cache’.

Instalación y configuración de W3 Total Cache 13

En la pantalla de la captura superior, activaremos el cache de navegador y luego haremos clic en ‘Next’.

En esta etapa podemos activar una mejora para la carga de imágenes llamada ‘Lazy Load‘. Lazy Load significa «carga retardada», es decir que forzaremos a que un navegador de internet cargue (y muestre) primeramente todos los textos, y luego las imágenes (porque las imágenes pesan mucho más y suelen ralentizar la aparición de los textos).

A fines prácticos, nuestros usuarios podrán comenzar a leer títulos y contenido mientras las imágenes fotográficas se cargan inmediatamente después. Otra ventaja es que imágenes escondidas (imágenes para las que habría que desplazar la pantalla verticalmente para poder verlas) no se cargarán hasta que el usuario no realice la acción de desplazar.

Por esto, activaremos la opción y luego haremos clic sobre «Next».

Instalación y configuración de W3 Total Cache 14

Este ha sido el último paso de la instalación básica de Total Cache. El mensaje que veremos será algo similar a lo siguiente:

Instalación y configuración de W3 Total Cache 15

En suma, se nos presenta el detalle de las configuraciones que hemos ido seleccionando en la guía de instalación básica.

A continuación, haremos clic sobre «dashboard» para terminar.

Pero esto no ha sido todo. A continuación veremos cómo personalizar mejor y más profundamente cada aspecto de nuestro cache para que funcione con CloudFlare. Más sobre esto a continuación.

Más velocidad con CloudFlare

Si bien hemos atravesado una configuración rápida inicial provista por la versión más reciente de Total Cache (lo que ya habrá acelerado nuestro sitio en demasía), es cierto que podemos profundizar las configuraciones y lograr una velocidad superior. Esto se vuelve radical cuando activamos la cooperación entre el plugin Total Cache y el servicio gratuito provisto por Cloudflare.

¿Qué es CloudFlare?

CloudFlare es una empresa que provee un servicio online del género ‘CDN’

CDN son las siglas de la oración inglesa ‘Content Delivery Network‘, es decir ‘Red de Distribución de Contenido’ («contenido» hace alusión a la información de datos e imágenes existentes en nuestro sitio). CloudFlare aumenta la velocidad de un sitio permitiendo la descarga optimizada del contenido desde sus propios servidores. En otras palabras, nuestro sitio se descargará de manera compartida desde dos servidores en lugar de uno solo, nuestro proveedor de hosting.

Una de las ventajas de ésto es que CDN, al tratarse de una red, implica servidores localizados en cada país. Si me encuentro en Italia, entraré a mi sitio y el mismo se descargará desde Italia y no desde, por ejemplo, Argentina.  Si me encuentro en China, mi sitio se descargará desde servidores ubicados en China, y así. Es decir que, con CloudFlare, el sitio está clonado en cientos de servidores desperdigados por todo el planeta. Y, por supuesto, la diferencia de velocidad es inmensa cuando el contenido se descarga de un servidor próximo, local.

Instalación y configuración de W3 Total Cache 16

A continuación, y como parte adicional de esta guía, vamos a explicar cómo configurar nuestro plugin Total Cache para que funcione con el servicio de CloudFlare.

Lo primero será acceder a los Ajustes Generales como te mostramos en la captura inferior.

Instalación y configuración de W3 Total Cache 17

En la pantalla de Ajustes Generales lo más importante es que el Caché de Página esté activo. Además, verificaremos que el método de «Preview Mode» esté desactivado (es un método de prueba para previsualizar los ajustes, pero como si algo sale mal sencillamente podemos desactivar el plugin por completo, no recomendamos usarlo).

Instalación y configuración de W3 Total Cache 18

Más abajo vemos la sección de configuración de la herramienta de minificación. ‘Minificar’ es una depuración del código de programación de nuestro sitio para volverlo más compacto, aunque sin eliminar instrucciones críticas. Cuando usamos nuestro sitio en conjunto con CloudFlare, CloudFlare se encargará de minificar directamente en lugar de Total Cache, y por ende esta opción debe de estar desactivada (atención: si no usamos CloudFlare, entonces sí debe estar activada).

La configuración correspondiente debe de reflejar la captura inferior:

Instalación y configuración de W3 Total Cache 19
Estás viendo los settings indicados para usar en conjunto con CloudFlare

Deslizándonos más abajo nos encontramos con el apartado de Cache de Base de Datos. La siguiente opción debe de ser desactivada en los casos más generales en donde nuestro alojamiento es compartido (una misma computadora aloja diferentes sitios web, incluyendo el nuestro). Sólo activaremos esta opción cuando hayamos contratado un servicio de hosting dedicado.

Instalación y configuración de W3 Total Cache 20

Más abajo aún podremos visualizar el apartado de configuración de Cache de Objeto. En líneas generales recomendamos que esté activado en conjunto con la configuración señalada en la captura inferior. No obstante, si notamos que administrar nuestro sitio a través del Escritorio se vuelve lento en comparación con cómo solía serlo, será mejor desactivarla.

Instalación y configuración de W3 Total Cache 21

Continuando con la personalización de nuestros Ajustes Generales veremos el recuadro correspondiente al Cache del Navegador. Este caché específicamente trabaja en conjunto con los exploradores de internet, como Edge, Firefox, Safari y Chrome, comprobando si el contenido que el usuario pretende ver ya se encuentra en su disco rígido (porque ha ingresado al sitio anteriormente). Esta opción debe de estar activada.

Instalación y configuración de W3 Total Cache 22

Atención con el próximo apartado: aunque estamos previendo el contexto de emplear la red CloudFlare con conjunto con Total Cache, justamente aquí no es donde se configura. Por ende, esta opción debe de estar desahibilitada como te mostramos en la captura inferior:

Instalación y configuración de W3 Total Cache 23

Más abajo encontraremos el reacuadro para configurar lo que se denomina Proxy Inverso. Los proxies inversos son mecanismos de seguridad sofisticados asociados a servicios de alojamiento privado. Por ende, esta opción estará deshabilitada en la gran mayoría de los casos.

Instalación y configuración de W3 Total Cache 24

A continuación, nos cercioraremos de que Lazy Load esté activado.

Instalación y configuración de W3 Total Cache 25

La Caché de Fragmentos es útil en sitios dinámicos como los que corren en WordPress. Este método, en lugar de almacenar en caché una página completa, guarda en el cache las porciones individuales más pesadas. Vamos a activarlo en el método Disco.

Instalación y configuración de W3 Total Cache 26

Aunque deslizando más abajo veremos más recuadros, aquí vamos a parar con las optimizaciones de los Ajustes Generales para realizar una 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:

Instalación y configuración de W3 Total Cache 27

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 planes de hosting (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):

Instalación y configuración de W3 Total Cache 28

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 Cache de Base de Datos 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.

Instalación y configuración de W3 Total Cache 29

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.

Instalación y configuración de W3 Total Cache 30

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.

Instalación y configuración de W3 Total Cache 31

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).

Instalación y configuración de W3 Total Cache 32

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

Instalación y configuración de W3 Total Cache 33

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:

Instalación y configuración de W3 Total Cache 34

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.

Instalación y configuración de W3 Total Cache 35

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

Instalación y configuración de W3 Total Cache 36

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.

Instalación y configuración de W3 Total Cache 37

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 «Ajustes» como señalamos en la captura inferior.

Instalación y configuración de W3 Total Cache 38

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

Instalación y configuración de W3 Total Cache 39

Nota importante: 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.

Instalación y configuración de W3 Total Cache 40

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 correo 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í).

Instalación y configuración de W3 Total Cache 41

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.

Conclusiones

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.

Vale aclarar que 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 de hosting que ofrecemos especialmente optimizados 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). ¡Nuestros clientes hablan por nosotros!

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

Éxitos, y gracias por leer.

2 respuestas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *