¿Tu sitio web es lento? No te preocupes, con W3 Total Cache tu web cargará super rápido

¿Sabías que si un visitante tiene que esperar más de 3 segundos en que cargue una página probablemente se canse y se vaya a otro sitio? A no ser que el contenido realmente le interese, será una visita perdida que se irá con la competencia. La clave está en esta frase: optimizar velocidad web y si no lo tenemos claro puede llegar a ser un tedio.

También a estas alturas ya sabes que a Google le gustan más los sitios que cargan rápido que los que no, además cuanto mayor sea la velocidad de carga de tu sitio, mejor posicionado estará con nuestro querido amigo Google.

Afortunadamente, optimizar un sitio web hecho con WordPress no es tan complicado como puede llegar a parecer. Si bien en internet hay muchas recetas para conseguir los mejores tiempos de carga, a veces tienen demasiados tecnicismos que terminan por confundirnos más que antes y desalentandonos de nuestro verdadero propósito que es mejorar la carga de nuestras páginas.

En consecuencia, vamos postergando algo que es muy necesario para nuestro SEO (optimización en motores de búsqueda) y no menos importante para la experiencia final del usuario que visita nuestra web.

En este Mega Tutorial voy a mostrarte cómo acelerar tu sitio web hecho con WordPress de forma eficiente con el plugin Freemium W3 Total Cache que para mi es el mejor plugin de caché que he probado y no requiere que uno sea un gurú tecnológico para utilizarlo. ¿Tienes ganas de aprender? ¡Pues al lío!

¿Es igual cualquier alojamiento web (hosting) para mi sitio hecho con WordPress?

Para empezar, quiero hacer un alto en este punto; el alojamiento web o (hosting) de nuestro sitio web es muy importante porque es donde empieza todo el proceso de entrega de información hacia los navegadores de internet y no servirá de nada que instalemos cualquier tipo de plugin de cacheo como W3 Total Cache. Si el hosting es de mala calidad, estaremos perdiendo el tiempo y ralentizando aún más nuestra web.

Este mega tutorial estará basado en mi experiencia con Webempresa que es el hosting que utilizo en todos mis proyectos y en los de mis clientes también.

Como ya sabes soy afiliado de Webempresa y lo recomiendo ampliamente. Desde 2004 que trabajo con ellos y además de tener un soporte increíble sus servidores están super optimizados para WordPress. Si quieres saber más de Webempresa y aprovechar el cupón de descuento, échale un vistazo a este tutorial donde te cuento todo sobre este alojamiento web: ¿Buscas el mejor hosting para WordPress? Hay 7 razones en Webempresa para que dejes de buscar

Instalando el plugin de W3 Total Cache en WordPress

IMPORTANTE: Antes de proceder a instalar W3 Total Cache debes desinstalar cualquier otro plugin que tengas de caché ya que generaría incompatibilidad.

Optimizar velocidad web con W3 Total Cache para un rendimiento óptimo

Ahora vamos a configurar W3 Total Cache para optimizar velocidad web y tener un rendimiento óptimo. Estas configuraciones estarán basadas como dije anteriormente en Webempresa, pero se pueden aplicar perfectamente en cualquier hosting medianamente decente y de calidad, también dependera si utilizas un alojamiento compartido, un VPS o un servidor dedicado.

Este tutorial estará enfocado a los hosting compartidos que es el que utilizamos la mayoría de los mortales como es mi caso también.

Como veremos a continuación W3 Total Cache puede ser un poco intimidante al principio por la cantidad de opciones que tiene en diferentes apartados de su configuración, pero no te preocupes, como dice el dicho, "perro que ladra no muerde".

Voy a ir opción por opción para que tengas todo bien optimizado y luego podrás exportar la configuración para aplicarla a otro sitio web o como un respaldo si tienes que volver a instalar W3 Total Cache. ¡Pues empecemos!

Ajustes generales

General - Preview mode (modo de vista previa)

Aquí veremos dos opciones que van a ser iguales en cualquier sección que hagamos; una es el botón Guardar todos los ajustes y la otra el botón Save Settings & Purgue Caches (guardar configuración y purgar caches).

Guardar todos los ajustes, significa que se guardará la modificación de todas las secciones.

Save Settings & Purgue caches, significa que se guardará la modificación de todas las secciones y además se vaciarán todas las caches.

Tienes que tener en cuenta que para que los cambios que hagas en cada sección se vean reflejados en tu web, deberás vaciar la caché para poder ver el contenido actualizado.

Aclarado este punto podemos seguir con las configuraciones para optimizar velocidad web. El modo de vista previa es útil si tienes tu web abierta al público y no quieres que una mala configuración ocasiones comportamientos extraños, pero si tu web todavía está en desarrollo y está cerrada a los visitantes no hace falta activar esta opción.

Si te apetece activar la opción vista previa debes hacer clic en el botón Activar y luego cuando hayas terminado de aplicar todas las configuraciones y corroborar que toda tu web funciona correctamente, volver a esta sección y desactivar el modo de vista previa. 

Caché de Página

La sección caché de página permite configurar como se almacenarán las páginas para luego recuperarlas sin tener que volver a cargar scripts y acceder nuevamente a la base de datos, consiguiendo con esto una velocidad de carga significativa y al mismo tiempo reduciendo la carga del servidor.

Cabe recordar que todas estas configuraciones que vas a ver en este tutorial son recomendadas para un hosting compartido de calidad con discos SSD ultra rápidos NVME como es el caso de Webempresa.

Minimizar

Si activas Minify todos los caracteres que no se utilizan en los archivos HTML, Javascript y CSS que suelen ser espacios en blanco se eliminan poniendo todo el código en una solo linea haciéndolo más pequeño y en consecuencia la carga del mismo es mucho más rápida.

Ahora bien dependiendo de los plugins y temas que utilices puede que el minimizado sea contraproducente. Es por eso que deberás experimentar y revisar página por página de tu sitio para detectar posibles errores.

Si no encuentras fallos entonces tus plugins y temas son compatibles con el minimizado y podrás disfrutar de sus beneficios con una cargas más rápida de tus páginas.

Opcode Cache

Opcode Cache generalmente suele aparecer como no disponible porque se configura de forma automática a nivel servidor, como es el caso de Webempresa por lo tanto aquí lo dejamos como se muestra en la imagen ya que no es necesario para optimizar velocidad web.

Cache Base de Datos

La caché de base de datos ayuda a liberar recursos de tu hosting para ser más preciso del servidor MySQL donde se alojan las base de datos de nuestra web, almacenando las consultas repetitivas que devuelven los mismos resultados una y otra vez, para que la próxima vez que se acceda a la misma información el acceso sea más rápido sin que pasar nuevamente por el servidor MySQL.

Dependiendo de la configuración de tu hosting puede ralentizar más la carga de tus páginas, siempre puedes enviar un ticket al soporte y preguntar si te aconsejan habilitarla o si está disponible.

Si estás utilizando Webempresa esta opción es mejor dejarla desactivada.

Object cache

Aquí también dejamos desactivada esta opción como se muestra en la imagen superior. Lo que hace esta opción es almacenar todo lo que se le cruce por el camino que sea repetitivo para luego acceder a ellas con el menor número de consultas a la base de datos.

Si estás utilizando Webempresa esta opción es mejor dejarla desactivada.

Caché del navegador

La caché del navegador guarda una copia de las páginas en el navegador del usuario, por ejemplo HTML, CSS, JS para que cuando la vuelva a visitar el acceso a la misma sea mucho más rápido.

CDN

Aquí de momento no vamos a configurar un CDN ya que estas opciones están disponibles con la versión Pro de W3 Total Cache, esto será materia de otro artículo que estoy preparando. Pero si puedo decirte de que se trata esta sección.

Un CDN (Content Delivery Network) o mejor dicho (Red de distribución de contenidos) lo que hace es realizar copias de todos los contenidos estáticos de tu web para distribuirlos en multitud de servidores ubicados en lugares estratégicos de todo el mundo, para que el accesos a esos contenidos sean más rápidos.

¿Cuál sería la ventaja? Pues muy simple, si tu web está alojada en España y un usuario que es de los Estados Unidos está visitando tu web, en vez de servirle los contenidos desde el servidor de origen (en este caso del ejemplo es España), esos mismos contenidos se servirían desde un servidor en Estados Unidos porque la distancia es más corta y en consecuencia el acceso es más rápido. Optimizar velocidad web con un CDN como CloudFlare es una buena opción.

Proxy Inverso

Un proxy inverso permite que el servidor procese las solicitudes antes de que WordPress las procese. En un hosting compartido, no utilizarás esta configuración.

Aquí no tocamos nada. Si quieres activarlo deberías comunicarte con tu proveedor de hosting para que lo habiliten si es que lo tienen disponible y probar si realmente te vale la pena. Lo malo de la tecnología vía varnish es que no admite tráfico SSL.

User Experiencie (Experiencia del usuario)

Statistisc (Estadísticas)

Fragment Cache (Fragmentos de caché)

Aquí no tocamos nada. El fragmento de caché sirve para almacenar diferentes partes de una página como por ejemplo un sidebar (barra lateral), Footer (pie de página) o un Header (encabezado) esto no está disponibles en todos los temas o plantillas.

Licencias

Aquí no tocamos nada. Si quieres comprar la versión Pro de W3 Total Cache debes colocar la clave de licencia para validar tu instalación y de esta manera se activen todas la funciones Pro.

Varios

Debug

Aquí no tocamos nada. Si activas el modo Debug se mostrará información sensible en el front-end de tu sitio que estará a la vista de todos.

Habilita esta opción cuando tengas que localizar algún tipo de fallo y siempre hacerlo con la web en modo mantenimiento para que no sea accesible al público, hasta que soluciones la incidencia.

Importar/Exportar Ajustes

Este es el último apartado de de la sección "Ajustes generales", pero no menos importante porque aquí podrás exportar toda esta configuración que hicimos hasta el momento y guardarla en tu ordenador como copia de seguridad o para aplicarla a otro sitio web importando la misma con un par de clics.

Caché de Página

Ahora toca el turno de la sección Caché de Página para optimizar velocidad web, pero es diferente a la de Ajustes generales, porque aquí haremos una configuración más fina y detallada. ¡Manos a la obra!

General

Aliases

Precarga de cache

Esta sección es muy importante para  optimizar velocidad web porque le estamos diciendo a W3 Total Cache que precargue todas las páginas de nuestro sitio web con un intervalo de 900 segundos (15 minutos) para que el acceso a las mismas sea inmediato.

Para que se guarde una página en el caché; primero un usuario tiene que visitarla, la segunda vez que acceda a esa misma página la carga será inmediata.

Pero al configurar la precarga ya no hace falta que un usuario visite una página para que se guarde en caché porque ya estará previamente almacenada para que el acceso sea inmediato y cada 15 minutos o 900 segundos esa caché se volverá a precargar.

URL del mapa del sitio: Aquí se le indica a W3 Total Cache todas las páginas que tiene que precargar con el sitemap (mapa del sitio). Para utilizar esto tienes que tener instalado el Plugin YOAST SEO.

Activando la opción (Preload the post cache publish events) cada vez que actualizamos o creamos una página la precarga del caché se hará nuevamente con los nuevos contenidos.

Política de vaciado: Page, Cache, CDN

El resto de las opciones debes mantenerlas desactivadas como se muestra en la imagen superior.

Cuándo creas una publicación o actualizas tus contenidos los nuevos cambios no se verán reflejados hasta vaciar la caché, es por eso que esta sección podemos indicar a W3 Total Cache cuando tiene que vaciar las caches en determinadas circunstancias de forma automática para optimizar velocidad web lo mejor posible.

REST API

Avanzado

Si estás utilizando cualquier plugin de la familia Thrive Themes como por ejemplo: Thrive Architect debes tener en cuenta unos parámetros especiales configurados previamente para que no se aplique el minimizado y evitar comportamientos erráticos en el editor y el resto de complementos. 

Como puedes apreciar en la imagen superior, solo hay que añadir la siguiente línea en el cuadro de texto Never cache pages tht use these custom fields: tve=true con este parámetro le estamos indicando a W3 Total Cache, que nunca guarde en caché las páginas que utilizan el campo personalizado tve=true. ¡Eso es todo!

Minimizar

Ahora toca el turno de la sección Minimizar, pero es diferente a la de Ajustes generales, porque aquí haremos una configuración más fina y detallada como la que hicimos en Caché de página para optimizar velocidad web. ¡Pues al lío!

General

HTML & XML

JS

CSS

Avanzado

Si estás utilizando cualquier plugin de la familia Thrive Themes como por ejemplo: Thrive Architect debes tener en cuenta unos parámetros especiales configurados previamente para que no se aplique el minimizado y evitar comportamientos erráticos en el editor y el resto de complementos. 

Como hemos visto en la sección caché de página aquí también aquí hay que hacer un pequeño ajuste, debes añadir las siguientes líneas en el cuadro de texto Never minify the following JS files (Nunca minimice los siguientes archivos JS):

Con estas líneas le estamos indicando a W3 Total Cache, que nunca minimice los archivos js (Java Script) del editor de Thrive Architect ¡Eso es todo!

Si estás utilizando el plugin de e-commerce WooCommerce deberías hacer otros ajustes para no tener inconvenientes con los estilos CSS. ¿Sabías qué Theme Builder es compatible con el plugin de carrito de compras llamado WooCommerce? aquí te dejo más información no te lo pierdas es increíble: WooCommerce + Thrive Theme Builder

Debes añadir las siguientes líneas en el cuadro de texto Never minify the following CSS files (Nunca minimice los siguientes archivos CSS):

Con esta línea le estamos indicando a W3 Total Cache, que nunca minimice los archivos CSS (Hoja de estilos en cascada) del plugin WooCommerce. ¡Eso es todo!

Cache Base de Datos

Ahora toca el turno de la sección Cache Base de Datos para optimizar velocidad web pero es diferente a la de Ajustes generales, porque aquí haremos una configuración más fina y detallada como la que hicimos en Minimizar. ¡Pues a mojarse!

IMPORTANTE: Si tienes Cache Base de Datos desactivada en "Ajustes generales"... ¿Te acuerdas al principio del tutorial? Entonces aquí no hace falta tocar nada.

General

Avanzado

Cache de Objetos

Ahora toca el turno de la sección Cache de Objetos para optimizar velocidad web pero es diferente a la de Ajustes generales, porque aquí haremos una configuración más fina y detallada. ¡Seguimos adelante!

IMPORTANTE: Si tienes Cache de Objetos desactivada en "Ajustes generales"... ¿Te acuerdas al principio del tutorial? Entonces aquí no hace falta tocar nada.

Avanzado

Caché del Navegador

Ahora toca el turno de la sección Caché del Navegador para optimizar velocidad web pero es diferente a la de Ajustes generales, porque aquí haremos una configuración más fina y detallada. ¡Venga que ya lo tienes!

General

CSS & JS