En este artículo vamos a explorar cómo usar un servicio de CDN en tu sitio basado en WordPress, desde que es un CDN hasta cómo funciona, cómo implementarlo y por qué es importante, sobre todo para los sitios que posean muchas visitas en regiones diferentes del mundo.
En el principio..
Vamos por partes, qué es exactamente un CDN?. Porque he notado que una y otra vez se menciona esto en varias revistas, blogs técnicos y sitios de desarrollo pero nunca logré entender bien lo que es.
En pocas palabras, un CDN es una Red de Contenidos Distribuida, es un servicio que abarca un conjunto de servidores que es capaz de tomar información de tu sitio web y «replicarla» en distintas ubicaciones del planeta para así poder servir de un contenedor de tu información. Las redes de CDN permiten así poder brindar una «copia» del contenido mas pesado de tu sitio web, que en general son las imagenes y los archivos claves como los procesos Javascript para poder cargarlos localmente desde la región actual en la que el lector se encuentra, esto acelera enormemente el proceso de carga y hace que el sitio no solo sea mas rapido sinó que se sienta mas liviano.
Push vs Pull
Los CDN utilizan generalmente dos modalidades, Push y Pull. En la modalidad Push el contenido es traído automáticamente de tu sitio web en lo que se conoce como Origin o punto de partida. La información es actualizada a lo largo de toda la red distribuida de manera automática, cuando un visitante solicita el contenido desde esta ubicación y se mantiene en el cache del servicio de CDN de manera temporal. En una configuración Pull, el contenido no es traído de forma automática, sino que se crea un contenedor con archivos fijos y existe un espacio fijo de espacio disponible para que puedas almacenar contenido estático que sea importante para tu sitio y que sepas que no se altera de manera regular. Este contenido se sube a la zona definida como Pull generalmente via FTP. Los servicios de CDN ofrecen generalmente entre 10GB y 50GB de almacenamiento dependiendo del tipo de servicio que contrates, mientras que en las zonas definidas como Push no se especifica la cantidad de contenido que se almacena en el Cache sinó mas bien la cantidad de contenido que se puede transferir por vez.
Costo
Muchos servicios cobran por una cantidad de información transferida y no por cuotas mensuales fijas, esto es, se puede comprar credito para ser usado como ancho de banda, digamos, 300GB por ejemplo. Una vez que tus lectores y tu sitio web, consume esa cantidad de ancho de banda deberás entonces cargarle mas credito a tu cuenta. Esta es la modalidad mas usada en la actualidad por la mayoría de los CDNs.
Cómo Funciona
El servicio de CDN tomará un punto de partida, digamos, el contenido de tu sitio principal, o bien una de sus carpetas y replicará todo lo que sea «solicitado» desde esa ubicación en todos los servidores que posea a lo largo del mundo. Digamos que uno de tus lectores está solicitando varias imágenes de uno de tus artículos y que las imágenes se encuentren ubicadas en carpetas..
Para este ejemplo usaremos imágenes de nuestro sitio.
Esta sería la imagen original:
https://tecnogaming.com/wp-content/uploads/2016/06/mirrorsedgecatalyst-1280×640.jpg
Ahora, si el CDN se encuentra apropiadamente configurado, para tomar la información de tu sitio web, la podrá replicar en un «subdominio o dominio» que tu especifiques, en nuestro caso, el servicio de CDN se encuentra conectado en el subdominio cdn.tecnogaming.com que no está apuntando a nuestro servidor sinó al servicio de CDN, la imagen se puede recuperar fácilmente desde esta ubicación, simplemente cambiando el dominio y dejando el resto intacto.
https://cdn.tecnogaming.com/wp-content/uploads/2016/06/mirrorsedgecatalyst-1280×640.jpg
Esta es la modalidad que mas usarás en un CDN y claramente pertenece a las zonas definidas como Push.
Servicios
Para esta guía vamos a usar los servicios provistos por CDN77 que es actualmente nuestro sponsor oficial pero también existen otros proveedores conocidos tales como KeyCDN y MaxCDN, todos ofrecen prestaciones similares, lo que realmente hace la diferencia con respecto a CDN77 con el resto es que mantienen un costo relativamente bajo en comparación a su competencia y que ofrecen una mayor cantidad de zonas disponibles acorde a las ubicaciones que necesites. Por ejemplo, MaxCDN todavía no posee una ubicación en Buenos Aires, Argentina. KeyCDN la posee pero el costo adicional que incurre utilizarla es mas alto que a traves de CDN77. A su vez, CDN77 fué uno de los primeros proveedores de CDN en incorporar la tecnología de HTTP/2 y es el único que actualmente incorpora la compresión de Google Brootli, permitiendo hasta un 40% de ahorro de ancho de banda en el proceso.
Manos en Acción
Lo primero que vamos a hacer es definir una zona para poder traer el contenido de nuestro sitio web.
El panel de CDN77 es muy intuitivo y nos permite rápidamente crear una zona, gracias a que soportan https y HTTP/2 es muy sencillo crear una zona en formato nativo https desde el menú principal
Una vez que tenemos la zona definida, podremos proceder a configurarla en detalle.
Para que nuestra zona funcione apropiadamente, teniendo en cuenta que usamos https, debemos cargarle un certificado a nuestro sub-dominio, esto le permitirá al servicio poder traer contenido de nuestro sitio cada vez que se invoque a la dirección especifica de ese subdominio
En la configuración debemos definir que se ignoren las cookies para que el cache del navegador pueda funcionar mejor, a su vez, nos aseguramos de activar el modo HTTP/2 para que el cliente no tenga que cargar assets de nuestro sitio en modo HTTP/2 y acceder al CDN en modo HTTP estándar, lo que crearía un cuello de botella.
Para hacer aún mas efectivo el cache, podremos ignorar absolutamente todas las cookies con lo cual, el recurso cargado desde el CDN será extremadamente rápido.
En el siguiente menú, podremos definir las zonas que queramos que sean almacenadas en el cache global del CDN. Es importante saber que a mas zonas activamos, menos efectivo será el cache, por lo tanto, aqui se debe realizar un balance acorde a las zonas en donde tu sitio web se encuentre. En nuestro caso, nuestros lectores se encuentran primordialmente en Argentina, Chile, México, Estados Unidos y España, así que nos aseguramos que estas zonas estén activadas, lo cual permitirá que cualquier información solicitada a través del CDN pueda ser cargada localmente en una de estas regiones.
Aquí se puede purgar el contenido de todo el cache, esto es especialmente útil si queremos limpiar la cache luego de modificar algún archivo importante en nuestra instalación de wordpress.
En caso de que necesitamos probar el cache antes de darle el tiempo suficiente de almacenar los archivos mas usados, podremos forzar la carga al cache especificando que archivos queremos que se cacheen primero, especificandolos en este menú. El prefetch cargará inicialmente en el CDN estos archivos. Esta opción es importante a la hora de probar el servicio pero no es necesaria en el uso cotidiano.
Por último aquí podremos eliminar la zona por completo si algo nos salió mal o si queremos crear otra zona.
Una vez finalizada la configuración, deberemos apuntar el dominio temporario creado por el servicio al subdominio que nosotros poseemos, en este caso cdn.tecnogaming.com esto se realiza cargando en nuestro registrar una entrada correspondiente a CNAME así:
CNAME cdn.tecnogaming.com ******rsc.cdn77.org 3600
Los servicios de DNS y los propios registrar permiten facilamente crear una entrada para un subdominio. De esta forma, cada vez que se solicite el subdominio que empleamos para nuestro CDN, el servidor de DNS apuntará a la ubicación real que es la que se encuentra mapeada para nuestro servicio de CDN.
Configuración en WordPress
Para poder emplear exitosamente el servicio de CDN a través de WordPress, necesitamos utilizar un plugin, aquí los dos plugins mas destacados son, CDN Enabler que es un plugin producido por KeyCDN como así también el Worpdress Fastest Cache que permite incorporar no solo CDN sinó también un cache de contenidos para WordPress y que será materia de otro artículo separado. Para este artículo y teniendo en cuenta que nosotros usamos un caché nativo de nginx, vamos a utilizar CDN Enabler
Esta aplicación es sencilla y generica, esto quiere decir que sirve para cualquier servicio de CDN, lo único que hace es reemplazar todas las direcciones y carpetas que le indiquemos, con la dirección nativa de nuestro CDN. En el caso de nuestro sitio, lo configuramos así:
Esto quiere decir, que todos los archivos de wordpress que sean solicitados desde la subcarpeta wp-content/uploads serán pasados al servicio de CDN automáticamente, como así también los archivos de la carpeta static que es donde mantenemos todos nuestros logos y contenido estático. El plugin simplemente reescribirá estos contenidos con la nueva dirección, de esta forma:
https://tecnogaming.com/wp-content/uploads/imagen.jpg
se convertirá automáticamente en:
https://cdn.tecnogaming.com/wp-content/uploads/imagen.jpg
Este reemplazo automático activará a su vez al servicio de CDN y le indicará que almacene el contenido de esa dirección en el cache global del servicio y lo reparta por todos los servidores activados. En el caso de websites que utilicen https es absolutamente necesario realizar los request en modo HTTPS para no romper la funcionalidad.
Resultados despues de varias semanas
Una vez que tenemos el servicio funcional por varias semanas, podemos apreciar la siguiente información en el reporte que nos ofrece el servicio de CDN de CDN77.
Las franjas rojas implican el contenido no-cacheado mientras que las azules implican el contenido que fue leído desde el cache. Todo lo que se visualiza como azul implica el ancho de banda que hemos ahorrado desde nuestro servidor y que se ha cargado desde el servicio de CDN, no solo reduciendo la carga de nuestro servidor local sino también permitiendo que nuestros lectores puedan acceder al sitio mas rápidamente, trayendo la mayoría del contenido pesado, desde un servidor cercano a su ubicación.
En el tráfico también podremos apreciar, como 60% del mismo proviene del CDN, indicando también la cantidad de tráfico promedio día a día.
El porte incluye un informe detallado de los hits vs miss esto quiere decir, cada vez que el contenido es accedido a través del CDN se considera un hit mientras que cada vez que el CDN debe acceder a nuestro servidor para traer el contenido inicialmente, se lo considera un miss. El porcentaje de eficiencia es bastante alto, colocando el contenido que se trae desde el CDN en un 72% vs el 28% que fue traído desde nuestro servidor.
Finalmente en el menu de Status podremos estar informados sobre que localidades se encuentran funcionales y que localidades tienen problemas, este menú de estado es útil para diagnosticar la red o saber si existen cortes temporarios.
Pruebas de Performance
Pero de que sirve un servicio de CDN si no podemos medir su performance real y el impacto que el mismo trae en la respuesta del servidor?. Para ellos vamos a realizar una prueba primero sin el servicio de CDN y luego con el servicio de CDN para que sean ustedes testigos de como impacta en la performance final tanto del server como así también la respuesta de tiempo de carga para el lector.
Pingdom Tools
Para ello vamos a usar pingdom tools que sigue siendo actualmente la mejor herramienta para medir el tiempo aproximado que una web tarda en cargar junto con la latencia de cada uno de sus archivos.
Sin CDN
Veamos a continuación que ocurre en las pruebas de velocidad sin CDN, o sea, cargando todo el contenido de nuestro sitio desde nuestro servidor en Carolina del Norte, USA.
El resultado es bueno porque nuestro servidor es bastante potente, sin embargo, recibimos una advertencia de que existe una cantidad excesiva de contenido que transporta cookies y que afecta a la performance, el resultado, un tiempo de carga de 2.73s y un puntaje final de 92.
Con CDN77 activado
Una vez que activamos el CDN vemos un cambio notable.
El tiempo de respuesta ha bajado a 2.46s, el puntaje final subió también a 94 y la mayoría de los assets son cargados desde un dominio sin cookies, recuerdan la configuración de «ignorar cookies» que hemos puesto en CDN77 ?. A su vez, se puede ver que el 60% del contenido está siendo obtenido desde el CDN permitiendo que el server funcione mas ligero, tolere el doble de visitas diarias y ahorre ancho de banda en el proceso.
Conclusión
Implementar un servicio de CDN en tu sitio web es muy importante si estas recibiendo una cantidad cada vez mayor de visitas, principalmente porque permitirá aliviar el tráfico cuando se trata de obtener el sitio desde diversas ubicaciones. Si tu sitio está dirigido a público de Estados Unidos y tu servidor se encuentra en Estados Unidos, quizás no obtengas mucho beneficio, pero si como nosotros, tu público abarca distintos continentes, incorporar un servicio de CDN se hace esencial, siempre que tu sitio tenga muchas visitas. Cuanto mas visitas tengas, cuanto mas efectivo será el uso de CDN y en nuestro caso, la diferencia nos permite aumentar considerablemente el caudal de tráfico, sumando el consumo total del servicio de CDN conjuntamente con el de nuestro servidor. El cambio es notable a la vez que ayudará a tus lectores a tener una respuesta mas rápida a la hora de abrir tu sitio. Recuerda que el tiempo de carga es esencial para mantener a tus lectores interesados.
Por supuesto que entre todos los servicios, nosotros te recomendamos CDN77 no solo por ser un servicio de estupendas prestaciones sino porque además tiene un precio muy accesible.
Agradecemos a CDN77 por proveernos los servicios de Contenido Distribuido que hacen posible que nuestros lectores disfruten de nuestro sitio web de la mejor manera posible
