Acelerando, que es gerundio

La semana pasada estuvimos por el Search Congress aprendiendo un poco de ese peculiar mundo que es el del SEO (por cierto, el congreso un poco flojo…). Y si algo me quedó claro es que, en un futuro próximo, cuando Google estrene su nuevo algoritmo (Google Caffeine), el tiempo de carga de nuestras páginas, blogs, etc… tomará un protagonismo estelar. Así que afiné mucho las orejas para anotar formas de optimizarlas. La mayoría de trucos los obtuve del workshop que más me gustó: el de Javier Casares. Son pequeños tips que van rascando milisegundos. Pero pasito a pasito se hacen grandes recortes.

Empecemos con herramientas para poder monitorizar cuál es el estado de nuestra página web. Si usas firefox, dos son tus plugins: firebug + page speed. Con firebug, en la pestaña de red podemos comprobar cuánto tarda nuestra web en cargar, qué elementos se piden y en qué secuencia, si tenemos algún fichero que no está bien enlazado, etc… Y page speed es un complemento para firebug que nos hace un diagnóstico, indicando consejos a seguir.

Aquí os paso unos cuantos:

• Sacar todos los estilos y javascripts a un único css y un único js. Y es que por cada fichero que incluimos, el navegador web tiene que hacer una petición. Esa petición tiene un consumo de tiempo y ancho de banda, así que contra menos ficheros tengamos, mejor. Se recomienda cargar los estilos en el head y los javascripts que no tengan document.write, en el footer y con el atributo defer.
• Cuando tengamos un único css y un único js, lo mejor es reducir el tamaño de ambos. Para ello tenemos dos utilidades muy interesantes: jsmin o YUI Compressor para los javascripts, que pone todo el código en una única línea, reduciendo el tamaño del fichero considerablemente, pero poniendo difícil la posterior edición y revisión del código; Clean CSS o CSS compressor hace lo mismo para los estilos.
• Además de esta reducción de tamaño, hay que habilitar gzip y deflate para comprimir toda la web que se le pasa al cliente. Esto carga la parte servidor porque tiene que hacer la compresión correspondiente por cada petición, pero aligerará mucho al cliente, que recibe menos contenido.
• Hay que comprobar que no enlazamos a ningún fichero que ya no existe. Esto lo podemos revisar con el firebug. Si algún elemento nos devuelve un 404, esto suele retrasar bastante la carga.
• Podemos bajar el tamaño de nuestras imágenes sin bajar su calidad. Dependiendo del tipo de fichero, tenemos varias utilidades que se lanzan desde línea de comandos:
  • PNG: con pngcrush. El uso es el siguiente:
    

    pngcrush original.png optimizada.png

    Si queremos optimizar todos los png’s de nuestro theme, podemos crear una carpeta optimizadas y lanzar el siguiente conjuro:

    for X in *.png; do pngcrush -brute «$X» optimizadas/$X; done

  • JPG: con jpegtran. El uso es:
    

    jpegtran -copy none -optimize -perfect original.jpg>optimizada.jpg

    El conjuro para aplicarlo a todos los jpg’s:

    for X in *.jpg; do jpegtran -copy none -optimize -perfect $X > optimizadas/$X; done

  • GIFs animados: con GIFsicle.
• Si usamos imágenes, lo ideal es poner su ancho y alto en la etiqueta img para que el navegador no tenga que calcularlo.
• Si usamos varias imágenes fijas, lo mejor es cargarlas en un único fichero y colocarlas luego con CSS sprites. Por ejemplo, Google lo hace en su página de resultados. Carga todo en una imagen y luego usa cada uno de los elementos mediante coordenadas. Así se evita un montón de peticiones.
• Con los contenidos estáticos, jugar mucho con la fecha de expiración de la caché (Never expire). De esta forma, el navegador del usuario cacheará los elementos y no los pedirá en posteriores navegaciones. Para los contenidos dinámicos, usar una cabecera Cache-Control apropiada.
• Si tenemos la posibilidad de subir los contenidos estáticos a un dominio diferente del que sirve nuestra página y que no mande cookies por cada elemento, ahorraremos también ancho de banda y tiempo. Además se podrá «paralelizar» la descarga de elementos.

Se dijo por allí que un tiempo razonable de carga es de menos de 2 segundos, así que me temo que muchas nos tendremos que poner las pilas 🙂 .

» Interesante enlace de buenas prácticas para acelerar la carga de páginas webs.

Imagen de Carlos Aguilera (CC by-nd)

Publicaciones relacionadas:

Vistiendo a WordPress: nunca los themes fueron tan fáciles