Acelera WordPress sirviendo tu contenido desde CloudFlare CDN

Como ya sabrás, se puede optimizar hasta límites insospechados WordPress mediante trucos, cachés y demás, pero si hay algo que se nota y mucho es cuando sirves tu contenido estático desde una CDN.

Antes de nada, ¿qué es una CDN?

Una CDN, o Content Delivery Network (red de entrega de contenidos) es un servicio web que aloja tu contenido estático en diversos servidores a lo largo de todo el mundo para servirlos a tus visitantes desde el servidor más cercano a la petición.

De este modo se eliminan los tiempos de espera entre la petición y la entrega de contenidos desde distintos puntos del planeta.

Hay varios tipos de CDN pero las principales son estas:

  • DNS: Sirven tu contenido con la misma URL de tu dominio. Ej.: CloudFlare (recomendada)
  • Hosted: Sirven tu contenido cambiando las URLs. Ej.: JetPack (no recomendada)

Luego, dentro de las CDN de DNS, hay varios tipos también, como las Push, Pull y P2P, que determinan cómo se entregan los contenidos, pero hoy no entraremos en ello, a efectos de este artículo sería desviarnos demasiado.

Lo que tienes que tener claro es que, simplificando…

  • CDN que no cambian las URLs de tus imágenes, etc = buenas para el SEO = CloudFlare bueno
  • CDN que cambian las URLs de tus imágenes, etc = malas para el SEO = JetPack malo

¿Tiene ventajas usar una CDN

  1. Experiencia de navegación más rápida para los usuarios al ofrecer menores tiempos de carga de tu sitio.
  2. Reduce el uso de recursos de tu alojamiento principal, debido a que el ancho de banda de medios y archivos lo consume la CDN.
  3. Baja latencia de conectividad gracias a los servidores repartidos por todo el mundo.
  4. Ahorro de ancho de banda, pues al servir medios y archivos desde la CDN se ahorra ancho de banda de tu servidor contratado.
  5. Mejoras de SEO. Google ya ha declarado que la velocidad de un sitio es un algoritmo que tiene en cuenta en las SERP, y que los sitios lentos pueden sufrir penalizaciones.
  6. Reducción de la tasa de rebote. La tasa de rebote es proporcional a la satisfacción de los visitantes, pues normalmente la gente huye de sitios lentos. Tu sitio puede que tenga una información maravillosa, pero la gente no volverá si carga lenta.
  7. Aumenta la vida de tu plan de alojamiento, reduciendo recursos y consumos, como hablamos en este artículo.

¿Y qué es CloudFlare?

CloudFlare es un servicio de CDN de los conocidos como de DNS, que no afectan negativamente a tu SEO al no cambiar las URLs de tus contenidos a la hora de entregarlos.

Además, dispone de un plan gratuito muy completo, que cubre las necesidades de la mayoría de blogs y webs corporativas, por eso es el que he elegido aquí para este artículo, y es el que usaremos, el plan gratis.

¿Cómo añado WordPress a CloudFlare?

Lo primero que haremos será registrarnos, solo tenemos que poner nuestro correo electrónico, elegir contraseña y pulsar el botón de crear cuenta.

Una vez hecho esto nos pide el primer dominio que queremos acelerar sirviendo su contenido desde CloudFlare.

En la siguiente pantalla nos informará que está recopilando los datos de tus DNS y que, en la siguiente pantalla, nos dirá cómo cambiarlas a las DNS de CloudFlare y también nos preguntará qué plan querremos.

En la siguiente pantalla elige el plan gratuito (Free), es fácil, es el de 0€ al mes.

Confirma el plan y en la siguiente pantalla te mostrará los resultados de las DNS identificadas por CloudFlare, que tendrá que replicar en sus servidores.

Esta es la parte más técnica del proceso, con diferencia, pero básicamente lo que tienes que hacer es ir a la cuenta de tu registrador del dominio y comprobar que CloudFlare ha identificado todos los registros DNS (A, CNAME, MX, TXT) que tengas allí.

Si todo está correcto simplemente dale al botón de continuar, y si falta alguno, en la parte superior de la lista puedes añadirlos manualmente.

¡Y ya hemos llegado al final de este proceso!

Lo siguiente que te pide es que cambies los servidores DNS actuales, los que indican a dominio dónde está alojado el contenido, por unos nuevos, de CloudFlare.

Ve al panel de tu proveedor de dominios y cambia las DNS por las de CloudFlare y guarda los cambios.

Y ya puedes pulsar el botón de continuar en el asistente de CloudFlare, y te llevará al maravilloso panel de control de CloudFlare.

Lo primero que verás es que aún no están difundidos los nuevos servidores DNS, algo que puede tardar minutos u horas, dependiendo de si es un .es u otro dominio, y del tiempo de espera y difusión de tu servidor de dominios.

Pasado ese periodo de tiempo ya verás el estado activo de tu sitio.

Y tu web aparecerá como que está alojada en CloudFlare en vez de en tu proveedor de alojamiento, pues todos los analizadores de DNS identificarán los servidores de CloudFlare como los que entregan el contenido.

¿Qué cambia en mi modo de gestionar WordPress?

Absolutamente nada en principio, pues tu web seguirá funcionando igual, incluso tu alojamiento. Tus imágenes se seguirán subiendo a la biblioteca de WordPress y todas las URLs seguirán siendo las mismas.

Lo que sí notarás pronto es que el consumo de ancho de banda y recursos de tu alojamiento, de tu hosting, bajará, pues mucho lo estará asumiendo CloudFlare, con lo que en ocasiones incluso te permitirá ahorrarte un dinero reduciendo tu plan de alojamiento.

Primer vistazo y ajustes recomendados en CloudFlare gratis

Lo que sí te aconsejo es que revises el fantástico panel de CloudFlare, tu nuevo amigo, para aprender mucho sobre tu web y también para configurar algunos ajustes que harán que tu WordPress vuele.

Estadísticas de CloudFlare

En esta pantalla encontrarás interesantes estadísticas, como las del contenido que estás entregando desde la caché de CloudFlare y el que sigues entregando desde tu hosting.

Aquí podrás comprobar la cantidad de recursos que ya no sirves desde tu alojamiento, como por ejemplo las peticiones de contenido

El ancho de banda ahorrado

Los visitantes únicos servidos…

E incluso las amenazas bloqueadas por CloudFlare, que incluye ajustes de seguridad…

Muy interesantes son también las estadísticas de amenazas por países

Y las de tráfico por países, en este caso, recuerda, servido por CloudFlare, por lo que puede variar de tus estadísticas globales por países:

Muy chulos son también los resúmenes de todo lo que ha hecho CloudFlare por ti en lo relativo al rendimiento de tu web.

Un fantástico y visual repaso al ancho de banda, recursos, medios, amenazas, controlados por CloudFlare.

SSL en CloudFlare

Hace ya tiempo que dejó de ser un problema la integración de certificados SSL y CloudFlare. Actualmente incluso reconoce automáticamente los certificados gratuitos Let’s Encrypt.

No obstante, basándome en mi experiencia, te recomiendo revisar estos ajustes en la sección Crypto del panel de CloudFlare:

  • Cambia el ajuste de SSL de Full a Full (Strict) para que CloudFlare verifique tu certificado válido.
  • Pon en ON el ajuste de usar siempre HTTPS.
  • ¡Ojo! Solo si tienes claras sus implicaciones, activa (Enable HSTS) HSTS. Esto activa un protocolo seguro de HTTPS que añadirá seguridad de manera estricta a tus conexiones HTTPS. Una vez lo actives el sistema te pedirá unos ajustes, que deberás poner así:
    • Lee y acepta las connotaciones de activar HSTS (siempre y solo se servirá HTTPS, si hay algún problema no servirás nada)
    • Enable HSTS en ON, sino no haces nada.
    • Max Age Header en 12 meses. Recomienda 6 meses pero solo con 12 meses de cabecera max-age permitirán la precarga de contenido seguro por parte de los navegadores.
    • Apply HSTS policy to subdomains. Activa esto solo si tienes claro que todos tus subdominios tienen activo y funcionando un certificado SSL y sirven todo su contenido en HTTPS.
    • Pon Preload en ON solo si tienes claro que todo tu contenido se sirve en HTTPS. Si lo activas luego visita la página de petición de listado de precarga de HSTS de Chrome, que es el que usan el resto de navegadores, para comprobar si ya sirves en HSTS y si todo funciona correctamente. También es importante visitar antes la página de compatibilidad de navegadores, pues si tienes tráfico importante de versiones incompatibles igual es mejor esperar un poco.
    • Activa la cabecera No-Sniff si quieres que navegadores como Internet Explorer o Chrome, sobre todo el primero, no usen esta técnica de determinar assets de tipos de contenido de manera insegura.
  • Comprueba que esté en ON el ajuste de Opportunistic Encryption, que activa una funcionalidad de HTTP/2 aún sirviendo contenido en HTTP.
  • Comprueba que esté en ON el ajuste de Onion Routing, para permitir las conexiones privadas a través de la red Tor.
  • Pon en ON el ajuste de Automatic HTTPS Rewrites para que todo tu contenido se sirva en HTTPS. Antes comprueba que tu publicidad y demás recursos externos funcionan en HTTPS.

Aquí te dejo unas capturas de los ajustes que recomiendo según la lista anterior.

Hay más ajustes en esta sección pero la mayoría son para casos muy especiales o requieren un plan de pago, así que como estamos hablando de la versión gratis hoy no los tocaremos.

Cortafuegos

La sección Firewall del panel de CloudFlare te permite añadir hasta 5 reglas de cortafuegos de manera gratuita, con las que bloquear tráfico indeseado de atacantes confirmados o sospechosos habituales.

Puedes bloquear peticiones por país, IP, navegador, tipo de petición, etc.

En la documentación de CloudFlare tienes una lista de las acciones y filtros que puedes aplicar.

Lo que no debes olvidar es cambiar el nivel de seguridad de Standard a Low, pues en caso contrario el cortafuegos de CloudFlare he comprobado que bloquea demasiado tráfico normal, no sospechoso, y podrías estar bloqueando el acceso a servidores externos necesarios.

Velocidad

La sección Speed es de obligada visita, pues aquí puedes configurar ajustes que ayudarán a que tu web vaya aún más rápida gracias a las características y utilidades de CloudFlare.

Lo primero es activar el minimizado automático de todos los JavaScript, CSS y HTML servidos por CloudFlare. Para ello activa las tres casillas al efecto en la sección Auto Minify.

Eso sí, como en cualquier minimizado de código comprueba que funciona todo en tu web tras activarlo, no sea que deje de funcionar algún botón, como el de compra, u otros importantes.

También es muy interesante activar los enlaces AMP, ya sabes, el HTML minimalista de código abierto creado por Google para servir versiones ultrarrápidas de tus páginas. Activa la característica Enable Accelerated Mobile Links, y deja activo el selector llamado Show AMP logo before links, como referencia visual interesante.

Este ajuste solo se aplicará al dominio, si quieres también aplicarlo a subdominios tendrás que elegirlos del selector que incorpora.

También activa la característica Rocket Loader, que carga más rápido todo el JavaScript de tus páginas.

Igualmente interesante puede ser, si creaste una versión móvil específica de tu web en un sudbominio, indicarle a CloudFlare cuál es en el siguiente selector, y CloudFlare ofrecerá ese subdominio a todos los navegadores móviles.

Brotli en WordPress con CloudFlare

Mención especial merece la compresión Brotli, de la que hablaré en detalle otro día, un nuevo algoritmo de compresión de páginas HTTPS que ayuda a servir webs más rápidas si el navegador es compatible, y en caso contrario usará la compresión GZIP.

En CloudFlare viene activa por defecto así que déjala como está, aplicará un plus de optimización a tu WordPress.

Caché

También encontrarás en el panel de CloudFlare ajustes específicos para gestionar la caché de tus contenidos servidos desde la CDN.

Aquí la cosa es sencilla, simplemente revisa los ajustes por defecto  y déjalos así:

  • Caching Level: Standard. Así garantizas la entrega correcta de los contenidos a pesar de cadenas de petición distintas de otros recursos.
  • Browser Cache Expiration: 1 month. Mantener la caché del navegador más tiempo permite ofrecer tiempos de carga más rápidos, eso sí, la regeneración de la propia caché hará, cuando toque, que tu web se ralentice, no obstante mi consejo es ponerla a 1 mes, un buen equilibrio.
  • Always Online: Esta es una funcionalidad de CloudFlare que mostrará tus páginas estáticas en caché aunque tu web ofrezca errores 500, 503 o 4xx, para así darte tiempo a recuperar tu web mientras sigues ofreciendo tus contenidos. Durante este periodo CloudFlare también muestra un texto a los visitantes indicándoles tal eventualidad. Cuando tu web se haya recuperado vacía la caché – en esta misma página del panel – y ya se mostrará tu web en directo.

En esta sección también encontrarás el Development Mode, que cuando lo actives inhabilitará toda la caché de CloudFlare, para cuando estés realizando cambios en tu web y quieras verlos en tiempo real. Solo acuérdate de desactivarlo cuando termines.

Escudo contra robo de contenidos

Una funcionalidad también muy interesante de CloudFlare la tienes en Scrape Shield.

Aquí puedes ofuscar las direcciones de email, activa por defecto, para que no te las capturen scrapers y las usen para enviar/te spam.

También puedes usar la característica llamada Server-Side Excludes, activa por defecto, para ocultar contenidos en tu sitio a visitantes sospechosos.

Estando activa puedes ocultar contenido a scrapers y bots falsos rodeándolo con los comentarios HTML <!--sse--> <!--/sse-->. Por ejemplo, así:

Para terminar, también encontrarás la protección contra hotlinking, esa fea práctica de robar y usar contenido de otros para mostrarlo en otra web, lo que perjudica tu SEO y consume tu ancho de banda.

Ahora bien, esta protección contra hotlinking es total, sin exclusiones, así que te recomiendo no activarla, pues tus imágenes no aparecerían en tus newsletter, feeds, incluso en tus redes sociales. Es mejor activarla y controlarla manualmente.

Más características de CloudFlare

Cuando tengas tu cuenta de CloudFlare comprobarás que he excluido hablar de otras características, y es verdad, pero es debido a que no están incluidas en el plan gratuito, por interesantes que sean, que es el objetivo de esta guía.

Cómo añadir subdominios a CloudFlare gratis

En los planes gratuitos de CloudFlare puedes añadir cientos de dominios, pero no hace falta para los subdominios.

Puedes también añadir gratis tantos subdominios como tengas y quieras. Es fácil.

Solo tienes que ir a la sección DNS del panel de CloudFlare y añadir un nuevo registro DNS del tipo A, en el que el nombre será el del subdominio existente, y la IPv4 Address la dirección IP de tu servidor.

¿Se puede hacer esto de CloudFlare aún más fácil?

Existe un modo aún más sencillo que el que hemos visto para añadir tu WordPress a CloudFlare, y es gracias a SiteGround.

Si tu web está alojada en SiteGround, en todos los planes tienes cuenta gratuita de CloudFlare activable a un solo clic.

Solo tienes que ir a cPanel y abrir la utilidad CloudFlare en la sección de herramientas de mejora del sitio

En la siguiente pantalla tendrás la activación a un clic de CloudFlare:

Y en la pantalla de confirmación solo tendrás que poner el email con el que quieres activar tu cuenta

Cuando esté activa la cuenta de CloudFlare recibirás un correo, y tu contenido ya se servirá desde CloudFlare, pues toda la configuración de DNS se hace automáticamente.


Resumiendo

Espero que esta guía te sirva para animarte a usar CloudFlare para acelerar tu WordPress.

El proceso es realmente sencillo, más incluso de lo que puedas pensar solo viendo la guía, y los resultados son estupendos:

  • Tu web tardará menos en cargar.
  • Ahorras recursos del servidor.

Y todo a coste cero y sin contraindicaciones, así que no hay excusa para no animarte.

Valora este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (9 votos, promedio: 5,00 de 5)
Cargando…

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para saber si ya aceptaste nuestras políticas, si ya estás suscrito a nuestra newsletter, para reconocer el estado de tu sesión si la tuvieses y para servir más rápidos los contenidos.

No se captura IPs ni siquiera para el servicio de Analytics así que tu visita es privada.

JSESSIONID, _cfuid, wpSGCachePypass, mailerlite, gdpr, gawp
mailerlite, _cfuid

Cookies de terceros

Usamos cookies de terceros con servicios, también garantes de tu privacidad, que analizan tus usos de navegación para que podamos mejorar los contenidos, si ya estás suscrito al boletín y los elementos compartidos en redes sociales y el formulario de comentarios.

1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID, disqus_unique, disqusauth
disqus_unique, disqusauth
1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID

Pin It on Pinterest

Share This