Usar CDN o cargar archivos desde el servidor

A la hora de crear o programar un proyecto Web que requiera de recursos de terceros existe la controversia de si utilizar los CDN’s o cargar los archivos desde nuestro mismo servidor. Siempre he sido partidario de disponer de los archivos de terceros en el mismo servidor. Todos juntos pero, por temas de rendimiento quizá debamos observar si vale la pena usar CDN’s o no.

Los CDN (Content Delivery Network) son una red de entrega de contenidos compuesta de computadoras que contienen copias de datos colocados en varios puntos de una red con el fin de maximizar el ancho de banda que permita navegar más rápidamente al cliente final.

Muchas plataformas o frameworks ofrecen sus versiones CDN para conseguir este propósito. Uno de los ejemplos más comunes con los que trabajo son por ejemplo Bootstrap que ofrece la posibilidad de usar su versión CDN tanto para cargar los archivos CSS y Javascript de su proyecto de forma compilada.

https://getbootstrap.com/

La librería jQuery, la que más utilizo, también dispone de su versión CDN para las distintas versiones que puedes utilizar:

http://code.jquery.com/

La librería jQuery también puede ser cargada desde Google. Quizá te resulte más interesante utilizar el jQuery CDN de los servidores de Google (en principio el más utilizado. Esto garantiza o aumenta las posibilidades de que el navegador cliente ya disponga de una copia previa y no necesite descargar el fichero para cargar la página más rápido):

https://developers.google.com/speed/libraries/#jquery

La pregunta que nos estamos haciendo es averiguar que es mejor. ¿Cargar los archivos desde su versión CDN o cargarlos en nuestro servidor?

Las principales ventajas de utilizar un CDN son a priori:

• Mayor velocidad en la descarga de los recursos aunque no siempre se garantiza. Debe estar cacheado en el navegador del cliente.
• Ahorro del ancho de banda del servidor propio.
• Uso más efectivo de la caché del navegador.

No todo son ventajas. No podemos dar la responsabilidad del funcionamiento de nuestra Web a un tercero. Es demasiado arriesgado. ¿Qué sucedería si estos están caidos? Deberíamos aplicar algún desarrollo responsable para prevenir la caída de estos CDN’s. ¿Cómo? Muy sencillo. Fíjate en el siguiente ejemplo:

Source code

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery-slim.min.js"><\/script>')</script>

En la primera linea cargamos el jQuery CDN y en la segunda linea observamos si el objeto jQuery está instanciado. Si no lo está, cargamos nuestra librería jQuery que tenemos en nuestro directorio local.

Para concluir este tema, he analizado unas pruebas con GTMetrix y un ejemplo cargando las librerías desde CDN y cargando las librerías desde el propio servidor:

Cargando las librerías desde servidor CDN

Url: https://www.jose-aguilar.com/scripts/css/bootstrap/4.0.0/carousel-with-cdn/

Resultado:

Cargando las librearías desde el propio servidor

Url: https://www.jose-aguilar.com/scripts/css/bootstrap/4.0.0/carousel-without-cdn/

Resultado:

El resultado para esta pequeña prueba ya es notable. Utilizando los CDN los PageSpeed e YSlow score son  mejores, el tiempo de carga es menor en 3 mili-segundos a pesar de que el tamaño de la página es mayor en KB.

¿Tu cómo prefieres trabajar en tus proyectos?