20 de Julio, 2012

¡Más rápido!

Ayer le eché un rato al tema de optimizar la carga de mi web de crucigramas, porque había notado algunas cosas raras desde que nos han cambiado la conexión en la oficina (hemos pasado de tener enlace directo con JANET a disfrutar de sólo 50/50mbps, aunque creo que es más una cuestión de enrutado que de velocidad).

El caso es que se podía apreciar un pequeño parón de unos milisegundos al principio de la carga y, aunque sospechaba cuál era el motivo, hay algunas herramientas que pueden ser realmente útiles para analizar cómo carga nuestra página web:

  • Page Speed (de Google): es la que más me gusta, el informe es bastante claro y fácil de entender.
  • YSlow (de Yahoo!): requiere Firebug en el caso de Firefox, y la verdad es que los informes son algo peores comparados con Page Speed (por ejemplo cuando te recomienda: usa un CDN; claro, qué fácil :P). Digamos que una segunda opinión no viene mal.
  • REDbot (de Mark Nottingham): esta herramienta es menos conocida pero resulta muy útil para verificar que las cabeceras HTTP que generamos son correctas, sobretodo cuando estamos añadiendo temas para optimizar el uso de cachés (de hecho me ayudó a cazar un bug en la implementación del CDN de Memstore).

Con estas herramientas pude corregir lo que había notado: los trozos de Javascript externos pueden ralentizar la carga de la página (por ejempo: el +1 de Google+), porque el navegador deja de cargar hasta que se ha ejecutado ese código.

Tenía un par de esos scripts mal situados en la cabecera y es mejor que estén al final del cuerpo de la página (y además los tenía antes de que se cargara uno de los CSS necesarios para dibujar la página, ¡fatal!). De esta forma ya acabarán de cargar esos scripts cuando sea, sin afectar demasiado a lo que ve el usuario: la página carga igual de rápido, pero en un orden más lógico que permite que sea utilizable mucho antes.

El resto estaba bastante bien, por experiencia ya sé qué hay que hacer y cómo, así que solo tuve que añadir algunas cabeceras para gestionar mejor los cachés web y ajustar la compresión gzip de un par de contenidos.

Al final, ¿se nota? Bueno, varias secciones de la web se cargan en segundo plano con Javascript y ahora no hay forma de ver la spinning wheel que muestro mientras carga, con lo que... ¡va más rápido!

Anotación por Juan J. Martínez, clasificada en: cache, javascript.

Los comentarios están cerrados: los comentarios se cierran automáticamente una vez pasados 30 días. Si quieres comentar algo acerca de la anotación, puedes hacerlo por e-mail.

Algunas anotaciones relacionadas: