Cómo diseñar una página web de carga rápida

Optimiza el potencial de tu sitio web

Publicado por D-I Desarrollo informático 11 Agosto 2020

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.

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:

Iconos de carga rapida

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.

Y, ¡listo! Siguiendo estos consejos, ahora podrás diseñar una página web eficaz y optimizada.

d-i desarrollo informatico

Si estás interesado en crear una página web, en D-I Desarrollo Informático ofrecemos el servicio de Diseño web optimizado para que tu sitio sea lo más atractivo posible.

También te puede interesar leer el artículo Navegabilidad: Un elemento clave en el éxito de una página