Configurar WordPress con W3 Total Cache y CloudFlare CDN en LAMP

Esta guía te mostrará cómo aumentar la velocidad de carga del sitio web de WordPress con el plugin W3 Total Cache y una cuenta gratuita de CloudFlare CDN. En este tutorial, el sistema CMS de WordPress está instalado sobre un stack LAMP (Linux + servidor HTTP Apache + RDBMS MariaDB y PHP) en una máquina virtual autohospedada Debian 9, pero el mismo procedimiento se puede aplicar con algunos cambios menores en cualquier sitio web de WordPress, ya sea que esté desplegado en un servidor dedicado, un VPS o en un entorno de alojamiento compartido.

REQUISITOS

• Un sitio web de WordPress disponible en un dominio público registrado. En caso de que desees desplegar tu propio sitio web de WordPress sobre un stack LAMP, deberías considerar leer las instrucciones de este tutorial: https://www.howtoforge.com/tutorial/install-wordpress-on-lamp-in-debian-9/
• Plugin W3 Total Cache instalado y activado en WordPress
• Una cuenta gratuita de CloudFlare

Nota Inicial:

En caso de que tu sitio web de WordPress esté instalado en un servidor dedicado sobre un stack LAMP, lo primero que necesitas verificar es si puedes instalar nuevos plugins desde el panel de WordPress sin un servidor FTP instalado localmente. Si se te solicita ingresar una cuenta FTP para instalar nuevos plugins, entonces necesitas habilitar el método de escritura del sistema de archivos directo de WordPress. Para habilitar esta función de WordPress, abre el archivo wp-config.php ubicado en el directorio raíz de tu sitio web y agrega la siguiente línea de código en cualquier parte del contenido del archivo.

define('FS_METHOD', 'direct');

También puedes ejecutar el siguiente comando para lograr lo mismo, sin actualizar manualmente el archivo wp-config.php, como se ilustra en la captura de pantalla a continuación.

echo "define('FS_METHOD', 'direct');" | tee -a /path/to/website/wp-config.php

Antes de configurar el plugin W3 Total Cache con CloudFlare CDN, visita el sitio web de GTmetrix en el siguiente enlace https://gtmetrix.com y realiza una prueba de rendimiento para tu dominio con el fin de comparar los resultados después de la integración del CDN.

Parte 1 - Instalar W3 Total Cache

• Para instalar el plugin W3 Total Cache, inicia sesión en el panel de WordPress y haz clic en el enlace Plugins -> Agregar Nuevo. En el campo de búsqueda, escribe W3 Total Cache y haz clic en el botón Instalar Ahora para comenzar el proceso de instalación, como se ilustra en la siguiente imagen.

• Después de que el plugin W3 Total Cache haya terminado de instalarse, haz clic en el botón Activar el plugin W3 Total Cache para activar el plugin.**

Parte 2 – Configurar el Plugin W3 Total Cache

1. Para configurar el plugin W3 Total Cache, navega al panel de WordPress y ve a Plugins -> Plugins Instalados en el menú de la izquierda y haz clic en el enlace Configuración del W3 Total Cache para comenzar el proceso de configuración.

2. Luego, dirígete a Configuración General y habilita la opción Cache de Página. Usa el método de caché de página Disco: Mejorado y desplázate hacia abajo para pasar a la siguiente opción.

3. A continuación, desplázate hacia abajo y desactiva Minificar, Caché de Base de Datos y Caché de Objetos, porque CloudFlare CDN se encargará de minificar los archivos javascript, CSS y HTML de tu sitio web y también proporcionará su propio mecanismo de caché.

Deberías desactivar la Caché de Base de Datos en caso de que el sitio web de WordPress esté instalado en un entorno de alojamiento compartido.

4. A continuación, desplázate hacia abajo y habilita la Caché del Navegador como se ilustra en la imagen a continuación.

5. Desplázate hacia abajo y desactiva la opción CDN y Proxy Inverso, luego dirígete a la pestaña Varios y habilita la siguiente opción: Verificar reglas de reescritura. Asegúrate de desactivar todas las demás opciones como se presenta en la imagen a continuación.

6. A continuación, desplázate hacia abajo y desactiva todas las opciones de Depuración. Finalmente, haz clic en el botón Guardar todos los ajustes para aplicar la configuración. Además, aquí tienes la opción de exportar la configuración del plugin W3 Total Cache o restablecer el plugin a la configuración predeterminada en caso de que algo salga mal.

7. Las siguientes configuraciones cubrirán la opción Cache de Página en el menú de la izquierda. Ve a la pestaña General y habilita las siguientes opciones como se ilustra en la captura de pantalla a continuación.

• Cache de la página principal

• Cache de feeds: sitio, categorías, etiquetas, comentarios

• Cache de solicitudes SSL (https)

• No cachear páginas para usuarios conectados

• No cachear páginas para los siguientes roles de usuario: Administrador, Editor, Autor, Colaborador y Suscriptor.

8. A continuación, desplázate hacia abajo y habilita la opción Cache de nombres de host alias. Escribe todos tus alias de sitio web (con o sin www) en URLs adicionales de inicio y desplázate hacia abajo para pasar a la siguiente opción.

9. En la pestaña Pre-carga de Caché, habilita Pre-cargar automáticamente la caché de página. No cambies los valores de Intervalo de actualización y Páginas por intervalo. Además, deberías agregar un mapa del sitio XML para el sitio web. Asegúrate de habilitar la opción Pre-cargar la caché de publicaciones en eventos de publicación.

10. A continuación, desplázate hacia abajo y habilita las opciones Página principal, Página de publicaciones, Feed del blog, Páginas de comentarios de publicaciones y rss2 de la pantalla de Política de Purga: caché de página como se describe en la imagen a continuación.

11. Finalmente, desplázate hacia abajo a la pestaña Avanzada y habilita solo la opción Modo de compatibilidad. Deja todas las demás opciones como predeterminadas y haz clic en el botón Guardar todos los ajustes para aplicar los cambios realizados hasta ahora.

12. A continuación, navega al menú Caché del Navegador y en la pestaña General asegúrate de habilitar las siguientes opciones como se presenta en la captura de pantalla a continuación.

• Establecer encabezado last-Modified

• Establecer encabezado de expiración

• Establecer encabezado de control de caché

• Establecer etiqueta de entidad

• Establecer encabezado de W3 Total cache

• Habilitar compresión HTTP gzip

13. Continúa desplazándote hacia abajo y habilita las siguientes opciones para las pestañas CSS & JS, XTML & XML y Media & Otros Archivos como se describe a continuación:

• Establecer encabezado last-Modified

• Establecer encabezado de expiración

• Establecer encabezado de control de caché

• Política de Control de Caché establecida en cache con max-age y validación (“max-age=EXPIRES_SECONDS, public, must-revalidate, proxy-revalidate”)

• Establecer etiqueta de entidad (ETag)

• Establecer encabezado de W3 Total cache

• Habilitar compresión HTTP gzip

14. Finalmente, haz clic en el botón Guardar todos los ajustes para aplicar la configuración del plugin W3 Total Cache. Sin embargo, deberías ajustar la configuración del plugin W3 Total Cache y realizar pruebas para determinar las mejores opciones para tu sitio web.

Parte 3 – Configurar CloudFlare CDN

15. Para activar el plugin CloudFlare en WordPress, navega a Rendimiento -> Extensiones - CloudFlare y haz clic en el enlace Activar como se ilustra en la siguiente imagen.

16. Para configurar el plugin CloudFlare, haz clic en el enlace Configuración del menú de Extensiones como se presenta en la captura de pantalla a continuación.

17. CloudFlare es un servicio de red de entrega de contenido (CDN) que actúa como un acelerador proxy inverso para sitios web. Entre otras características, algunas de las cuales tendrás que pagar, CloudFlare ofrece servicios de DNS y seguridad integrada para sitios web en caché. Para integrar un sitio web a CloudFlare CDN, todo lo que necesitas hacer es registrarte para obtener una cuenta gratuita en el siguiente enlace https://www.cloudflare.com/a/login y agregar tu dominio a sus redes como se ilustra en la captura de pantalla a continuación.

18. Espera aproximadamente un minuto para que CloudFlare escanee los registros DNS de tu dominio y haz clic en el botón Continuar para pasar a la pantalla de registros DNS. En la pantalla de registros DNS detectados, verifica si todos tus registros de dominio han sido descubiertos. Si todos tus registros DNS están presentes en la lista, haz clic en el botón Continuar para proceder. Usa las capturas de pantalla a continuación como guía.

19. A continuación, necesitas elegir un plan de CloudFlare para tu dominio y hacer clic en el botón Continuar para pasar a la siguiente pantalla. En este tutorial, elegiremos un plan de sitio web gratuito.

20. En la siguiente pantalla, anota los servidores de nombres DNS de CloudFlare y actualiza los servidores de nombres de tu dominio en consecuencia. Necesitas iniciar sesión en el panel de tu registrador de dominios para cambiar los servidores de nombres de tu dominio y los nuevos registros deben actualizarse lo más rápido posible. Los servidores de nombres de dominio deben apuntar exactamente a los servidores de nombres de CloudFlare y no a otros registros ns. Cuando termines, haz clic en el botón Continuar para finalizar el proceso de integración. Sin embargo, puedes hacer clic en el botón Continuar y actualizar los registros ns de DNS en tu registrador más tarde.

21. Después de haber modificado los servidores de nombres de tu dominio, haz clic en el botón Revisar Servidores de nombres para forzar el proceso de activación. La propagación de DNS del dominio en la nube de internet puede tardar hasta 24 horas en completarse. Sin embargo, durante este tiempo, tu sitio web no se verá afectado de ninguna manera. ¡Sin tiempo de inactividad!

22. A continuación, navega al panel web de CloudFlare y haz clic en el botón del menú Velocidad. Aquí, habilita la opción Auto Minify para JavaScript, HTML y CSS como se ilustra en la imagen a continuación. Esta configuración comprimirá todos los archivos javascript, CSS y HTML para reducir su volumen y entregarlos más rápido a los navegadores de los clientes finales.

23. Desplázate hacia abajo y habilita el modo Automático para Rocket Loader como se ilustra a continuación.

24. A continuación, haz clic en el botón Crypto y establece la encriptación SSL en Completo. Luego, ve a la pantalla principal para obtener la clave API y activar la extensión de CloudFlare de WordPress. Haz clic en el enlace Obtener tu clave API, selecciona Clave API Global y haz clic en el botón Ver clave API. Debería abrirse una nueva ventana emergente. Copia la cadena de la clave API del portapapeles y cierra la ventana emergente.

25. Regresa al sitio web de WordPress y ve a Rendimiento -> Extensiones -> CloudFlare y haz clic en el enlace Configuración. En la pantalla de CloudFlare, haz clic en el botón Autorizar y agrega la dirección de correo electrónico con la que te registraste en CloudFlare y la clave API que copiaste de la clave API Global. Cuando termines, haz clic en el botón Siguiente para continuar.

26. Selecciona tu zona de dominio y haz clic en el botón Siguiente para finalizar el proceso de autorización. Luego, puedes comenzar a gestionar la configuración de CloudFlare CDN para tu dominio a través del plugin CloudFlare en WordPress.

27. Si ya has actualizado los registros ns de DNS en tu registrador, puedes esperar unas horas y luego iniciar sesión en el panel de CloudFlare. El sitio web debería estar activado con éxito en CloudFlare.

Espera unos días para que el servicio CDN de CloudFlare almacene en caché completamente el contenido de tu sitio web y analiza nuevamente la velocidad de tu sitio web en https://gtmetrix.com. Compara los resultados con el informe inicial para determinar el beneficio de rendimiento proporcionado por CloudFlare CDN.