Optimizando para la web: peso de las páginas

Si consideramos las limitaciones actuales de Internet en Latinoamérica, las páginas web deben ser creadas teniendo en cuenta la velocidad de descarga. Como primera premisa, las imágenes deberían ser reducidas para alcanzar niveles razonables, y los elementos multimedia deberían ser solamente usados cuando verdaderamente ayuden al usuario a comprender o complementar el contenido, de esta manera los usuarios con anchos de banda limitados, no deberían "comerse" páginas muy pesadas.

El peso de una página no solamente engloba el archivo html visible, sino también, todos los objetos que forman parte de él, como ser imágenes, aplets, hojas de estilo, etc. Si tenemos en cuenta que en Internet este factor esta asociado al tiempo de respuesta según la conexión del usuario, significa que el tiempo de descarga de la página aumenta aún más.

Según estudios hechos en laboratorios de usabilidad en casos de tiempos de espera muy largos, también juega un papel en contra la expectativa del usuario. Está comprobado que 1 segundo es el tiempo de respuesta máximo que se requiere para que los usuarios sientan que se mueven con libertad dentro de un espacio de información y 10 segundos es el límite del tiempo de respuesta de un sistema para mantener la atención del usuario en una tarea. O sea que si pretendemos que nuestro usuario no cierre el navegador, deberemos intentar ofrecerle la información en un lapso no mayor a 10 segundos.

La siguiente tabla muestra el máximo permitido para el peso de una página tomando en cuenta los estudios de ergonomía realizados sobre los tiempos de respuestas, arriba mencionados.

Como para que te des una idea, en 10 segundos

• Con un modem bajarán 34 Kb
• Con una conexión ISDN bajarán 150 Kb
• y con una conexión tipo T1 bajarán 2 Mb

Esto nos deja con un margen aproximado de hasta 34 Kb para ofrecer una experiencia satisfactoria a nuestro usuario, pero a no desanimarse, se pueden lograr cosas muy buenas dentro de estos parámetros, solo hace falta creatividad e imaginación.

Igualmente y a modo de opinión personal, creo que los 34 Kb son aplicables a las páginas principales, las de mayor acceso y aquellas que sirven de nexo con el contenido, las páginas que contienen los documentos finales con la información que el usuario espera obtener, suelen ser esperadas un poquito más, es decir, por el contenido, el usuario aguanta (pero no abusemos), en tanto que lo que obtiene vale la pena, pero si una página principal, tarda cerca de 1 minuto en cargar les aseguro que el usuario se sentirá defraudado cuando vea que todavía no encontró lo que estaba buscando y no sabe precisamente en cual click lo hará.

¿Cómo podemos reducir el peso de nuestras páginas?

Con una buena dieta que contemple:

• Minimizar el uso de imágenes cuando no sea necesario.
• Optimizar al máximo las imágenes a utilizar.
• Utilizar hojas de estilo para disminuir el código html destinado al formato y controlar este último de forma eficiente.
• Utilizar celdas coloreadas, cambios de tipografías y otras variantes para diseñar creativamente.

¿Cómo hago para optimizar las imágenes?

Para obtener imágenes de rápida descarga, debemos tener en cuenta:

• Elección del formato más conveniente, básicamente son dos: Gif89a (gif) y Jpeg (jpg), no hay un formato mejor que otro, ello dependiendo del uso que se le dé.
  • El formato GIF permite realizar transparencias y animaciones, pero solo con un máximo de 256 colores., asi que su uso es recomendable en iconografía, animaciones y gráficos con transparencia.
  • El formato JPG posee una compresión mayor por lo tanto puede almacenar alrededor de 65000 colores sin incrementar demasiado su peso. Por lo tanto es más conveniente su uso en fotografías o gráficos de gran definición.
• Con respecto a la resolución se debe tener en claro que la resolución a usar es siempre de 72 dpi (puntos por pulgada) ya que está es la resolución de la pantalla, con lo cual una resolución mayor solo incrementa el peso pero no la calidad de la imagen.
  • En el caso del Gif la optimización se logra disminuyendo la cantidad de colores que utiliza el gráfico, por ejemplo, si la imagen es un texto con el fondo transparente no necesitaremos más de 4 colores (1 para el fondo transparente y otros 3 para el cuerpo de la letra con el degrade del borde).
  • JPG se optimiza reduciendo la calidad de la imagen.

También existen ciertos trucos para hacer que las páginas descarguen más rápido (Jakob Nielsen’s Alertbox for March 1, 1997):

• La cabecera de la página, debería ser significativa aún antes de que se carguen las imágenes.
• Utilizar los textos alternativos de las imágenes para que el usuario pueda entender de qué se trata antes de que termine de cargar.
• El Navegador debería dibujar la cabecera de la página de forma rápida, esto sólo es posible si posee la información para el formato necesaria como por ejemplo los tags WIDTH y HEIGHT en las imágenes y tablas.
• Las tablas complejas tardan mucho tiempo en armarse, si poseemos este tipo de componente lo mejor es dividirla en tablas pequeñas y que la tabla superior sea simple y facil de cargar.

Hasta la próxima.

Enlaces recomendados:

• The Need for Speed
• Optimizing Web Graphics

Agregar a diferentes marcadores sociales