Guías > Hosting WordPress > CloudFlare en WordPress: Tutorial para configurarlo paso a paso

CloudFlare en WordPress: Tutorial para configurarlo paso a paso

CloudFlare WordPress

En este tutorial aprenderás a configurar CloudFlare con WordPress.

Una magnífica herramienta que es más que un simple CDN, que hará tu web más rápida.

Es el CDN que uso y recomiendo, y que aunque no optimiza mi web, me ayuda a tener mejores métricas.

Raúl González PageSpeed 100

¿Qué es CloudFlare CDN?

CloudFlare es una herramienta online que te ayuda tanto a proteger tu sitio web, como a optimizarlo para que sea más rápido.

Tiene desde servidores DNS, un CDN, herramientas de seguridad y otros.

En este tutorial me centraré en el CDN de CloudFlare.

Ventajas de CloudFlare

Las ventajas de CloudFlare en el aspecto de WPO o rendimiento web, son las siguientes:

  • Tu web se cargará más rápido a usuarios de otros países y otros continentes.
  • Ahorrará consumo de CPU y peticiones de tu hosting, con lo que tardarás más en subir de plan.
  • Consumirás mucho menos ancho de banda, algo muy importante si sirves mucho contenido multimedia como fotos o vídeos.

Desventajas de CloudFlare

Como debe ser, también te tengo que contar las desventajas de CloudFlare:

  • Debes de cambiar los DNS para poder usarlo.
  • Su sistema de seguridad puede ser molesto, al mostrar a veces a tus usuarios un mensaje para comprobar que no son robots.
  • Si CloudFlare falla, tu web también lo hará.

Una alternativa para no tener que cambiar los DNS es BunnyCDN.

Si quieres saber más, revisa mi comparativa de Cloudflare vs BunnyCDN.

¿Cuando usar un CDN con WordPress?

Usar un CDN en WordPress es de las mejores decisiones que puedes tomar, pero siempre que lo necesites.

Para saber si tienes que usar CloudFlare con tu web WordPress, solo debes tener una regla clara.

Úsalo siempre que tengas público en un país fuera de donde tienes tu web alojada.

Por ejemplo, mi público principal está en España, pero también tengo público en América del Sur, así que me interesa usarlo.

Aunque un CDN no optimizará una web lenta.

Explico paso a paso a configurar Cloudflare con WordPress y resolver los problemas que surgen en la formación WPOptimizers.

Cómo configurar CloudFlare en WordPress

Vas a ver lo sencillo que es configurar CloudFlare en WordPress.

Crea cuenta en CloudFlare

Lo primero es crear cuenta en CloudFlare y para ello:

  • Accede a la web de CloudFlare.
  • Ve al apartado registrate.
  • Pon tu email, una contraseña y listo.
Crear cuenta CloudFlare

Añadir web a CloudFlare

Lo siguiente es añadir una web a CloudFlare y para ello:

  • Pulsa en el botón de add a site.
  • Escribe el dominio de la web sin el protocolo (HTTP ó HTTPS).
Panel CloudFlare
Añadir nueva web en CloudFlare

Elige el plan de CloudFlare

Ahora elegiremos el plan de CloudFlare adecuado, que a no ser que seas un usuarios avanzado, con el plan gratuito tienes de sobra para disfrutar de sus ventajas.

Elegir plan CloudFlare

Comprueba los registros DNS

El siguiente paso es comprobar los registros DNS, para ver que están todos los que hay en nuestro hosting.

Te recomiendo que la web tenga previamente los registros correctos de tu hosting, para que CloudFlare los pueda comprobar.

En el caso de que no te salga ningún registro y el mensaje de "We automatically detected 0 DNS records on your site that match common hostnames and record types".

Simplemente dale a continue y en la siguiente pantalla dale a back, que seguro que saldrán. Se ve que tiene este error.

Comprobar registros DNS CloudFlare

Cambiar los DNS

El siguiente paso es cambiar los DNS que nos da CloudFlare, por los que tenemos en nuestro hosting.

Cambiar DNS hosting por los de CloudFlare

Me voy al panel, elijo el dominio, cambios los DNS y guardo los cambios.

Cambiar DNS Siteground

Tendrás que esperar unas 24-48 horas para que los nuevos DNS se propaguen por el mundo, pero hay herramientas como DNS Propagation Checker con las que puedes comprobar el estado.

Comprobar propagación DNS con DNS Propagation Checker

Comprueba la configuración SSL

Algo muy importante al empezar con CloudFlare, es comprobar la configuración SSL desde el apartado SSL/TLS, porque si está mal, nuestra web tendrá un bucle de redirección infinito.

CloudFlare puede cifrar el contenido de tu web, pero no te lo recomiendo, porque hoy día los certificados SSL de Let's Encrypt son totalmente gratuitos.

Elige:

  • Off: Si no se aplica cifrado (No recomendable).
  • Flexible: Si no tienes certificado SSL.
  • Full: Si tienes certificado SSL, aunque no sea firmado.
  • Full (Strict): Si tienes certificado SSL firmado como por ejemplo Let's Encrypt (Recomendado).
Configuración SSL TLS CloudFlare

CloudFlare Analytics

En CloudFlare Analytics podrás comprobar el ahorro de consumo que te ayudará a tener el CDN.

Además de servir la web más rápido la web a usuarios de otros países y ahorrar consumo de CPU, te ayudará a ahorrar ancho de banda de tu hosting y desde el apartado Analytics puedes verlo.

CloudFlare web Analytics

Configurar CloudFlare en WP Rocket

Si usas WP Rocket, puedes configurarlo para que gestione varios aspectos de CloudFlare como por ejemplo:

  • Activar el modo desarrollo: para hacer cambios en vivo y poder verlos en la web.
  • Ajustes óptimos: Activa algunas mejoras como establecer el nivel de almacenamiento en caché de Cloudflare en Estándar, activa la minimización de Cloudflare, desactiva Rocket Loader de CF y establece la caché del navegador de Cloudflare en 1 año.
  • Protocolo relativo: Ojo con esto, que solo se debe activar si se usa el modo flexible de CloudFlare o tendrás problemas.
  • Vaciar la caché de CloudFlare: Con lo que no tendrás que acceder a su panel de control.
CloudFlare WP Rocket

Para ello:

  • Accede a los ajustes de WordPress - WP Rocket - Addons.
  • Activa el addon de CloudFlare y accede a él.
  • Accede a CloudFlare al apartado Overview y copia el Zone ID.
Zone ID y account ID de CloudFlare
  • Haz clic en Get your API token.
  • Baja hasta Global API key, dale a view, pon la contraseña y la copias.
CloudFlare global API key
  • Los añades a WP Rocket y guarda los cambios.
  • Activa las opciones que necesites y guarda de nuevo.
Addon CloudFlare WP Rocket

Conclusión

Como has podido comprobar, configurar CloudFlare y hacerlo que trabaje con WordPress es algo muy sencillo.

Solo tendrás que tener calma a la hora de esperar a que cambien los DNS y listo.

Cloudflare es para mí uno de los mejores CDN para WordPress.

Espero que te sea de ayuda.