Después de haber visto cómo realizar una buena compresión de ficheros y cómo optimizar las llamadas HTTP, hoy vamos a analizar una nueva técnica para mejorar el tiempo de carga de nuestra página web. Utilizaremos para ello un servicio llamado CDN, de las siglas anglosajonas "Content Delivery Network" o traducido al castellano "Red de distribución de contenidos".
¿Qué es una CDN?
Básicamente es una red de servidores proxy distribuidos en distintos puntos del mundo con el objetivo de garantizar la conectividad y servir, en el menor tiempo posible, distintos tipos de ficheros y servicios (imágenes, textos, audios, scripts, etc).
Latencia
La distancia geográfica que existe entre tus servidores y tus visitantes tiene un gran impacto en la experiencia de usuario, ya que determina el tiempo de carga de tu web. Cuanto más cerca estén los usuarios del servidor, menor será el tiempo en el que el navegador solicite un fichero y reciba el primer byte de respuesta (también conocido como TTFB "Time To First Byte"). A este tiempo se le llama "tiempo de latencia".
Voy a tratar de explicarlo con una simple analogía:
Supongamos que vas a hacer la compra semanal a un supermercado que te queda a 950 metros de tu casa. Vuelves a tu casa con todas las bolsas (y algo sudado) habiendo gastado 45 minutos de tu valioso tiempo.
A los dos meses el supermercado anuncia que abre una nueva sucursal exactamente igual a la que ibas solo que se encuentra a 220 metros de tu casa y que los precios de los productos son solo un poco más caros. Aceptas pagar esa diferencia y en esta ocasión haces la misma compra pero solo en 16 minutos. Estarás eternamente agradecido por haber conseguido un ahorro de tiempo que te permite poder aprovechar esa diferencia en realizar otras actividades que te generen más dinero.
Una CDN tiene todos los ficheros que componen una web replicados en distintos puntos del mundo con la finalidad de que recorran menor distancia hasta los usuarios.
A la izquierda puede observarse una red de distribución única. A la derecha se puede ver la infraestructura de una CDN.
Cada uno de los servidores alrededor del mundo con una copia de nuestra web es llamado PoP "Point of Presence". En el gráfico anterior podemos ver a la derecha que nuestra web está presente en 5 PoP's.
¿Cómo medir el tiempo de latencia en Chrome Inspector?
Una vez que tenemos el inspector de elementos activado (CMD + I o Ctrl + I) debemos hacer clic con el botón secundario para abrir las opciones de visualización de columnas. Allí seleccionaremos Waterfall » Latency.
Una vez seleccionado veremos lo que se modifica en la gráfica de la columna Waterfall.
Cada barra de color nos está indicando el tiempo que ha esperado el navegador para recibir el primer byte de la petición actual. Para una información más detallada podemos posicionarnos con el ratón sobre cada una de estas barras, obteniendo un cuadro de información como el siguiente:
¡Me gusta! ¿Dónde puedo comprarme una CDN?
Como siempre hay una gran variedad de CDN disponibles en el mercado y cada una de ellas brinda distintos servicios con sus respectivos precios. En GoDaddy podrás disfrutar de la CDN incluido en las herramientas de seguridad web y eliminación de malware disponibles en la web.
Estos son algunos de los puntos a tener en cuenta a la hora de seleccionar un proveedor de CDN:
- Puntos de presencia: Que una empresa tenga muchos PoP's no siempre será mejor. Todo dependerá de lo cerca que se encuentre de nuestro público objetivo. Por ejemplo: si escribimos un blog deportivo con noticias de la liga brasileña lo ideal sería contratar alguna empresa que tenga puntos de presencia en San Pablo.
- Potencia del servidor: Que el PoP esté cerca de nuestro público objetivo no implica que entregue contenido de forma rápida. El servidor tiene que estar preparado para trabajar y garantizar bajos tiempos de latencia aún en situaciones de alto tráfico o picos de visitas.
- Seguridad HTTPS: Debemos asegurarnos de que el servicio sirva los contenidos bajo el protocolo HTTPS para garantizar la seguridad del tráfico de los ficheros.
- Presupuesto: Algunos servicios tienen planes mensuales y otros facturan por transferencia de datos. Deberemos buscar aquel que se ajuste mejor a nuestro presupuesto. Existen también algunas opciones gratuitas de CDN como el producto Photon de Jetpack.
Photon: una CDN gratuita para WordPress
Una buena forma de mejorar nuestro tiempo de respuesta y de forma gratuita, es instalando el plugin Jetpack el cual viene con un servicio de CDN llamado Photon.
Ventajas de Photon:
- Es muy simple de instalar y configurar.
- Automáticamente redimensiona las imágenes para dispositivos móviles.
- Como dije anteriormente, es totalmente gratuito.
- Permite la carga ilimitada de imágenes y fotos.
Desventajas de Photon:
- Necesitaremos tener una cuenta en wordpress.com, algo que no suele ser de mucho agrado para muchas personas.
- Jetpack es un plugin que ofrece muchas otras funcionalidades. De esta forma estaríamos agregando una gran carga de procesamiento extra a nuestra web solamente para implementar el servicio de CDN.
- Perderemos SEO de imágenes ya que están indexadas con otro dominio.
Instalando Photon
Una vez activado el plugin de Jetpack (y asociado a nuestra cuenta de WordPress.com) solo basta con ir a las configuraciones y pulsar el switch "Rendimiento de imágenes". Y eso es todo. A partir de ahora todas nuestras imágenes estarán replicadas y distribuidas a lo largo de todo el mundo.
Veamos en la siguiente imagen cómo cambia el dominio de las fotos que incluyamos de ahora en adelante en nuestras entradas o páginas.
Conclusión
Sea de pago o de forma gratuita, tener una CDN nos ayudará muchísimo a mejorar los tiempos de carga de nuestra web, con todos los beneficios que ello genera.
Ten en cuenta las especificaciones de tu proyecto, tu posible presupuesto de inversión y luego analiza qué proveedor es el que se ajusta mejor a tus necesidades.
Recuerda que tienes a tu disposición como parte del programa GoDaddy Pro el webinar con Ignacio Cruz sobre WPO, donde se analizan más técnicas que complementan la serie de artículos publicados en el blog de GoDaddy.
