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)

Lorena Fernández Álvarez (@loretahur)

Ingeniera salsera. Actualmente, directora de comunicación digital de la Universidad de Deusto. Miembro del grupo experto de la Comisión Europea Gendered Innovations para analizar el impacto de no incorporar la perspectiva de género en la Inteligencia Artificial. Colabora en el programa de radio “Hoy por Hoy Bilbao” de la Cadena SER desde 2009 con una sección sobre nuevas tecnologías. Además, es jurado del premio Ada Byron a la mujer tecnóloga y mentora del proyecto Inspira STEAM, un proyecto que busca el fomento de la vocación científico-tecnológica entre las niñas. Ha creado junto a Pablo Garaizar e Iñigo Maestro el juego de mesa Nobel Run.

4 thoughts on “Acelerando, que es gerundio

  1. Gracias por el resumen Lorena. Yo lo de comprimir el CSS no lo veo… Y es que el CSS es algo que se suele tocar bastante y conviene tenerlo accesible y bien estructurado para no perderte. Con respecto al resto de consejos… interesantes pero difíciles de llevar a la práctica para webmasters aficionados 🙂

  2. Lo que dice Javier Casares son muy buenos consejos para cualquier Página Web, pero dudo que para Google sea un factor determinante, la velocidad de carga, para mi sería un error.

    Lo que importa es el contenido no el tiempo que tarde en cargar una página (salvoq eu se una eternidad), como mucho podría ser una opción, que la página de búsqueda de Google tuviera una opción para mostrar resultados en función del tiempo de carga de las páginas.

  3. @aitor la parte del css tiene una fácil solución: tener una versión legible por humanos y luego la definitiva comprimida. Las herramientas de compresión se lanzan en un ti-ta 😀

    @ketari siento decirte que va a ser un elemento bastante importante. De hecho, es un parámetro que se puede revisar ya en las webmasters tools. Y no lo dijo sólo Javier, sino todos los que participaron en workshops y mesas.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *