jueves, 13 de octubre de 2011

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


jQuery


¿Qué es jQuery?


Tal vez  lo uses en tu blog, ya sea por que lo agregaste al seguir un tutorial, o por que ya lo tenías en la plantilla que descargaste de algún sitio, pero, al escuchar hablar de él por primera vez, pensaste: -¿qué es jQuery?, ¿para qué sirve?-, entonces, primero 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 una 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 mas  veces. Eso puede hacer más lento tu blog, y probablemente evitará que alguno de los efectos o   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 muy corto tiempo en la memoria caché del navegador, entonces si alguien regresa a nuestro sitio en un corto periodo, se tiene que volver a cargar jQuery.




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.



4. Asegúrate de 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 la siguiente (desde la librería CDN de Google)...


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

...ya que el enlace anterior, no es lo mismo que esto:





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 para crear cualquier efecto o animación en la web. Abre los archivos y echa un vistazo a ellos, copiando los enlaces en la barra de direcciones de tu navegador y verás 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



Esto supone problemas para ser guardados en la caché.



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



Si te fijas, 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 sin preocuparnos mucho por el peso de nuestro blog, si seguimos ciertas pautas al usarlo, y contribuir a un mejor almacenamiento en la caché, y beneficiarnos todos.




No hay comentarios:

Publicar un comentario