CDN: Content Delivery Network y Jquery

Una Content Delivery Network o Content Distribution Network (CDN) es un sistema de computadoras conteniendo copias de datos almacenados en varios nodos de la red.

Cuando se diseña e implementa un CDN bien, puede mejorar el acceso a los datos por medio de sistemas de cache con lo que se incrementa el ancho de banda de acceso y reduce la latencia de acceso. Los tipos de datos a menudo contenidos en CDNs incluyen objetos web (textos, gráficos, URLs y scripts) , objetos descargables (ficheros multimedia ,software, documentos) , aplicaciones, live streaming media y queries de bases de datos.

Razones para utilizar librerias jQuery CDN hosted  por Google

(Fuente: http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/)

Veamos ahora 3 razones por las que deberiamos dejar que google haga hosting de las librerias  jQuery que queramos utilizar.

Muy a menudo, encontramos código similar a este cuando vemos el código fuente de webs públicas que utilizan jQuery:

[codebox 1]

Si estamos haciendo esto en una web hecha para el público , lo estamos haciendo mal.

En su vez , te recomendamos utilizar las librerias AJAX de Google publicadas por CDN para servir jQuery a tus usuarios directamente desde la red de centros de datos de Google. Hacer esto tiene varias ventajas sobre el hosting de las librerias de jQuery en tu propio servidor. Son las siguientes:

[codebox 2]

1ª) Menor tiempo de latencia

Un CDN – abreviatura de Content Delivery Network – distribuye tu contenido estático entre servidores en diferentes localizacioes físicas. Cuando el navegador de un usuario resuelve la URL de estos ficheros, lo que hace es descargarlos automáticamente del servidor disponible más cercano.

En el caso del Google’s Ajax Libraries CDN lo que quiere decir es que cualquiera de los usuarios de tu web que no esté precisamente cerca de tus servidores será capaces de descargarse más rapidamente jQuery que si tú los forzas de tu servidor que puede estar en una localización arbitraria dependiendo de la empresa que te haga hosting de tu espacio web.

2ª) Mayor paralelismo

Para eliminar innecesarias sobrecargas de los servidores , los navegadores limitan el número de conexiones que puede realizarse simultaneamente. Dependiendo del navegador, este limite puede ser tan lento como dos conexiones por host (esto sobre todo tiene sentido en dispositivos móviles donde los conexiones de internet tienen una capacidad reducida).

Utilizar las Google Ajax Libraries CDN elimina el que se haga una sola petición por site, permitiendo que asi se pueda descargar más de lo que es el contenido propio de tu web en paralelo. Esto no supone una diferencia apreciable para aquellos usuatios que tienen navegadores que pueden tener hasta seis conexiones concurrentes en cada momento, pero sí a aquellos que aún ejecutan navegadores que solo permiten dos conexiones simultaneas.

3ª) Mejor Cache

Potencialmente el mayor beneficio de utilizar Google AJAX libraries CDN es que tus usuarios igual hasta no necesitan descargarse jQuery!

No importa como de bien esté optimizado tu web, si estás haciendo hosting de tus librerias jQuery en tus propios servidores entonces tus usuarios deben descargarselo al menos una vez. Cada uno de tus usuarios probablemente ya tiene docenas de copias identicas de jQuery en la cache de sus navegadores, pero estas copias de jQuery son ignoradas cuando ellos visitan tu site.

Sin embargo, cuando un navegador ve la referencia de una jQuery CDN-Hosted, entiende que todas estas referencias se refieren al mismo fichero. Con todas estas referencias CDN apuntando a exactamente las misma URLs, los navegadores pueden confiar que esos ficheros son idénticos y no van a gastar tiempo haciendo un request del fichero que ya está cacheado. Asi, el navegador es capaz de utilizar una sola copia que está cacheada en el disco, independientemente de cual es la referencia CDN que tiene.

Esto crea un potente efecto “cross-site caching” del que todos los sites que utilizan CDN se benefician. Ya que Google’S CDN sirve el fichero con cabeceras que intentan cachear el fichero por al menos un año, este efecto verdaderamente tiene un potencial real. Con miles de webs en la red que utilizan Google CDN para servir jQuery, es bastante posible que muchos de tus usuarios nunca hagan una sola petición HTTP para el jQuery cuando ellos visitan sites que utilizan CDN.

Implementación

Por ahora , tu probablemente estarás convencido de las ventajas de las Google Ajax Libraries CDN , asi que veamos cómo utilizarlas.

De los dos formas disponibles, esta opción es la que Google recomienda  utilizar google.load. Es la aproximación que ofrece mayor funcionalidad y rendimiento.

Por ejemplo:

[codebox 3]

De todos modos vemos que no parece ser la mejor opción:
Firebug image of the longer loading time caused by jsapi

Como podemos ver , la carga, perseo y ejecución de jsapi retrasa la petición de jQuery. No es una cantidad excesiva de tiempo, pero es un retraso innecesario.

Pero lo peor de todo, es que no puedes utilizar el manejador $(document).ready() cuando se utiliza este método de load. Estamos obligados a utilizar el manejador setOnLoadCallBack().

De vuelta a los básico

Como alternativo ofrecemos una forma un poco anticuada: una declaración de <script>. Google también soporta este método.

Por ejemplo:

[codebox 4]

Con esta forma no solo eliminamos el delay del jsapi, sino que tambien eliminamos las peticiones HTTP innecesarias.

NOTA: Puede parecer curioso que la referencia del script no vaya encabezada con “http:”, esto es un truco por el que si utilizamos una sola referencia que funciona tanto en páginas HTTP como en HTTPS

Conclusiones

Según un reciente estudio, Google consumira el 16,5% de toda la capacidad de los consumidores de internet de EEUU durante 2008. Esto parece que puede  hacernos confiar en ellos saben servir contenido de forma eficiente.

Ejemplo de Supermoco

[codebox 5]