Hoy os muestro algunos consejos para conseguir que vuestras webs reduzcan su tiempo de carga:

- Crea las imágenes para el tamaño exacto que se vaya a mostrar en la web. Las imágenes de mayor tamaño ocupan más y en gran parte de los navegadores producen aliasing (dentellado) al ser redimensionadas.

- Crea los botones iluminables con transparencias. En bastantes casos se pueden sustituir rollovers creados a base de 2 imágenes por una sola imagen con transparencia y un cambio de color de fondo.

- Usa formato gif para imágenes pequeñas o vectoriales. A la izquierda muestro un ejemplo de logotipo en gif que ocupa menos de 2kb y a la derecha el mismo logotipo con jpg ocupando más de 7kb (y mostrando menor calidad).

- Ajusta el nivel de compresión para cada imagen jpeg. Se trata de una tarea bastante laboriosa, pero puede reducir ampliamente el tamaño de una página.

- El formato png8 ofrece a veces mayor compresión que gif. Para que se muestren los colores de un png idénticos en cualquier navegador a su equivalente en gif, es necesario eliminar el gamma del fichero, cosa que se puede hacer mediante utilidades tipo TweakPNG.

- Las versiones antiguas de Photoshop no disponen de un buen compresor para png, puedes usar Gimp o compresores png especializados para reducir el tamaño.

- Activa la compresión gzip de Apache para los ficheros javascript, css y tml. En el caso de que tu web use librerías como Prototype es especialmente importante; sin gzip son 120kb de descarga, con gzip por debajo de 30 kb.

- Si usas Wordpress, instala una cache. Wordpress sin cache puede tomar varios cientos de milisegundos en generar la página.

- Siempre que sea posible, agrega width y height a tus imágenes <img>. Esto no acelera la carga, pero hace que el navegador no tenga que renderizar varias veces el contenido a medida que recibe las imágenes. Se percibe especialmente en conexiones lentas.

- Para mostrar listados muy grandes (más de mil registros) es preferible usar divs a tables aunque el contenido esté semánticamente mejor representado con tables. La mayoría de navegadores renderizan varias veces más rápido los divs que las tablas (con diez mil registros supone varios segundos de diferencia).

- Usa el menor número de ficheros posible. El tiempo de descarga para un fichero incluye la latencia entre el cliente y el servidor. Cuando se realizan varias peticiones de ficheros simultáneamente, el tiempo de latencia no se acumula. Navegadores como Internet Explorer y ciertas versiones de Firefox no solicitan todos los ficheros de una página al mismo tiempo, están limitados a descargas de 4/5 ficheros en paralelo. Es decir, para un número elevado de ficheros, en el tiempo de carga se incluye una cuarta o quinta parte de la latencia multiplicada por el número de ficheros. Es por ello que es conveniente reducir el número de ficheros al mínimo posible. Un ejemplo concreto es mi portfolio: Desde España (donde la latencia es considerable porque el servidor está en USA), en Internet Explorer y Firefox la carga dura 2 segundos más que en Opera (Opera parece solicitar todas las imágenes simultáneamente).

- Las ventajas de los ficheros .css y .js suelen ser muy claras; se pueden compartir entre diferentes páginas de una misma web y la carga sólo se realiza una vez dado que permanece en cache. Sin embargo, para páginas que no tengan secciones o cuyo acceso a las secciones sea infrecuente, es posible que se mejore levemente el tiempo de carga incrustando los códigos en el html.

- En ocasiones concretas se puede sustituir toda la librería Prototype (y similares) por un iframe y/o unas cuantas líneas de javascript.

Algunos consejos eran bastante conocidos y frecuentes hace varios años, pero parece que con el aumento de la velocidad de conexión se han ido olvidando. Espero que se os haya refrescado un poco la memoria con este post :)