Sigue este blog vía RSS, en el Fediverso en @acambronero@www.blogpocket.com, o vía email.

You don’t speak Spanish? Explore a selection of Blogpocket posts in English

Instrucciones para configurar WP Rocket con CloudFlare

INSTRUCCIONES-CONFIGURAR-WP-ROCKET Instrucciones para configurar WP Rocket con CloudFlare

He venido recomendando mucho el plugin de WordPress WP Rocket últimamente.

Aunque es de pago (39 dólares), en todas mis pruebas, con WP Rocket he logrado rebajar bastante el tiempo de carga de las páginas de Blogpocket y resolver gran parte de los errores que arrojan herramientas como GTMetrix y Pingdom.

Pero, es cuando lo combinas con Cloudflare cuando se obtienen mejores resultados con WP Rocket.

Así que eso es lo que te voy a explicar en este artículo. Te voy a dar las instrucciones concretas y precisas para que configures WP Rocket y Cloudflare, con el fin de optimizar la velocidad de tu blog.

Como verás, todo ello es muy fácil y sin ningún conocimiento de desarrollo Web podrás realizar la «WPO» (Web Performance Optimization» sin complicaciones.

gtmetrix-blogpocket-dic-2020-300x130 Instrucciones para configurar WP Rocket con CloudFlare

Los tiempos de carga son importantes pero también lo es conseguir aumentar el «crawl budget» o cantidad máxima de páginas de un sitio Web que Google es capaz de rastrear en un determinado periodo de tiempo. Lee, por favor: Qué son «WPO» y «crawl budget», y cómo puedes optimizar la velocidad de tu blog sin ser un experto en desarrollo Web.

Acerca de la medición de tus tiempos de carga

Para ver cuáles son los beneficios de WP Rocket en el rendimiento de tu blog y probar el efecto que causan las distintas opciones mi consejo es que utilices GTmetrix y PageSpeed Insights.

Qué hace exactamente WP Rocket

Lo que hace WP Rocket básicamente es lo siguiente:

  • Pone en memoria cache todas las páginas, para acelerar sus visualización
  • Precarga la caché de los archivos, usando dos bots en Python
  • Reduce el número de peticiones HTTP para reducir el tiempo de carga
  • Disminuye la utilización de ancho de banda gracias a la compresión GZIP
  • Gestión de los headers (expires, etags…)
  • Minificación y concatenación de archivos JS y CSS
  • Carga diferida de imágenes (LazyLoad – carga perezosa)
  • Carga diferida de archivos JavaScript

Qué ventajas tiene WP Rocket

La principal ventaja de WP Rocket es su facilidad de configuración, algo que no es tan evidente en otros plugins como mi segunda opción W3 Total Cache. Sin embargo, lo cierto es que es sumamente eficaz.

En mi artículo Herramientas para optimizar WordPress y mejorar rendimiento y seguridad he preparado un kit básico compuesto de las herramientas más fáciles de configurar para que puedas construir un blog rápido y seguro. En dicho kit se incluye, por supuesto, el plugin WP Rocket.

Veamos, en detalle, qué problemas relacionados con la optimización de la velocidad de un sitio Web, resuelve WP Rocket.

La mayoría de estos problemas son los que aparecen en herramientas como Google Page Speed (o GTMetrix que proporciona una puntuación basada en Lighthouse). Pero no hay que obsesionarse con intentar obtener la mayor puntuación en estas herramientas. Sobre todo, porque muchas veces los errores o problemas vienen provocados por recursos externos (plugins o servicios instalados de terceros).

Para realizar un análisis como el que se muestra en Cómo optimizar un blog para móviles (caso práctico), se han empleado los test de GTMetrix y Pingdom. Pero hay que tener en cuenta que estos tests no son exactos. Sus resultados son orientativos pues dependen de muchos factores. Pingdom ofrece valores diferentes, según el servidor desde donde se realice y si se ejecuta, varias veces seguidas, sobre el mismo servidor, arroja resultados similares pero diferentes. Lo mejor, es repetir el test y obtener un promedio.

[Tweet «Me gusta este post con las instrucciones para configurar WP Rocket y CloudFlare»]

Para empezar

Para una introducción en la configuración de WP Rocket, aquí tienes un vídeo oficial que muestra cómo se configura WP Rocket:

Cómo configurar WP Rocket

En WP Rocket, plugin para optimizar WordPress y ponerlo en un cohete puedes encontrar una introducción bastante completa de este plugin.

A continuación, vamos a especificar con todo lujo de detalles, la configuración concreta que te servirá para optimizar tu blog.

Se muestran capturas de la configuración ideal de WP Rocket, aunque se debe probar el funcionamiento del blog tras cada cambio en tu configuración. Recuerda limpiar la caché tras cada cambio en la configuración. Hay modificaciones que pueden afectar al theme, como la minificación CSS.

Configuración básica de WP Rocket

En la siguiente captura se muestra la configuración básica de WP Rocket. En ella no hay ninguna opción obligatoria.

La opción de WP Rocket que más de todas impulsará la velocidad de tu blog es el sistema de almacenamiento en caché de las páginas, pero esta función se inicia automaticamente cuando activas eel plugin. Además de eso, WP Rocket añade al archivo «htaccess», en el instante de la activación, las reglas óptimas de rendimiento (compresión GZIP, la caché del navegador, etc.) El resto de opciones son opcionales.

Son aconsejables, las opciones de «Lacy Load» (carga perezosa de las imágenes) y la de caché para dispositivos móviles, siempre y cuando el theme de tu blog sea responsive.

La minificación también es opcional y no afecta tanto a la velocidad de carga de las páginas, aunque sí mejora las notas de GTMetrix. Aquí puedes cómo resolver problemas con la minificación: Solucionar problemas con la minificación.

WP-ROCKET-OPCIONES-BASICAS Instrucciones para configurar WP Rocket con CloudFlare
Configuración básica de WP Rocket

Si observas problemas tanto en «Lacy Load» puedes especificar esta opción a nivel de post/página concreta de WordPress.

Respecto a la minificación/combinación de HTML, JavaScript y CSS, también puedes suprimirla para determinados archivos, dentro de la configuración de WP Rocket (sección «Archivos a excluir minimización» en la pestaña de opciones avanzadas)

Opciones avanzadas

Veamos seguidamente una captura de la configuración avanzada.

WP-ROCKET-OPCIONES-AVANZADAS Instrucciones para configurar WP Rocket con CloudFlare
Configuración avanzada de WP Rocket

En esta pestaña te aconsejo lo siguiente:

  • Activar la opción «Remove query strings from static resources» porque mejora la nota de GTMetrix.
  • Respecto a mover la carga de los ficheros JavaScript a pie de página, se trata de una operación que también mejora la nota de GTMetrix pero es necesario ejecutarla con mucho cuidado. Trasladar los archivos JavaScript puede romper el theme. Es una acción de índole avanzada y, aunque puedas obtener una mejora en los tiempos de carga, siempre puede haber algún plugin de los que hayas instalado que ponga los JavaScript en la cabecera.

En el siguiente vídeo oficial, se explica qué es la «Precarga de peticiones DNS», una opción útil si estás cargando recursos de terceros, como Google Fonts o un vídeo de YouTube, ya que la resolución DNS habrá ya sido realizada al momento de la petición de dichos recursos.

Base de datos

Esta pestaña se usa para optimizar la Base de Datos de WordPress.

En este apartado no te ofrezco captura, porque puedes limitarte a activar todas las opciones. Elige «Mensual» en el desplegable «Frecuencia» para realizar una limpieza automática todos los meses.

Con WP Rocket puedes ahorrarte la instalación de un plugin como «WP Optimize» que realiza una función similar al mantenimiento de la Base de Datos. Es el momento de que eches un vistazo al siguiente artículo: Mantenimiento de WordPress: la guía definitiva para cuidar tu blog.

Precarga de la caché

La precarga de la caché de WP Rocket es una de las características más útiles. Esto hace que las páginas estén siempre almacenadas en caché; y, de esa forma, los usuarios de tu blog o los motores de búsqueda no se ven obligados a generar ellos la caché.

Para ello, WP Rocket usa unos crawlers alojados en sus servidores para precargar la caché. Se garantiza así, un menor consumo de CPU en tu servidor. La función de los crawlers de WP Rocket es simular una visita a tu blog para crear los archivos de caché.

Te aconsejo:

    • La pregarga automática que implica su activación siempre que añadas o actualices un contenido en tu blog.

Usar el sitemap, porque así podrás precargar todos los URLs contenidos en los archivos de tu sitemap, y no solamente la página principal y los enlaces que se encuentran ahí.

WP-ROCKET-PRECARGA Instrucciones para configurar WP Rocket con CloudFlare
Configuración de la precarga en WP Rocket

CloudFlare

Cloudflare es un servicio gratuito que mejora tanto la velocidad como la seguridad de tu blog.

Con SiteGround, puedes activarlo y administrarlo desde el panel de control CPanel. Además, los clientes de este servicio de almacenamiento Web podemos tener un sitio HTTPS conectado a CloudFlare sin necesidad de contratar la versión de pago de éste.

Sobre CloudFlare tienes una introducción aquí: Velocidad y seguridad de tu blog: cómo mejorar con CloudFlare.

Configuración de CloudFlare

Con SiteGround es muy fácil la configuración de CloudFlare.

Simplemente, activa tu cuenta desde CPanel y haz clic en «Administrar»

En la pestaña «Ajustes» activa las opciones que se muestran en la siguiente captura.

CLOUDFLARE-CONFIGURACION Instrucciones para configurar WP Rocket con CloudFlare
Configuración de CLoudFlare desde CPanel.

Es de destacar:

  • Nivel de la caché de CloufFlare. Poner en «agresivo» para mayor beneficio en prestaciones. pero puedes probar con las distintas posibilidades y comprobar resultados con Pingdom.
  • Modo de desarrollo. Úsalo si estás haciendo cambios en tu blog y no quieres que la caché funciones mientras los efectúas.
  • Ajustes de seguridad de CLoudFlare. Siempre en «Alto» por si acaso.
  • Siempre oline. Significa que si tu servidor se cae, CloudFlare mostrará a tus visitantes una página de la caché.
  • Parámetros de Ofuscación de correo electrónico. Las direcciones de correo electrónico solo serán visibles para los humanos.
  • Auto Minify (optimización web). Puedes eliminar esta opción si ya la tienes activa en WP Rocket y viceversa. La minificación, como ya se ha visto, supone eliminar caracteres innecesarios de los archivos JavaScript y CSS, generando archivos más pequeños.
  • Railgun. Implica una optimización en la comunicación entre CloufFlare y los servidores de SiteGround.
  • SSL. Si tu blog es HTTPS, será compatible con CloudFlare sin necesidad de realizar más ajustes.

Integración de WP Rocket y CloudFlare

Para integrar WP Rocket y CloudFlare activa la pestaña de éste yendo a «CDN»

Una vez veas la pestaña «CloudFlare», encuentra primero la API de éste. Para ello, ve a CLoudFlare y en la pantalla principal, haz clic en «Get your API key». Desplázate hacia abajo y verás tu clave API global. Después, pega ese valor en WP Rocket (ver imagen siguiente).

WP-ROCKET-CLOUDFLARE Instrucciones para configurar WP Rocket con CloudFlare
Configurar CloudFlare en WP Rocket

Conclusiones

Lo que podrías hacer primero es:

  1. Instalar WP Rocket sin modificar ninguna de sus opciones de configuración que hemos mostrado en las capturas de este artículo.
  2. Conectar tu blog a CloudFlare.
  3. Añadir la pestaña «CloudFlare» a WP Rocket, yendo a la pestaña «CDN». Escribir la clave de la API de CloudFlare y guardar los cambios.
  4. Limpiar la caché.
  5. Medir con Pingdom el tiempo de carga.

Posteriormente, ve añadiendo opciones a WP Rocket, tratando de mejorar el tiempo de carga y las notas de GTMetrix.

Pero ten en cuenta que lo importante es reducir al máximo el tiempo de carga, para lo que es preciso realizar otras optimizaciones (imágenes, código del theme, tiempos de respuesta del servidor, etc. etc.), tal como se explica en Herramientas para optimizar WordPress y mejorar rendimiento y seguridad y Cómo he conseguido que mi blog cargue en menos de 3 segundos en móviles y escritorio.

Aclaración: En este artículo se han utilizado las capturas de WP Rocket traducidas de The Ideal WP Rocket Settings With Cloudflare + MaxCDN Instructions (#1 Rated Cache Plugin And Ridiculously Fast). Todas las funciones de WP Rocket + CLoudFlare han sido probadas, comprobando las mejoras que provocan en varios blogs, entre ellos Blogpocket.com, a nivel de velocidad y optimización del rendimiento. Pero en tu blog podrían funcionar de otra manera. Asegúrate de que tu blog, al instalar y configurar WP Rocket, no sufre problemas como desajustes en el theme, retardos, consumo excesivo de CPU, etc.

¿Estás buscando hosting?
SiteGround es el hosting de Blogpocket ¡pruébalo!:SITEGROUND-EL-HOSTING-QUE-ME-GUSTA Instrucciones para configurar WP Rocket con CloudFlare
Responder en Mastodon (requiere usuario en esa plataforma)

Puedes usar tu cuenta de Mastodon para responder a este post de

Copia y pega esta URL (https://www.blogpocket.com/?p=49548) en el campo de búsqueda de la interfaz web de tu servidor Mastodon.

Icono de Mastodon

2 respuestas a «Instrucciones para configurar WP Rocket con CloudFlare»

  1. Buenas tardes, tengo un problema con mi pagina web inmadelvallem anteriormente a instalar el plugin autoptimize con el shortpixel y lo de las cdn iba bien la página pero después ha bajado la rapidez a 24. He desinstalado los plugin pero seguía yendo igual a 24. He instado posteriormente wp rocket pero me sale que posponga la carga de las imágenes en el pagespeed he instalado el lazyload pero no funciona y no las postpone o no es suficiente tardando 14,7 segundos la carga.y tambien me pone Evita cargas útiles de red de gran tamaño Tamaño total: 4335 kB y no sé como quitar esto. por favor me podríais ayudar?Mil gracias un saludo Me ha costado muchísimo posicionar la página y tengo muy buen posicionamiento, ahora no quiero que baje por este motivo. Muchas gracias

    1. Hola Inma; si es una página de WordPress.org lo normal si tienes un buen hosting es que no haga falta el plugin WP Rocket. Desinstálalo y prueba solo con el WPO Pack ideado en Blogpocket. Mira aquí cómo optimizar una web de WordPress según Blogpocket: https://www.blogpocket.com/2018/08/18/wpo-wordpress/ Quita el plugin de LacyLoad también. Lo importante es que te vuelva a funcionar bien la web independientemente de su rendimiento. Luego veremos cómo optimizarlo al máximo. Un saludo :))

Deja una respuesta

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

Información básica sobre protección de datos Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento: No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a GreenGeeks que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir al contenido