comparte el articulo 

Cómo hacer un diseño web de carga rápida

Actualizado el 22/01/2010 < > 3 Cometarios

Resumen: Un tiempo de carga elevado en una página web puede hacer que muchos visitantes se marchen antes de que dicha carga termine. Todo diseñador debe tenerlo presente.

Todos los que navegan asiduamente por la web, habrán visto algunos sitios cuya carga se hace particularmente lenta. Esto es algo que resulta muy molesto a la mayoría de los internautas, quienes suelen emplear muy poco tiempo, tan solo unos segundos, para decidir su siguiente acción.

La posibilidad de que un potencial usuario decida abrir otro sitio al demorar varios segundos la carga de una página web es alta. El usuario de Internet promedio prefiere los sitios donde todas las acciones, incluyendo la apertura de la página, sea casi instantánea, elemento que todo diseñador web debe tener muy presente.

La demora en la carga está relacionada con el “peso” o “tamaño” de la página. Esto nos indica que si queremos que nuestros usuarios accedan rápidamente a los contenidos de nuestro diseño, debemos hacer que los elementos incluidos en el diseño no tengan demasiado peso y desechar aquellos que haga que el tiempo de carga de la página se eleve.

En LaWebera.es, tenemos una herramienta que resultará muy útil para evaluar el tiempo de carga de nuestro diseño. Para ello debemos hacer click en el siguiente enlace (Calcular el tiempo que tarda en cargar una página web) y colocar el tamaño de nuestra web (se debe incluir el archivo que contiene el código, los archivos CSS, javascript, flash, imágenes, sonidos, etc.). Allí veremos el tiempo en segundos que demorará nuestro diseño en cargar para todos las velocidades de conexión.

Para hacer que nuestra futura web cargue en forma rápida presentamos a continuación una serie de consejos que pueden resultar útiles si se pretende que nuestros visitantes se sientan a gusto y regresen.

Optimizar el uso de imágenes

Sería imposible de concebir una página web que no utilice imágenes. Tanto para hacer que la parte estética del diseño resulte atractiva como para ilustrar los contenidos, es imprescindible el uso de imágenes. Sin embargo, las imágenes son unos de los elementos que pueden comprometer más el tiempo de carga de una página web.

El uso de imágenes debe limitarse a lo indispensable para que la página sea funcional y atractiva.

Las imágenes de fondo, botones, íconos, logotipos, etc., son indispensables en cualquier diseño, por lo que su empleo no puede ser desechado. Sin embargo, es posible hacer que dichos elementos no resulten demasiado voluminosos.

Los siguientes íconos son realmente livianos, a pesar de que sus dimensiones no son pequeñas y su calidad es muy buena:

Íconos

El tamaño de las imágenes puede ser modificado en forma muy sencilla, tanto en sus dimensiones (largo y ancho) como en su calidad, haciendo de esta forma que las mismas tengan menor peso en el diseño. Estas alternativas pueden resultar muy útiles si el diseño de la página requiere que se incluyan varias imágenes, tal como puede suceder en muchos casos.

En ocasiones, los íconos y botones pueden ser sustituidas por elementos diseñados con CSS. Esta sustitución resulta muy conveniente, ya que estamos sustituyendo imágenes por unas pocas líneas de código, lo que en el caso de que los íconos o botones sean varios, representa una buena cantidad de kb reducidos.

Reducción de trabajos en Flash

A pesar de que los trabajos en páginas web hechos en Flash resultan muy agradables a la vista, éstos se cargan en forma muy lenta ya que su volumen suele ser bastante grande.

Nada más tedioso que esperar frente al monitor mientras vemos una barra que nos indica el tiempo de carga, cuando lo que deseamos es acceder a otros contenidos que no se encuentran incluidos en estas animaciones.

Si es posible, hay que evitar que los diseños web tengan este tipo de animaciones, que no redundan en grandes beneficios, ya que seguramente el usuario no ingrese a la página para ver este tipo de elementos y si los contenidos que incluimos.

Sin embargo, es posible que algunos tipos de diseño requieran que se empleen animaciones Flash para resaltar las virtudes de lo que estamos publicando, en cuyo caso es aconsejable que los mismos sean cortos y que no se incluyan otros elementos de peso en la página.

Las páginas más importantes de la web no emplean este tipo de recursos, ya que su éxito está basado en la funcionalidad. Debemos tener en cuenta que, por bonitos que resulten, debemos limitar el uso de elementos decorativos que aporten poca o nada a las funciones para las cuales se crea la página web.

Enfócate en lo importante, nadie quiere ver tu increible intro hecha en flash, sino lo que ofreces al los usuarios, ya sean productos, servicios o contenido.

No utilizar GIFs animados

Los GIFs animados son una secuencia de imágenes, por lo que su peso es igual a la suma de todas ellas. Cuanto mayor sea la calidad del GIF animado, mayor cantidad de imágenes serán necesarias para componerlo y por consiguiente, mayor será su peso.

Para que un GIF animado resulte atractivo, debe tener una buena calidad, lo que necesariamente retardará sensiblemente la carga de la página web. La opción de bajar la calidad del GIF animado no es viable dado que su empleo puede bajar mucho la calidad del diseño. Por consiguiente, el empleo de este tipo de animaciones no es aconsejable.

Hay que resaltar que cada día es menor el empleo de GIFs animados, ya que se consiguen iguales resultados con imágenes fijas de mejor calidad y de mucho menor peso.

Utilizar hojas de estilo en cascada (CSS)

Desde que las hojas de estilo en cascada se han empleado, se ha logrado reducir sensiblemente el tiempo de carga de las páginas web. Dado que se trata de simples líneas de código, su peso en la página, tanto si está incluido en el HTML como si se emplea un archivo separado, es muy reducido.

El empleo de CSS hace que no haya que incluir en el código los atributos de cada uno de los elementos que incluimos en la página, lo que implica una reducción muy considerable de líneas de código HTML y como consecuencia de ello, una reducción importante del peso del archivo HTML.

Además, el empleo de CSS tiene otras virtudes que pueden verse en el siguiente artículo: Primeros pasos con CSS. Su empleo, más que aconsejable, es necesario.

También te puede interesar leer el artículo como acelerar la carga de un sitio web.

Publicado el 22/01/2010, última actualización 22/01/2010.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Verónica Milán y Andrés Fernández

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

3 Cometarios

  1. Reducir el número de peticiones http con CSS Sprites

    […] sobre el tema, y anteriormente hemos publicados otras cosas relacionadas que puedes leer aquí: Cómo hacer diseños web de carga rápida y como acelerar la carga de un sitio […]

    Viernes, 29 de enero 2010

  2. Elección del hosting: la tasa de transferencia

    […] El “peso” total de los archivos que componen el sitio. Esto es muy sencillo de hacer, ya que basta con colocar todos los archivos en una carpeta en nuestro propio ordenador, hacer click con el botón derecho y ver las propiedades, donde aparece claramente la cantidad de bytes que contiene. […]

    Viernes, 12 de marzo 2010

  3. Manejo de fuentes con Adobe Dreamweaver

    […] ya que extiende el código agregando una gran cantidad de etiquetas, lo que dificulta la carga de las páginas, entorpece el escaneo de los robots de los buscadores y aumenta la dificultad del diseño y las […]

    Lunes, 5 de abril 2010

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras