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.

Pero antes debes de saber que el CDN no hará milagros, porque antes debes mejorar la velocidad de WordPress.

¡Vamos!

¿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, que te ayudará a optimizar WordPress al máximo.

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:

• CloudFlare aumenta el TTFB, al tener más características. Esto no pasa con otros CDN.
• Su sistema de seguridad suele 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á.

Como puedes ver, no es todo color de rosa.

¿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.

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.

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).

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.

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.

Cambiar los DNS

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

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

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.

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).

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.

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.

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.

• Haz clic en Get your API token.
• Baja hasta Global API key, dale a view, pon la contraseña y la copias.

• Los añades a WP Rocket y guarda los cambios.
• Activa las opciones que necesites y guarda de nuevo.

Cloudflare y hostings

Hay muchos hostings que desde el mismo panel de CPanel, tiene la opción para activar CloudFlare con un clic, pero hay que tener mucho cuidado con esto.

Este tipo de herramientas añade el dominio a CloudFlare de forma predeterminada con las www.

Si tu dominio es sin www, NO lo hagas, porque al cambiar los DNS recibirás errores 404 por todos lados.

Es mejor que lo hagas a mano.

Cómo optimizar CloudFlare al máximo

Ahora voy a dar unas pautas para optimizar CloudFlare al máximo y sacarle partido a la cuenta gratuita, además de evitar otros que pueden ralentizarla.

Activa Auto Minify

La función Auto Minify lo que hará será minificar el HTML y los scripts CSS y JS.

Si tienes un plugin que ya lo haga, esto no mejorará, pero por lo menos lo dejas activado.

Para ello ve al apartado Speed - Optimization - Auto Minify y lo activas para los 3.

Selecciona el Caching level

En Caching level lo que haremos es eliminar los query string de las peticiones, que suelen ralentizar bastante.

Esto también lo hacen algunos plugins de caché, pero de esta forma de garantizas que siempre lo tendrás.

Accede al apartado Caching - Caching level y activa la opción de no query string.

Configura Browser Cache Expiration

Browser Cache Expiration lo que hace es decirle al navegador del usuario, cuanto tiempo debe de guardar los archivos estáticos y debería ser de como mínimo 1 mes.

Esto lo hacen de forma automática plugins como WP Rocket, pero conviene dejarlo configurado.

Para ello accede al apartado Caching - Browser Cache Expiration y pon 1 mes.

Desactiva Email Address Obfuscation

Email Address Obfuscation es una función de CloudFlare que ofusca las direcciones de email públicas de tu web, para que los bots no puedan capturarlas.

No sé hasta qué punto esto funciona, porque he probado algunas URLs y el email está en texto plano.

Lo malo es que mete otra petición que carga el script email-decode.min.js.

Lo que sí sé es que es otra petición más que se suma a la carga de la web y para quitarla, basta con ir a Scrape Shield y desactivar Email Address Obfuscation.

Desactiva Rocket Loader

Rocket Loader lo que hace es que el Javascript de tu web cargue después del contenido.

El problema de esto es que según qué tema o plugins uses, puede darte problemas de visualización.

Además, carga una petición rocket-loader.min.js que a veces puede ser lenta y que al ser externa, rompe la descarga paralela de HTTP2.

Para desactivar Rocket Loader ve al apartado Speed - Optimization y lo desactivas.

Elimina Cookie Consent

CloudFlare dispone de una aplicación llamada Cookie Consent, que lo que hace es mostrar un aviso de cookies en la web.

El problema de este aviso de cookies es que mete 2 peticiones que a veces pueden volverse lentas y que al ser externas, rompen la descarga paralela de HTTP2.

Para desactivar Cookie Consent, ve a Apps, búscala y la desactivas.

Desactiva CloudFlare si usas otro CDN

Cloudflare tiene unos magníficos DNS muy rápidos, lo que hace que tu web sea accesible desde cualquier parte del mundo mucho más rápido.

Pero en el caso de que uses otro CDN para servir tus archivos, te recomiendo pausar CloudFlare, dado que su sistema de seguridad aumenta considerablemente el TTFB, además de meter cookies.

De este modo disfrutarás de los DNS de CloudFlare y la velocidad de un buen CDN que uses y además tendrás un dominio libre de cookies.

Lo puedes hacer desde el apartado Overview - abajo del todo en Advanced Actions - Pause CloudFlare.

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.

Espero que te sea de ayuda.