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)

Ingredientes:
- Imprescindible usar Firefox para la cocción
- 1/2 Kilo de caché
- Unas hojitas de CacheViewer
- Aliñar con Video DownloadHelper

The Killers acaba de lanzar nuevo single y lo ha puesto en su página web para que se pueda escuchar. Pero, ¿y cómo lo descargamos? Fácil y sencillo. Nuestro navegador tiene que almacenarlo temporalmente para luego reproducirlo. La carpeta en la que se guardan esos archivos temporales resultantes de la navegación, para que sea más rápido si volvemos a recargar las páginas, es la caché. Para verlo más claro: cuando abrimos un vídeo en youtube vemos cómo en la barra de progreso hay dos avances: uno más oscuro que nos marca por dónde vamos en la reproducción y otro más claro que nos indica el contenido descargado a la caché.

Para acceder en firefox, abrimos una nueva pestaña mientras estamos escuchando la canción y escribimos lo siguiente en la barra de direcciones:

about:cache?device=disk

De esta forma se listarán todos los ficheros almacenados. Pero si no nos queremos dejar los ojos buscando lo que nos interesa, tenemos una interesante extensión para firefox que nos muestra los contenidos de forma más visual y amigable: CacheViewer. Con ella podremos incluso previsualizar esos contenidos y hacer búsquedas. Sacrificamos la limpieza de firefox (contra menos extensiones tenga instaladas, más ligerito irá) por la comodidad.

También existe un complemento que hace búsquedas de elementos multimedia en las páginas por las que navegamos, para posibilitarnos la descarga. Se trata de Video DownloadHelper. Con esta utilidad incluso podremos hacer conversiones de formatos en el momento (por ejemplo, pasar los famosos .flv de youtube a .avi).

En esta receta me he centrado en las canciones, pero podemos cocinar otros muchos alimentos: ficheros flash, vídeos quicktime, …

¡Bon appétit!