La eficiencia en el diseño web
Sumario
Introducción
Si es importante, ya de por sí, hacer que un sitio sea usable y accesible,
no es menos importante hacerlo eficiente. La percepción que un usuario
tenga de nuestro sitio web se basa, a parte del diseño y de la comodidad
de uso del mismo, en la rapidez con que los contenidos del mismo fluyen
hacia la ventana de su navegador. Unas sencillas técnicas nos asegurarán
que nuestro sitio es eficiente en cuanto a economía de recursos necesarios
por parte del sufrido usuario que, dia a dia, navega por Internet. Téngase
en cuenta que la gran variedad de usuarios de Internet determina también
una gran variedad de escenarios de conexión: lentos módems analógicos,
líneas RDSI saturadas, líneas ADSL, conexiones punto a punto, etc...
Desgraciadamente no se puede asegurar que todos los usuarios se conecten
con unas mínimas condiciones de calidad y de velocidad de la conexión.
Cada país, cada operador, cada conexión, es diferente y hay muchos factores
en juego que hacen que debamos preocuparnos por diseñar nuestro sitio
para el menor ancho de banda posible; dentro de unos márgenes, claro
está. Podemos considerar que el mínimo ancho de banda con el que se
conectan todos los usuarios de Internet es el que proporciona un módem
estándar actualmente, es decir, unos 56.000 bits por segundo (posiblemente
si lees esto dentro de un tiempo esta cifra te parezca ridícula; pero,
créeme, tus abuelos se conectaban allá por el 2000 a estas velocidades).
Dos más dos son cuatro
Una regla inmutable para hacer un sitio más eficiente es que cuanto
menos ocupe todo más rápido se cargará. Nuestro problema pasa pues,
básicamente, por conseguir que todo ocupe lo menos posible en términos
informáticos, es decir, en bits y bytes.
Hay una serie de técnicas que nos ayudarán a conseguir este objetivo.
Empleándolas en su justa medida podemos hacer que la experiencia de
navegación por nuestro sitio sea enriquecedora en vez de frustrante.
Lo bueno si breve...
Evidentemente, cuanto menos ocupen las páginas más rápido se visualizarán.
Si tienes gran cantidad de texto a mostrar es conveniente que lo dividas
en varias páginas en vez de mostrarlo en una enorme página.
Además, si la página contiene imágenes estas deberían ocupar lo menos
posible. Hay varias maneras de que una imagen ocupe lo menos posible:
reduciendo el número de colores, reduciendo su tamaño,...
Como regla general: procura que el tamaño de las páginas no supere
los 50Kb, contando texto y gráficos.
Pequeñas pero matonas
Limita lo máximo posible el tamaño de las imágenes recortándolas tanto
como sea posible.
Miniaturización
Cuando quieras mostrar fotos o imágenes grandes, coloca una miniatura
de las mismas en la página, con un enlace a la versión grande. De esta
forma los usuarios podrán decidir si quieren ver la versión más detallada
pero más lenta de cargar.
Repite, repite, repite...
Procura reusar las imágenes lo máximo posible. De esta forma optimizarás
el acceso a las páginas ya que estas harán uso de las capacidades de
los navegadores de manterner, en una “caché” local, las imágenes recientemente
usadas.
Ancho por alto igual a área
Si especificas la anchura y la altura de las imágenes dentro del código
HTML de la página web, usando los atributos “width” y “height”, conseguirás
que parezca que la página se carga más rápido ya que el navegador podrá
determinar el tamaño real de la página antes de que los gráficos sean
cargados.
De esta forma el navegador puede ir mostrando el texto e ir cargando
los gráficos según llegan.
Yo entrelazo, tú entrelazas, él entrelaza
Aunque suene a trabalenguas, entrelaza las imágenes. Esta técnica
permite que la imagen se muestre en varias pasadas, mostrando más detalle
en cada pasada. Esto permite que el usuario se haga una idea de cómo
es la imagen antes de que se haya cargado entera.
GIF y JPEG no son insultos
La mayorías de los navegadores permite visualizar imágenes en formato
GIF y JPEG. Normalmente las imágenes JPEG se comprimen más y, por tanto,
ocupan menos espacio. Dan buenos resultados cuando se trata de fotografías
o imágenes de calidad fotográfica. Como contrapartida, el método de
compresión JPEG causa una ligera pérdida de calidad en las imágenes.
Por el otro lado, las imágenes GIF, también comprimidas, no pierden
calidad aunque sólo permiten, como máximo, hasta 256 colores diferentes
y por tanto son mejores en el caso de gráficos con colores sólidos y
diseños lineales.
Por favor... ¿dónde está la barra?
Aunque parezca mentira, las URLs que incluyen la barra (/) al final
de las mismas, cargan más rápido que las que no lo tienen. Por ejemplo:
http://www.donosti.org/ cargará más rápido
que http://www.donosti.org.
Ahora viene la explicación técnica de esto: cuando el navegador pide
una URL sin barra al final, el servidor la interpreta como érronea ya
que no hace referencia a ninguna página ni directorio y entonces notifica
al navegador esta condición. El navegador, entonces, vuelve a pedir
la URL pero esta vez le añade la barra lo que indica al servidor que
se trata de un directorio y, dentro de ese, la página que por defecto
nos suministre.
De esta forma, sin barra al final, el navegador hace dos viajes al
servidor. Con barra haría sólo uno con lo que ganamos en velocidad de
conexión.
Dos mejor que uno
En los casos en los que nuestro sitio web, por su naturaleza, tenga
alto contenido multimedia, deberíamos pensar en hacer dos versiones:
una versión completa para usuarios con gran ancho de banda y una versión
más ligera para usuarios con anchos de banda reducidos.
¿Me puede indicar cuanto tardaré en llegar, caballero?
En las páginas de descarga de ficheros es conveniente indicar los
tamaños de los mismos para que los usuarios tengan una idea clara de
cuanto les va a costar descargárselos.
Es conveniente indicar, así mismo, el tiempo aproximado de descarga
suponiendo un ancho de banda, siendo los típicos 33.6Kb y 56Kb/s correspondientes
a módems normales (vale, vale, no te sorprendas si lees esto dentro
de un tiempo, en el 2001 estos ancho de banda eran los normales).
Hemos quedado en tablas...
Procura no usar tablas muy complejas y grandes. Esto enlentece el
tiempo de descarga y visualización de la página. En su lugar procura
dividir el contenido de la página en tablas más pequeñas para permitir
que el navegador las visualice progresivamente.
Autor: Javier San José
|
