Configuración de Cloudflare CDN en WordPress

Cada segundo es crucial para la velocidad de carga de un sitio web. La gente abandonará un sitio web casi inmediatamente si tarda en cargarse más de lo esperado. Esto tiene un impacto en la tasa de rebote, lo que puede resultar en un posicionamiento de motores de búsqueda más bajo.

Afortunadamente, WordPress es un sistema de gestión de contenidos (CMS) muy adaptable que te permite implementar una variedad de mejoras, incluidos plugins de optimización de velocidad como Cloudflare.

cloudflare cdn
Configuración de Cloudflare CDN en WordPress

En esta guía, explicaremos cómo la CDN de Cloudflare puede acelerar la carga de tu sitio web de WordPress y cómo instalar Cloudflare. Además, proporcionaremos instrucciones paso a paso sobre cómo configurarlo para una optimización web efectiva.

¿Qué es la CDN de Cloudflare?

Cloudflare es una red de distribución de contenidos (CDN) ampliamente utilizada. Una CDN entrega el contenido de los sitios web más rápidamente utilizando una colección de servidores en todo el mundo.

Un objetivo de la CDN de Cloudflare es mejorar la velocidad de carga de un sitio web. Mantiene múltiples copias de datos de tu sitio web en servidores proxy en todo el mundo.

Esto significa que cuando las personas quieren acceder a tu contenido, la solicitud se envía a los servidores más cercanos a ti para que puedan procesarlo de inmediato.

La CDN de Cloudflare también protege a sus clientes y empresas de posibles ataques DDoS. Además, ocultará tus servidores de nombres, también conocidos como nameservers, de las herramientas de búsqueda de registro de dominios (WHOIS).

¿De qué manera Cloudflare puede ayudar a tu blog de WordPress?

Algunas de las principales ventajas de usar Cloudflare para tu sitio web de WordPress son las siguientes:

  • Respuesta rápida: Edge Computing es responsable de transferir datos de un servidor a otro. Esta característica mejora la experiencia general del usuario al reducir el tiempo de espera de los visitantes de tu sitio.
  • Protección del sitio web: el panel de control de Cloudflare permite a los usuarios ajustar las configuraciones de seguridad del sitio web para bloquear posibles amenazas en línea. Un cortafuegos de aplicaciones web (WAF) y la protección DDoS son algunas de las funciones de seguridad.
  • Certificado SSL: el software Secure Socket Layer, también conocido como certificado SSL, protege los datos de los sitios web, permitiendo que solo computadoras o navegadores autorizados puedan acceder a ellos. Para proteger la información y las transacciones de los clientes, los propietarios de sitios de WordPress pueden obtener una certificación SSL de Cloudflare. Los usuarios pueden luego elegir el cifrado SSL flexible o completo de Cloudflare según su nivel de seguridad.
  • Optimización automática de la plataforma: la optimización automática de Cloudflare ayuda a mejorar el rendimiento general de tu sitio de WordPress. El proceso incluye la purga automática de la caché de WordPress durante las actualizaciones del sitio web y la modificación del tamaño de las imágenes.

Configurar Cloudflare para WordPress

La instalación de Cloudflare en un sitio de WordPress es simple y rápida. Puedes hacerlo por ti mismo o por tu proveedor de alojamiento.

Puedes contratar tu plan gratuito para instalar Cloudflare manualmente.

Para instalar esta CDN de WordPress en tu sitio web, sigue los siguientes pasos:

1. Establece tu propia cuenta de Cloudflare

Registrarse es sencillo y toma sólo minutos. Sólo debe asegurarte de que la URL de tu sitio de WordPress esté preparada. Antes de continuar, verifica tu dirección de correo electrónico.

imagen 69
Configuración de Cloudflare CDN en WordPress

2. Configura el nombre de dominio en Cloudflare.

Se debe acceder al panel de control de Cloudflare. Selecciona el botón «Agregar sitio».

agregar sitio cdn
Configuración de Cloudflare CDN en WordPress

Incluye la URL de tu página de WordPress. Incluso en la versión gratuita, Cloudflare permite a los usuarios agregar tantos sitios web como quieran. Si no estás seguro de cómo hacerlo, haz clic en la opción «Ruta de aprendizaje».

imagen 70
Configuración de Cloudflare CDN en WordPress

Selecciona ahora tu plan. Elige la versión gratuita si tienes un blog o un sitio web personal. Viene con todas las funciones básicas necesarias para proteger tu sitio web de ataques en línea y aumentar la velocidad de carga.

imagen 71
Configuración de Cloudflare CDN en WordPress

Para obtener las mejores ventajas de rendimiento, las personas que tienen una tienda en línea o un sitio web con mucho tráfico pueden suscribirse a los planes Pro o Business, que van desde 20 a 200 dólares. Las actualizaciones automáticas del sitio web y otras opciones de seguridad están incluidas en los planes premium de Cloudflare.

3. Verifica los registros DNS del nombre de dominio

Cloudflare buscará automáticamente registros DNS comunes y los agregará a tu cuenta después de agregar tu sitio WordPress.

En ocasiones, Cloudflare no puede encontrar todos los registros del sistema de nombres de dominio (DNS). Por lo tanto, debes revisar tus registros DNS.

En primer lugar, revisa sus registros A para asegurarte de que el dominio esté apuntado correctamente. También recomendamos habilitar Cloudflare para las versiones www y sin www de tu sitio mientras revisas tus registros.

Para activar o desactivar Cloudflare para subdominios particulares, haz clic en el botón que se encuentra en el Estado del proxy. Cuando hayas terminado, haz clic en Continuar para seguir con el proceso.

dns cloudflare
Configuración de Cloudflare CDN en WordPress

4. Redirige tu dominio a los servidores de nombre de Cloudflare

Cloudflare te pedirá que cambies el nombre de tu servidor. Copia ambos servidores de nombres de Cloudflare y luego ingresa a tu registrador de dominios.

imagen 72
Configuración de Cloudflare CDN en WordPress

Los pasos para cambiar los servidores de nombre pueden variar ligeramente dependiendo del registrador del dominio.

5. Configura los ajustes de HTTPS

El Protocolo Seguro de Transferencia de Hipertexto, también conocido como HTTPS, es un protocolo de comunicación de internet que garantiza la seguridad de los datos que se transmiten a través de una red informática.

El certificado SSL (Secure Socket Layer) de un sitio WordPress mostrará un candado y https:// en lugar de http:// antes de su URL.

El modo de cifrado SSL/TLS de Cloudflare te ayuda a validar el certificado SSL en tu servidor de origen.

Para configurar la página de configuración HTTPS de Cloudflare y proteger tu sitio de WordPress contra filtraciones de datos potenciales, sigue estos pasos:

1. En el panel de control de Cloudflare, ve a SSL/TLS → Descripción general y selecciona uno de los modos de cifrado SSL/TLS:

  • Flexible: cifra el tráfico entre Cloudflare y los navegadores web. Esta opción es adecuada para sitios de WordPress que no tienen un certificado SSL.
  • Completa: proporciona protección de extremo a extremo desde tu sitio web hasta el servidor del visitante. Esta opción es más adecuada para sitios web WordPress que tengan un certificado SSL autofirmado.
  • Completo (estricto): requiere certificados de origen más rigurosos que el modo completo. Recomendamos esta opción para sitios WordPress que tienen certificados SSL legítimos.
imagen 73
Configuración de Cloudflare CDN en WordPress

2. Ve an SSL/TLS → Certificados Edge y activa HTTPS para convertir todas las solicitudes HTTP a HTTPS. Esta función puede tardar un poco en funcionar, pero una vez que esté activa, verás un icono de candado junto a la URL del sitio.

6. Configura e instala el plugin de Cloudflare para WordPress.

Para completar el procedimiento, debe instalar el plugin de Cloudflare para WordPress. Esta herramienta incluye una variedad de funciones útiles para ayudarte a administrar el CDN, como por ejemplo:

  • Optimización automática de WordPress con un solo clic.
  • Conjuntos de reglas para cortafuegos web (WAF).
  • Purga automática de caché.
  • Informes y estadísticas.
  • Los ajustes incorporados de Cloudflare para una modificación sencilla.

Primero, debes ingresar a tu cuenta de Cloudflare para obtener la clave de la interfaz de programación de aplicaciones (API):

1. En la esquina inferior derecha de tu panel de control de Cloudflare, debes encontrar la API. Para continuar, haz clic en Obtenga el token de la API.

2. Después de ingresar la contraseña de tu cuenta Cloudflare, haz clic en Ver. Para acceder a tu panel de WordPress, copia la clave global de la API.

3. Ingresa a tu panel de control de WordPress y seleccione Plugins. Luego, selecciona Añadir nuevo.

4. Busca el plugin de Cloudflare para WordPress. Actívalo después de instalarlo.  

5. Debes visitar la página de Ajustes y elegir Cloudflare.

6. Selecciona la siguiente opción para obtener tu clave API.

get api
Configuración de Cloudflare CDN en WordPress

Una ventana nueva se abrirá. Se debe ir a la pestaña Tokens de la API y elegir la opción «Ver» para la clave global de la API.

ver api cloudflare
Configuración de Cloudflare CDN en WordPress

7. Después de ingresar tu contraseña de Cloudflare, copia la clave de API proporcionada.

8. Regresa a la página de configuración del plugin y pega la clave de la API en el campo de inicio de sesión. Guarda tus credenciales de API pulsando el botón «Guardar».

Una vez que hayas configurado Cloudflare e iniciado sesión en el plugin de WordPress, verás varias configuraciones:

  • Ajustes optimizados de WordPress: se restablecerán los valores de caché y seguridad, minimización automática y geolocalización de IP al hacer clic en Aplicar la configuración recomendada de Cloudflare. Para mejorar el rendimiento de tu sitio de WordPress, Cloudflare aplicará automáticamente cambios en él.
  • Optimización automática de la plataforma (APO): esta función del plugin de Cloudflare ayuda a mantener copias de seguridad de los datos de tu sitio web para reducir el tiempo de carga del sitio web. Garantiza que los usuarios puedan acceder a tu contenido de forma instantánea. La optimización automática de la plataforma permite a Cloudflare almacenar contenido dinámico y estático en su red Edge.
  • Purgar la caché: el proceso de copiar y almacenar datos de un sitio web en un almacenamiento temporal para un acceso instantáneo se conoce como almacenamiento en caché. La purga de caché significa que Cloudflare borrará todos los datos almacenados para que pueda copiar nuevos datos.
  • Ajustes de velocidad y seguridad: configura funciones para mejorar el rendimiento, como el Modo de desarrollo, el Nivel de seguridad y las Reescrituras HTTPS automáticas.
  • Análisis: utiliza GraphQL para proporcionar datos enriquecidos. El plugin Cloudflare de WordPress también permite el filtrado de datos de varias dimensiones.

Otros aspectos destacados de Cloudflare

Cloudflare tiene muchas ventajas. Estas son algunas de las funciones adicionales que Cloudflare ofrece para sitios de WordPress, tanto gratuitas como de pago.

1. Auto Minify

La función Minificar automáticamente elimina los caracteres innecesarios de los archivos JavaScript, CSS y HTML para mejorar los tiempos de carga de las páginas.

Cloudflare elimina las líneas vacías y los comentarios de los archivos HTML. Cloudflare sólo minificará los archivos almacenados en caché para JavaScript y CSS. Asegúrate de purgar la caché para ver los cambios en tu sitio web de WordPress.

Todas las tarifas de Cloudflare incluyen esta función de optimización. Para activarla, selecciona Velocidad, Optimización y Auto Minify. Luego, selecciona el tipo de archivo que deseas minificar.

2. Brotli

Brotli es una función de compresión que permite transferencias de datos rápidas entre navegadores y servidores. En lugar de enviar palabras clave completas, usa un diccionario.

Brotli comprime imágenes, textos y fuentes utilizando claves para acelerar los tiempos de carga de las páginas. Por lo general, funciona mucho más rápido que la compresión GZIP.

La compresión Brotli es el método de codificación de contenido preferido de Cloudflare para todos los planes. Esta CDN utilizará la compresión GZIP en caso de que su servidor no la admita.

Todas las tarifas de Cloudflare incluyen esta función. Dirigete a Velocidad, Optimización y Brotli en su panel de Cloudflare para activar esta función.

3. Rocket Loader

Rocket Loader muestra el contenido más rápido aplazando la carga del código JavaScript hasta después de mostrar el resto de tu contenido, como textos, imágenes y fuentes.

La función Rocket Loader de Cloudflare mejora principalmente las siguientes métricas de rendimiento de páginas que utilizan JavaScript:

  • Time to First Contentful Paint (TTFCP): indica cuando el usuario puede ver algo en la pantalla durante el tiempo de carga.
  • Time to First Meaningful Paint (TTFMP): mide el tiempo que se tarda en mostrar el contenido principal de una página.

Esta función está disponible para todos los usuarios de Cloudflare. Dirigete a Velocidad, Optimización y Rocket Loader para activar esta función de optimización.

4. Firewall

Una de las funciones de seguridad de Cloudflare es el cortafuegos de aplicaciones web (WAF), que ofrece protección DDoS y ayuda a bloquear posibles ataques en línea.

El WAF protege tu sitio de WordPress utilizando el aprendizaje automático para evitar la toma de control de cuentas, detener las fugas de datos y bloquear los inicios de sesión con credenciales robadas.

Esta función permite a los usuarios de WordPress crear reglas personalizadas para monitorear el tráfico entrante, como filtrar las solicitudes según la ubicación y dirección IP.

Para configurar estos ajustes de Cloudflare, ve a Seguridad WAF y verás cuatro pestañas:

  • Las reglas del cortafuegos: establece reglas específicas para controlar el tráfico entrante según la ubicación, la dirección IP y el agente de usuario.
  • Las reglas de limitación de velocidad: bloquean las direcciones IP de los clientes que superen el límite establecido para proteger tu sitio WordPress del tráfico malicioso.
  • Gestiona las reglas: encuentra y elimina cualquier actividad sospechosa, como las palabras clave comunes en los comentarios de spam.
  • Herramientas: establece reglas para el acceso IP y bloquea usuarios específicos.

La cuenta gratuita de Cloudflare incluye una serie de características de firewall. Sin embargo, la mayoría de ellas requieren el plan Pro, por lo menos.

5. Network

La configuración de red de Cloudflare ayuda a administrar hacia dónde se dirigen los visitantes y qué pueden hacer en tu sitio. Una configuración adecuada puede mejorar el rendimiento significativamente.

Algunas de las principales características de red que debes tener en cuenta son las siguientes:

  • HTTP/2: mejora la forma en que Cloudflare envía las solicitudes y respuestas HTTP para acelerar los tiempos de carga de las páginas.
  • HTTP/3: utiliza QUIC, un nuevo protocolo de transporte que ofrece mayor seguridad y fiabilidad para tu sitio WordPress.
  • Compatibilidad IPv6: habilita IPv6 en todos los subdominios. Si tu servidor de origen tiene registros IPv6, habilita Cloudflare para tus registros AAAA en la configuración DNS.
  • WebSockets: acelera los intercambios de datos dentro de la conexión abierta. Útil para aplicaciones en tiempo real como chats en directo y juegos online.
  • Geolocalización IP: incluye los códigos de país de tus visitantes y asigna las direcciones IP a los países. Esta función es estupenda para sitios web globales con contenido localizado diferente.
  • Tamaño máximo de subida: establece el máximo de datos que los visitantes pueden subir a tu sitio web de Cloudflare en una sola solicitud. El plan gratuito tiene un límite de 100 MB por visitante, pero puedes obtener más con el plan Business o superior.
  • Almacenamiento en búfer de respuestas: permite almacenar en búfer las respuestas del servidor de origen. Cloudflare esperará hasta que todo el archivo esté listo antes de reenviarlo a los visitantes.

La mayoría de las funciones de red son gratuitas, excepto el Búfer de respuesta y el True-Client-IP-Header, que solo están disponibles para los usuarios del plan Business.

6. Configurar las reglas de la página de WordPress

La función de reglas de página permite que Cloudflare implemente configuraciones específicas en tu sitio de WordPress. Cloudflare proporciona alrededor de 37 reglas de página. Algunas están fuera del plan gratuito.

Para configurar las reglas de página de Cloudflare, sigue estos pasos:

1. Visita Reglas, luego Reglas de página y luego haz clic en el botón «Crear regla de página».

2. Agrega la URL de tu regla de página. Haz clic en el botón «Añadir una configuración» si deseas agregar más de una regla para una página específica. A continuación, puedes elegir Guardar como Borrador para dejar la regla desactivada o Guardar y Desplegar para activarla inmediatamente.

3. Puedes reordenar la posición en Reglas de la página y cambiar la regla usando el icono de Configuración. Haz clic en el botón «X» si deseas eliminar la regla.

Con una cuenta gratuita de Cloudflare, puedes crear hasta tres reglas de página. Para obtener 20 reglas, actualiza a la versión Pro. Los planes Business y Enterprise ofrecen 50 y 125 reglas, respectivamente, si necesitas más.

Aquí hay algunas recomendaciones sobre cómo utilizar esta función en tus sitios de WordPress:

Siempre utilizar HTTPS

Rediriga todas las versiones de tu sitio web a la versión https:// utilizando esta regla para asegurar las conexiones de los visitantes. Entre dos asteriscos, ingresa el nombre de dominio de tu sitio de WordPress:

http://*ejemplo.com/*

Los niveles de caché y la seguridad de la administración de WordPress

Configura el Nivel de Seguridad en Alto y el Nivel de Caché en Bypass para proteger y acelerar la administración de WordPress.

Además, desactivar las aplicaciones y el rendimiento de Cloudflare ayuda a solucionar los errores porque estas funciones solo aceleran el front-end de tu sitio web.

Introduce tu URL de inicio de sesión de WordPress junto con un asterisco:

ejemplo.com/wp-admin*

Control del ancho de banda utilizado por las subidas de WordPress

Configura Edge Cache TTL a un mes para ahorrar ancho de banda si raramente cambias los archivos que subes a WordPress.

Luego, cambia el Nivel de Caché a Caché Todo para optimizar la velocidad y cambia el TTL de Caché del Navegador a un día para mostrar el contenido más reciente de tu sitio.

Para la URL, usa esto:

ejemplo.com/wp-content/uploads*

Siempre en línea

Si el servidor está inactivo, esta función mantendrá las páginas en línea. Activa la función Always Online para tus URL más importantes.

Ofuscación de mensajes de correo electrónico

Para evitar el spam, usa la regla de Ofuscación de correo electrónico en tu página de contacto o en cualquier página de información de contacto.

7. Redimensionar la imagenes

La función de redimensionamiento de imágenes mejora el rendimiento de tu web de WordPress al almacenar los archivos de imágenes en caché y reducir sus dimensiones.

Además, esta función optimiza automáticamente las imágenes para su uso en dispositivos móviles. Puedes mantener una apariencia coherente de tu sitio web activando esta función de Cloudflare.

Suscríbete al plan Business que incluye hasta 100.000 solicitudes de imágenes al mes para aprovechar esta función de optimización de imágenes.

8. Mirage

Mirage ayuda a los sitios web a cargar imágenes en función del tipo de dispositivo y la conexión de red sin alterar la resolución original. Los dispositivos con pantallas más pequeñas, por ejemplo, mostrarán imágenes más pequeñas.

Los siguientes métodos de Cloudflare aceleran el tiempo de carga:

  • Virtualización de imágenes: utiliza marcadores de posición de baja resolución en lugar de imágenes para renderizar las páginas más rápido, lo que permite a los visitantes ver el contenido inmediatamente.
  • La racionalización de solicitudes combina varias solicitudes de imágenes individuales a la red en una sola solicitud.

Esta función requiere al menos el plan Pro. Ten en cuenta que esta función puede causar problemas al mostrar imágenes en carruseles y visores de fotos con código JavaScript específico.

9. Polish

Sólo los planes Pro y superiores pueden usar esta función. Las siguientes opciones pueden mejorar el tiempo de carga de las imágenes y reducir el tamaño de los archivos con la función de polish o pulir:

  • Sin pérdidas: reduce el tamaño de los archivos de imagen sin comprometer la calidad visual. Esta opción elimina metadatos innecesarios de los archivos PNG y GIF, como la fecha, la hora y la información del fabricante de la cámara.
  • Con pérdidas: reduce la calidad visual de las imágenes JPEG reduciendo su tamaño de archivo.
  • Servir imágenes WebP: muestra la versión WebP de la imagen, lo que mejora la calidad de la imagen en comparación con el formato original.

Cuando cambies los ajustes de pulido, asegúrate de purgar la caché para ver los cambios.

10. Caché

El almacenamiento en caché permite que los navegadores accedan a las copias de tu contenido estático en el almacenamiento temporal.

Cloudflare puede ayudar a los navegadores web a almacenar en caché para que carguen los sitios web más rápidamente. Además, almacena en caché los servidores DNS para una búsqueda de registros más rápida.

Para acceder a esta función de Cloudflare, vaya a Configuración y luego a Caché. Las funciones principales incluyen:

  • Purgar caché: elimina los archivos almacenados en caché para obtener la versión más reciente de tus archivos del servidor:
    • Purga personalizada elimina la caché de una URL particular.
    • Purgar todo: almacena todos los archivos de tu sitio web en caché. Para optimizar la velocidad del sitio, sugerimos purgar cada página.
  • El nivel de caché es una medida que indica la cantidad de contenido HTML estático que deseas que Cloudflare almacene en caché. Según estos niveles, puedes configurar la CDN de Cloudflare para que almacene en caché el contenido estático:
    • Sin cadena de consulta: proporciona archivos desde la caché en situaciones en las que no hay cadena de consulta; en este caso, la cadena de consulta es un componente de una URL que asigna valores a parámetros específicos.
    • Ignorar cadena de consulta: proporciona el mismo recurso a todas las URL, independientemente de la cadena de consulta.
    • Estándar: cuando cambia la cadena de consulta, proporciona un recurso diferente.
  • La tecnología de tiempo de caché del navegador (TTL) indica la cantidad de tiempo que permanecen los archivos almacenados en caché en el navegador de un visitante. Los tiempos de expiración más largos aceleran la carga de nuevos visitantes.
  • Herramienta de escaneado de CSAM: permite a los propietarios de sitios web identificar y actuar sobre cualquier material potencial de abuso sexual infantil (CSAM).
  • Sugerencias del rastreador: después de realizar cualquier cambio, proporciona datos de alta calidad a los motores de búsqueda. Esta función impide rastreos innecesarios.
  • Siempre en línea: muestra copias limitadas de tus páginas web en lugar de errores cuando su servidor no está disponible.
  • El modo de desarrollo elimina temporalmente la caché de Cloudflare para que puedas monitorear los cambios en tu servidor de origen en tiempo real.

Además, Cloudflare tiene una página de configuración que contiene información sobre el análisis de caché, la reserva de caché y el caché por niveles. Algunos de estos ajustes están exclusivos de la versión Premium.

Conclusiones

Configurar Cloudflare en tu sitio de WordPress es muy simple. Hemos explicado cómo configurar Cloudflare en WordPress:

  1. Crear una cuenta de Cloudflare y verifica tu dirección de correo electrónico.
  2. Agrega tu dominio de WordPress a Cloudflare.
  3. Verifica los registros DNS de tu dominio con Cloudflare.
  4. Averigua los servidores de nombres de Cloudflare para tu nombre de dominio.
  5. Configura las configuraciones de HTTPS para proteger tu sitio web.
  6. Para hacer la configuración más fácil, instala el plugin de Cloudflare.

Además, hemos explicado cómo los usuarios de WordPress pueden beneficiarse de las principales funciones de Cloudflare, como el almacenamiento en caché y el cambio de tamaño de las imágenes.

Intenta ejecutar una prueba de velocidad después de configurar la integración de Cloudflare en WordPress.

Franco Silvetti
Franco Silvetti

Freelancer especializado en WordPress, con más de 4 años de experiencia.