La clave está en el ancho de banda: a pesar de que cada vez son más las personas que acceden a la web con banda ancha, un porcentaje muy grande de la gente aún accede a través de lentas conexiones telefónicas.

A la hora de crear un sitio web, la ligereza de ésta es un factor muy importante. Los internautas permanecerán más tiempo en sitios mediocres que se abren con rapidez, del que esperarán en otros excelentes pero mas lentos de cargar.

Diseña con archivos de “poco peso” y eliminarás el obstáculo del ancho de banda para la mayoría de los usuarios. Diseña con archivos grandes , y limitarás el acceso a su web a unos pocos privilegiados que disfrutan de banda ancha.

Diseña con archivos muy grandes y tus visitas se verán reducidas casi a la nada. El mejor diseño web es aquel que es más ligero. Los buenos diseñadores web están constantemente realizando malabares para conseguir perder peso en sus creaciones.

En cambio, los principiantes en el diseño suelen crear una composición en algún editor de imágenes como Adobe Photoshop, la recortan en Adobe ImageReady y utilizan  Dreamweaver para dejarla como una web operativa.

Esta web puede tener una apariencia maravillosa, pero es prácticamente seguro que engulla el ancho de banda haciendo el tiempo de descarga mayor. Entonces ¿Cómo aligerar el peso de una página web? :

Utiliza texto en vez de gráficos que contienen texto

Se debe intentar utilizar texto HTML en lugar de imágenes tipográficas allí donde sea posible hacerlo. Hay veces que utilizamos gráficos para mostrar una letra bonita o llamativa pero que resulta pesada al cargar.

Si no es estrictamente necesario, debemos obviar esta práctica ya que los textos se bajan en una fracción de segundo, en cambio, las imágenes tardan bastante más tiempo.

Reduce el peso de las imágenes

Podemos aligera peso intentando recortar nuestras imágenes reduciéndolas de tamaño al guardarlas en formatos adecuados para la web.

Cabe destacar que para fotos es mejor utilizar el formato JPG y para imágenes de colores “planos” (dibujos, logotipos) utilizaremos el formato GIF.

A modo orientativo se debe buscar que las imágenes no superen los 15 KB y que todos los elementos de una página no pesen más allá de 100 KB. Incluso hay “webmasters” que recomiendan no exceder de los 50 KB.

Has más con menos

Cortar una imagen grande en dos o tres trozos pequeños podría reducir el ancho de banda requerido por cada trozo. Pero cuidado, como el servidor responde al requerimiento de una imagen después de otra, podría pasar el efecto contrario.

Si cortaras la imagen en 100 cachos, el ancho de banda aumentaría. Hay que jugar con este recurso para conseguir resultados óptimos.

Reduce la redundancia

Es interesante eliminar redundancias en el código. Como ejemplo, en una tabla por defecto el texto se alinea a la izquierda, así que es redundante recalcar en el código que dicho contenido se alinee a la izquierda: 

<td align="left"> sería suficiente con poner </td>

Claro, si ya trabajas con hojas de estilo y estándares ni siquiera hay que pensar en tablas y desde tus hojas de estilo podrás encargarte de estos detalles de formato.

Aprovecha la caché

La caché, es como un almacén en el que se guardan todos aquellos archivos que ya se han bajado por si el usuario los necesita de nuevo.  Mientras más veces reutilicemos los elementos de la web mejor.

Se recomienda utilizar cabeceras, pies y menús que utilicen las mismas imágenes ya que solo tendremos que bajar una sola vez estos elementos. A partir de ahí, los gráficos se abren de la memoria caché del disco duro.

No pongas toda la información en una página

Si tenemos que crear una página con mucha información, se recomienda distribuirla en varias páginas con su navegación (adelante, atrás) que poner todo el contenido en una sola página. Con que la información ocupe un máximo de dos altos de pantalla es suficiente.