Cómo optimizar el rendimiento de tu web: Cloudflare CDN

Volvemos con una nueva entrega (a priori la última) de #OptimizarWeb, una serie de tutoriales en tres píldoras que nos permitirán optimizar el rendimiento de nuestras páginas significativamente.

CDN

En el anterior, hablamos de cómo implantar un sistema de cacheado de páginas dinámicas, con el ejemplo de uno de los plugins para WordPress que nos facilita esta labor.

En este caso, hablaremos de la implantación de un CDN (red de distribución de contenido), una de las técnicas de optimización de rendimiento más utilizadas, y que requieren de un conocimiento mínimo para su perfecta implementación.

Implantación de un CDN ¿Por qué?

Hasta ahora, y si usted ha seguido el resto de tutoriales, tendrá una página que el cliente descarga bastante más rápido (ya que gracias a la paralelización de carga de contenido, evita los tiempos perdidos con las restricciones paralelas de carga que impone el navegador) y además servirá al cliente una página estática cacheada, en vez de tener que construir dinámicamente la misma en cada petición.

El siguiente paso, será reducir en la medida de lo posible el tiempo que le lleva a una petición realizarse, y esto, entre otros factores (velocidad del servidor, RAM disponible,…), se consigue acercando la página al visitante.

Cuando intentamos abrir una página, la petición tiene que pasar por el cable de nuestra casa (o la red 3G o WIFI que estemos usando) hasta la centralita del operador que nos proporciona la conexión, y ésta comunicarse con otra u otras redes hasta llegar al punto donde se encuentra el servidor objetivo, que devuelve la señal de la misma manera.

Si tuviéramos presupuesto suficiente, lo más efectivo sería clonar nuestra arquitectura en la propia centralita, tal y como Google, Microsoft, Apple y otros grandes están haciendo, evitando así el tiempo perdido entre que la petición y la respuesta llega a las diferentes redes.

Puesto que esto no está al alcance de casi nadie, lo que sí podemos hacer es replicar nuestro contenido en diferentes puntos del planeta, gracias a un CDN. Los CDN son redes de distribucción de contenido (EN), redes de servidores distribuidos a lo largo de la Tierra que se encargan de duplicar nuestro contenido, y ofrecérselo a los clientes según la cercanía de estos, reduciendo así el tiempo de espera entre peticiones.

Implantación de Cloudflare CDN ¿Por qué?

Entendido ya el porqué de un CDN, ahora entraremos a explicar el porqué de implantar Cloudflare, uno de los CDN disponibles en el mercado.

Cloudflare (EN) es un servicio de CDN en proxy inverso, es decir, que en su implantación, nos obligará a cambiar las DNS de nuestro dominio para que apunten a sus propias DNS. Gracias a esto, ofrece algunas ventajas e inconvenientes a considerar respecto a su posible competencia, como puede ser cloudfront (ES), el CDN de Amazon:

  1. Versión gratuita y versión de pago: Cuenta con varias modalidades, aunque bajo mi punto de vista, la versión gratuita cubre básicamente todo lo que una página de medio/alto tráfico generalista necesita. Se queda fuera la implantación de un certificado SSL, y algunas funciones que posiblemente necesite si su página es muy específica. Pero para el resto, la versión gratuita es más que de sobra.
  2. Es compatible con otros CDN: Y esto, aunque parezca absurdo, es profundamente interesante. Cloudflare automatiza las labores de cacheado de las páginas, distribuyéndolas entre su red, a diferencia de servicios como el de Amazon, en el que eres tú quien define qué páginas se cachean y cuales no. Puesto que el primero funciona con un proxy inverso y el segundo configurado en el propio servidor, no son incompatibles uno de otro, y de hecho en plugins de WordPress como W3 Total Caché, que sería una posible alternativa al que usamos en el tutorial sobre cacheado de páginas, aparecen juntos para configurarlos.
  3. Cloudflare Security: Otra ventaja de estar ante un servicio de CDN en proxy inverso es que es capaz de gestionar las peticiones que le llegan al servidor, y bloquear aquellas marcadas como spam o malintencionadas. De esta manera, además de ahorrar en ancho de banda (lo que repercute positivamente en los clientes), evitamos buena parte de las conexiones de spam o robots de escaneo de vulnerabilidades. La versión de pago además incluye la posibilidad de gestionar ataques de denegación del servicio masivos. Todo fuera de tu propia página.
  4. Cloudflare Analytics: Al igual que Google Analytics, Cloudflare tiene su propio analizador de tráfico, que nos permite diferenciar entre humanos y robots, y ofrece una visión distinta al de Google (dando más valor a las páginas vistas frente a las estimaciones de visitantes).
  5. Cacheado de páginas externo al hosting: Otro punto fuerte que tiene Cloudflare es que al ser ajeno al servidor padre, si este se cae (algo que suele pasar unos minutos al mes), el usuario no llegará a una página con error, sino que se le devolverá la página cacheada y un aviso de que el contenido es cacheado y no es el original. Para blogs o páginas puramente informativas, esta medida te cubre casi al 100% de las necesidades del usuario (que normalmente entra en la página para leer un artículo).
  6. Aplicaciones Cloudflare: Para aumentar el ámbito de actuación del sistema, la herramienta te recomienda servicios extra que pueden interesarte, como un web monitor que te avisa cuando la página está caída o un sistema de test A/B que funciona en caché.
  7. Clouflare y el SEO: Para aquellos escépticos que tengan miedo perder visibilidad al tener que cambiar las DNS, pueden estar tranquilos. Cloudflare gestiona los dominios de la misma manera que si estuvieran apuntando al servidor original, sin resentirse en las búsquedas. De hecho hay gente que asegura que incluso han mejorado, aunque al menos en mi caso no he notado cambio alguno (ni para bien ni para mal). Lo que sí he notado es que la imagen destacada que las redes sociales cogen a la hora de compartir un enlace carga casi automáticamente, algo que antes del cambio me traía por la calle de la amargura.

CloudFlareAnalytics

Implantación de Cloudflare CDN ¿Cómo aplicarlo?

Algunos planes de hosting ya incluyen la posibilidad de activarlo mediante el CPanel propio, aunque en mi caso me decidí igualmente a hacerlo por mi cuenta. Tanto si estamos ante un WordPress como si no, los pasos son exactamente los mismos:

  1. Crearse una cuenta de Cloudflare: Accediendo a su página (EN), y de la forma habitual.
  2. Agregar a nuestra cuenta el dominio utilizado: El siguiente paso será incluir el dominio o dominios que vayamos a gestionar con Clouflare. Recuerde que el dominio se mete sin http:// y sin www.
  3. Esperar: Mientras Cloudflare genera las nuevas DNS, mostrará un vídeo informativo. No está demás que le eche un vistazo.
  4. Cambiar las DNS del dominio: En la siguiente página, mostrará las nuevas DNS, así como las que actualmente están en uso. Nos tocará ir al CPanel de nuestro dominio y cambiarlas para que apunten a Cloudflare. Como siempre que llevamos a cabo este tipo de cambios, habrá que esperar entre 8 y 48 horas a que los cambios se hayan propagado. Y durante este tiempo es posible que la página no funcione correctamente (puede mientras avisar a los usuarios para que usen un dominio distinto).
  5. Eligiendo el plan contratado: Elegiremos el plan (Free – 0$/month, suponiendo que desea contratar el plan gratuito), Performance con CDN + Full optimizations, y Security Medium. Luego modificaremos algunos puntos.
  6. Configurar el gestor de contenido: Suponiendo que la página sea WordPress o algún gestor de contenido dinámico, quizás sea interesante configurar o instalar el plugin Cloudflare (EN) para asegurar la intercompatibilidad. En caso de que use W3 Total Caché o alguna otra herramienta de cacheado, asegúrese de que la propia herramienta no cuenta con una sección específica para Cloudflare (así se evita instalar otro plugin más). La mayoría de estas extensiones únicamente pedirán los datos de usuario, dominio y contraseña para enlazar con el servicio.

Implantación de Cloudflare CDN ¿Cómo configurarlo?

Pasadas esas 8/48 horas, la página ya estará siendo servida mediante Cloudflare, por lo que es el momento de echarle un vistazo para asegurarnos que todo funciona correctamente. Una vez que así sea, incluyo como corolario algunos puntos a considerar que quizás estén mostrándole problemas:

  • Dentro de cloudflare>settlings podemos definir con más exactitud cómo queremos que el CDN se comporte.
  • Development Mode: Nos sirve para ver cambios que estemos metiendo al diseño de la web. Si ha instalado el plugin de Cloudflare, tendrá la opción a activarlo y desactivarlo desde el propio panel de administración de WordPress. En caso contrario, lo encontrará en cloudflare>settlings.
  • Hotlink protection: Dentro de Security, podemos activar (por defecto desactivada) la opción de que siempre que se llame a una fotografía desde fuera del dominio esta no se muestre. Puede ser interesante para aquellos proyectos que generen contenido audiovisual propio y no quieran que éste se comparta fácilmente.
  • Rocket Loader: Dentro de Performance, por defecto tenemos activado el Rocket Loader, un servicio de Cloudflare que se encarga de que los JS de la página se carguen en asíncrono. Esto está muy bien, ya que mejora el tiempo de carga de la página y las consideraciones de los algoritmos de SEO de la mayoría de buscadores, pero es probable que merme la usabilidad de la página. En mi caso he tenido que desactivarlo, ya que hacía que tanto el slider de la página principal, como el widget de Google+ y el portafolio tardaran en torno a los 6 segundos en aparecer (la página cargaba muy rápido, pero este contenido en particular no se veía hasta pasados varios segundos, por lo que para el usuario era como si no existiera). Con ello ha mermado la puntuación de Pingdom, pero he ganado en usabilidad, que a la hora de la verdad es lo que me interesa. Por ello, pruebe a activarlo y desactivarlo (acuérdese de purgar caché para ver los cambios), y saque sus propias conclusiones.
  • Configurar los subdominios usados en la paralelización de carga de imágenes: Si ha habilitado la paralelización de carga de contenido como explicaba en el primer tutorial, nos quedaría un paso por hacer. Tendremos que definir los subdominios creados (en mi caso img1, img2 e img3) dentro del panel de Cloudflare para que éste los gestione y no lo haga el propio gestor de dominios. Los pasos son semejantes a incluir un nuevo dominio, pero haciéndolo desde el gestor de dominios de cloudflare.

Con estos tres servicios implantados, la página debería haber ganado bastantes rendimiento. Ahora toca el trabajo pesado (asegurarse de que todo funciona correctamente y configurar los tres servicios según su propio interés, priorizando el SEO o la usabilidad del cliente).

 

Enlaces al resto de tutoriales #OptimizarWeb (actualizados conforme se vayan publicando):

 

Si os ha gustado el tutorial, agradecería que me dejarais un comentario y lo compartierais por redes sociales, con el fin de que pueda ayudar a más personas. Muchas gracias.

Imagen de neliana, Diseño de fondo (EN) cedida por Depositphotos.com.