13 octubre 2011

6 Cosas que tienes que saber cuando usas jQuery en tu blog

jQuery

Tal vez tu blog tenga agregado jQuery, o lo agregaste al seguir un tutorial, pero, no sepas que és o al escuchar hablar de él por primera vez, tal vez pensaste: -¿qué es jQuery?, ¿para qué sirve?-.

¿Qué es jQuery?

Empecemos por entender de manera sencilla que es jQuery.
jQuery es una librería de código JavaScript, que facilita o permite la creación de animaciones, efectos, entre otras cosas, que pueden hacer que tu página o blog, sea más interactiva y dinámica, incluso divertida.

No es necesario ser todo un experto en JavaScript para usarlo; de hecho, parte de la misión de jQuery es "escribir menos y hacer más". En otras palabras jQuery está pensado en hacer más simple usar JavaScript, ya que es posible ahorrarse mucho trabajo, para conseguir efectos y animaciones espectaculares.

Pensando en que es muy común su uso, hoy veremos algunas cosas que deberías tener en cuenta a la hora de usarlo:

1. Asegúrate de usar la versión más actualizada de jQuery.
Así como los navegadores se actualizan, jQuery lo hace con el fin de solucionar algunos bugs (errores) buscando siempre maximizar su rendimiento, por lo tanto, es recomendable usar la versión actualizada de esta librería, a menos que el creador de algún complemento indique lo contrario, y que definitivamente deberían ser razones de peso.

2. Agrega jQuery solo una vez en la plantilla.
Solo necesitas agregar jQuery una sola vez, independientemente de que uses distintos efectos o animaciones, usando esta librería. Puede ser que siguiendo varios tutoriales, lo hayas agregado dos o más veces. Eso puede hacer más lento tu blog, y probablemente evitará que alguno de los efectos o lo que se pretenda conseguir no funcione.

3. Utiliza la versión de jQuery especificando la versión exacta, no la que facilita el sistema de versiones de Google con el fin de recibir automáticamente la versión más actualizada, por ejemplo:

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

En estos momentos (a la fecha de hoy) se obtendría esto:

http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js

Esto contribuye a un corto periodo de almacenamiento en la caché. Eso quiere decir, que la copia del archivo se va a guarda por un espacio de tiempo pequeño en la memoria caché del navegador. Entonces si alguien regresa a nuestro sitio en un corto periodo, se tiene que volver a cargar jQuery, incrementando así el tiempo de carga del blog de forma innecesaria.

Paul Irish quien forma parte del equipo de jQuery, hizo una investigación sobre el tiempo que dura guardado en la caché al usarlo de ese modo . Puedes visitar la página para conocer los detalles.

4. Asegúrate que lo hayas agregado en la sección del <head>. Eso es lo que recomiendan los desarrolles de esta librería. En el caso de nuestra plantilla, colocarlo antes de </head>, es lo ideal.

5. Verifica que uses el enlace a la versión comprimida o de producción. A esta versión se le conoce en inglés como: "minified", que es más compacta y ligera pues el código ha sido comprimido. La reconoces porque la URL lleva "min" antes de la extension .js. He aquí cómo se ve la que facilitan desde la librería CDN de Google:

http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js

Ya que la URL anterior, no es lo mismo que esta:

http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js

Esa es la versión recomendada por jQuery ya que junto con la de paquete, son las mejores versiones para el despliegue de producción, es decir, para usarlas en cualquier sitio web.

Abre los archivos y echa un vistazo a ellos, yendo a la dirección de jQuery, si pons la URL de éste y das enter. Vas a poder ver la diferencia, la primera es más compacta, por lo tanto es más ligera.

6. Verifica que uses el protocolo (HTTP), no HTTPS, como lo usan las páginas que cuentan con la certificación llamada SSL, como por ejemplo PayPal, Twitter, Facebook (estos últimos permiten ambas).

Entonces sería:

http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js

No:

https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js

Utilizar el encabezado HTTPS, supone problemas para ser guardado en la caché del navegador, por lo tanto no beneficia el rendimiento de la página web o blog.

O todavía mejor, y como lo menciona mi referencia anterior. Utiliza una URL relativa para enlazar jQuery para que sea descargado en el blog, es decir, sin poner protocolo HTTP o HTTPS.

Entonces, la URL de jQuery desde la libreria CDN de Google, se vería así:

//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js

Como puedes ver, no lleva protocolo HTTP o HTTPS.

¿Sabes alguna recomendación que pueda ayudar a tener un mejor rendimiento de jQuery en nuestro sitio?, no dudes en compartirla ;)

Conclusiones

Es posible usar esta maravillosa librería si seguimos ciertas pautas al usarlo que puedan contribuir a un mejor almacenamiento en la caché, y beneficiarnos todos.

Aviso: ¡Todos los comentarios publicados desde el 2013 se han perdido!. Ésto debido a que Google ha eliminado el sistema de comentarios de Google+. Lamentamos enormemente este hecho, pues se ha perdido toda la participación y/o retroalimentación en las entradas desde dicho año.