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.

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.

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.

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:

• Mayor velocidad de entrega: Los servicios CDN están ofrecidos por grandes empresas, con replicación de servidores y diversas localizaciones de entrega a lo largo del mundo. Posiblemente Google, o cualquiera de los otros provedores CDN, pueda enviar el script jQuery más rápido que tu propio servidor y lo distribuya desde una localización más cercana a la red del cliente que te visita.
• Cacheado probable: Es muy probable que la persona que te visita ya haya cacheado el script jQuery, tras la visita a otra página web que esté usando también el CDN de alguna de estas empresas. Por ello quizás no tenga ni que esperar a que descargar el framework y utilice la copia que ya tiene en la caché del navegador.

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

• Necesitamos estar conectados a Internet para acceder al CDN: Durante el desarrollo del sitio web, si estamos offline, sería imprescindible acceder a la copia en local de las librerías para que nuestra web funcione. Si necesitamos probar la web en entornos donde quizás no dispongamos de Internet (por ejemplo, la oficina de un cliente donde no sabemos si van a estar "online"), nos interesaría acceder a las librerías por medio de la copia en local.
• Tenemos menor control: No puedes tener total control sobre lo que estás trayéndote como script. Claro que el script estará correcto, pero no podrás modificarlo si lo necesitas, ya que está en otro servidor. Esto generalmente no será un problema, pero hay algunos marcos en los que en la práctica sí interesa tener un poco más de control. Por ejemplo, en el caso de algunas librerías que permiten incluirse solo parcialmente (por ejemplo en Mootools somos capaces de seleccionar qué módulos del framework deseamos, o en jQueryUI qué widgets queremos utilizar), no será posiblea través de la versión que nos traemos por el CDN.

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.