> Manuales > Manual de jQuery

Qué es un CDN y cómo usarlo para incluir la librería jQuery de una manera más optimizada. Ventajas e inconvenientes de usar servicios CDN en un sitio web basado en jQuery.

jQuery CDN o hosting local de las librerías

Como hemos visto en nuestro Manual de jQuery, el primer paso para poder trabajar con este framework Javascript es incluir el script de la librerías en la página con una etiqueta <script>, ya sea en el HEAD del documento HTML como antes del </body>.

Esto no tiene ningún misterio, pero sí que hay algún detalle interesante que podemos tener en cuenta para optimizar la velocidad de nuestro sitio web. Se trata de utilizar el servicio CDN de jQuery, o de otros proveedores como Google Code, lo que nos ofrecerá ventajas, aunque también en algún caso, posibles inconvenientes. Vamos a ver todo esto en el presente artículo.

Qué es un CDN

CDN significa Content Delivery Network, que se traduciría como red de entrega de contenido que tiene la particularidad de estar replicada en distintas localizaciones geográficas, para optimizar la transferencia de los archivos.

Para el caso particular de jQuery, el CDN es un servicio que nos permite incluir código de la librería desde los servidores de algunas importantes empresas. Es decir, en lugar de enlazar con el archivo de código jQuery que hemos publicado en nuestro servidor, enlazaremos con el archivo que está en el CDN.

Hay que mencionar que jQuery no es el único software que podemos incluir vía CDN, sino que es posible hacerlo con prácticamente cualquier librería publicada en npm. Por lo que, para muchos frameworks y librerías del entorno web, es posible usar CDNs para obtener sus paquetes de código.

En resumen, cuando usamos un CDN, en vez de enlazar con los scripts de jquery alojados en nuestro sitio web, linkamos directamente con una URL de otro dominio que los aloja por nosotros. Esto no se hace por ahorrar espacio, sino por disponer de una mayor velocidad de entrega de nuestro sitio. Lo explicaremos detalladamente por medio de una serie de ventajas más adelante en este artículo.

Servicios CDN de jQuery

Diversas empresas ofrecen el código de jQuery para enlazarlo en nuestros sitios web basados en la librería. Los podemos enlazar directamente de esos servidores, haciendo lo que se denomina "hotlinking". En este caso sería un hotlinking deseable, puesto que estos servidores CDN están pensados justamente para ello.

Hotlinking es una técnica que podríamos traducir como "linkado caliente" y se refiere a enlazar un recurso externo con la URL de otro servidor, de otro dominio. Esto no es muy deseable en recursos como imágenes, pues en lugar de descargarlas desde nuestro propio dominio, los visitantes, al entrar en nuestra web, las obtendrían desde dominios de otros proveedores, lo que se puede considerar como un robo de ancho de banda.

Google Code

Contiene links a los frameworks Javascript más populares, con CDN de jQuery, Mootools, Prototype y muchos otros.

Más información en https://developers.google.com/speed/libraries?hl=es-419

En este CDN puedes obtener las URL de las versiones de jQuery 1, 2 y 3.

Microsoft CDN:

Dispone de una red de contenido distribuido con CDN de varias librerías Javascript y Ajax, como jQuery o Modernizr. Encontramos más información en la dirección https://learn.microsoft.com/en-us/aspnet/ajax/cdn/overview#jQuery_Releases_on_the_CDN_0

También podemos encontrar versiones de todos los tiempos de jQuery para enlazar la que más nos interese.

CDN jQuery:

El propio jQuery ofrece una red CDN para descarga de sus librerías, a partir de la ruta https://releases.jquery.com/, donde podemos encontrar versiones de la librería diversas y además el código lo encontramos minimizado y sin minimizar.

Algunos CDN como el oficial de jQuery ofrece la descarga de la librería en versión minimizada (minified), que está indicada para sitios en producción, así como en versión estándar (uncompressed), la cual está indicada para sitios en desarrollo. La versión minimizada ocupa menos espacio, ya que el código está compactado, por eso se suele usar para un sitio que publicas online, ya que ayudará a que el archivo de jQuery ocupe menos. Algunos CDN solo ofrecen versiones minimizadas. Debes consultar los servicios CDN para obtener más información.

Cómo enlazar con un CDN

Generalmente, para incluir jQuery a través de un CDN colocaremos la etiqueta <script> con el atributo src en la ruta que nos proporcionen en el servicio de CDN que hayamos escogido.

Por ejemplo, el script de jquery lo colocaríamos así:

<script src="https://code.jquery.com/jquery-3.6.4.slim.min.js"></script>

Los CDN tienen habitualmente soporte para transferencia de las librerías por HTTP y HTTPS. Lo ideal es usar las URL por HTTPS porque así será una descarga segura. Además, si nuestro sitio también funciona por HTTPS, nos aseguramos que no nos saldrán advertencias de contenido inseguro en la consola de Javascript.

A veces encontrarás que al enlazar con los CDN se omite el protocolo, quedando la ruta más o menos así:

<script src="//code.jquery.com/jquery-3.6.4.slim.min.js"></script>

Esto se puede hacer para que sea el propio navegador quien decida qué protocolo usar para descargar ese fichero, tanto en HTTPS como en HTTP. La decisión la hará en función del protocolo que haya usado para descargar el sitio web que enlaza con el CDN.

Ventajas e inconvenientes de los CDN

En la mayoría de los casos, usar un servidor CDN es una buena idea, por diversos motivos, entre los que podríamos resumir:

Como todo en la vida, también podemos encontrar algunos inconvenientes:

CDN más fácil y mejor, pero todavía se puede optimizar más

Como habrás podido comprobar, en la mayoría de los casos, utilizar un hosting CDN es una opción. Sin duda, las ventajas en este caso superan a los inconvenientes, sobre todo para sitios que están en producción.

Sin embargo, todavía se puede optimizar un poco esta situación y crear un script sencillo que permita hacer una combinación entre las dos opciones, es decir, el hosting CDN cuando esté disponible y el hosting local en los casos en los que no esté activo el servidor CDN por cualquier motivo.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual