www.arturosoria.com / eprofecias /

  Tu web es lenta y el internauta impaciente

por Fernando Plaza
publicado el 31 Marzo 2005

Con acuerdo a los estudios de Jacob Nilsen no es conveniente exceder los diez segundos de tiempo de carga a una velocidad de conexión de 28.8 kbps; puede que su web sea la prueba viviente de que esta meta es alcanzable, pero no deja de parecerme algo muy difícil de conseguir. Es por eso que nosotros planteamos un objetivo algo más ambiguo: nuestra web tiene que cargarse lo más rápidamente posible.

Hemos de tener en cuenta que si bien el número de usuarios de ADSL ha aumentado enormemente (muy a pesar de las empresas discográficas), no podemos diseñar nuestras webs para ser usadas únicamente por usuarios de banda ancha, porque ni todo el mundo dispone de banda ancha ni la banda ancha es siempre tan ancha…

Gracias al Dr. Watson podremos obtener unas estadísticas de cuanto tardaría en cargarse nuestra web a distintas velocidad de acceso. El resultado va desglosado en dos partes: Imágenes y HTML. Los resultados de este tipo de diagnósticos son meramente orientativos, ya que son cálculos a partir del peso (Kbs) de nuestro web y cuando hablamos de velocidad hay muchos más factores a ser tomados en cuenta… en cualquier caso es un comienzo.

Reduciendo el tiempo de carga de nuestro HTML

A parte del contenido gráfico de nuestro web, el propio HTML es un documento de texto que ocupaba unos KBs y que se ha de transmitir desde el servidor en el que está alojado nuestra web hasta el ordenador del internauta. Podemos reducir el tiempo de carga eliminando tags de comentarios (comment tags), saltos de línea y espacios innecesarios en el código. Utilizando fuentes de estilo en cascada (CCS, Cascadian Styles Sheets) también podremos conseguir reducir el tamaño físico de nuestro código y acelerar el tiempo de carga.

Este punto viene íntimamente relacionado con nuestro artículo anterior, ya que una página web con una estructura excesivamente compleja o con errores en su HTML, tarda más en ser interpretada por nuestro Browser y por lo tanto en aparecer en la pantalla. Son especialmente lentas de interpretar las webs que contienen:

  • Tablas muy complejas que incluyen a su vez tablas en el interior de sus celdas, las llamadas tablas anidadas (nested tables).
  • Tablas creadas por algunos editores WYSIWYG que generan "código sucio".
  • Imágenes que son redimensionadas mediante los atributos WIDHT y HEIGHT

Reduciendo el tiempo de carga de nuestras imágenes

No es aconsejable obligar a nuestros visitantes a cargar imágenes grandes (las cuales hemos de considerar la posibilidad de ni siquiera le interesen). Es por ello importante el uso de versiones reducidas de nuestras imágenes (también llamadas thumbnails) que den acceso a versiones más grandes de las mismas sólo si el usuario lo desea.

A parte de esta consideración previa, elegir correctamente el formato de compresión de nuestras imágenes es la primera decisión que tenemos que tomar. Los dos formatos más populares son GIF (Graphic Interchange Format) y JPEG (Joint Photographic Experts Group), la elección entre uno u otro no es compleja, si bien muchos diseñadores poco experimentados siguen cometiendo errores. Por norma general (aunque hay excepciones), utilizaremos el formato GIF para imágenes con escaso número de colores tales como: esquemas, gráficos (charts), dibujos, etc. Las fotografías (aun en blanco y negro), siempre ocuparán menos y se visualizarán mejor si las guardamos en formato JPEG.

A parte de esta primera elección, es conveniente disponer de un buen programa de optimización. Estos programas nos permitirán reducir el tamaño de nuestros archivos de imágenes sin sacrificar en exceso su calidad; aprender a sacarles el máximo partido a estos programas es esencial.

De nuevo el “Dr. HTML” nos será de útil para detectar imágenes que son excesivamente pesadas, en cualquier caso, la imagen que menos ocupa es la que no se utiliza, por lo que es conveniente: evitar el uso de imágenes superfluas, sustituir iconos innecesarios por texto, cambiar algunos banners por anuncios de texto…

Algunas imágenes como la de nuestro logotipo pueden ser algo más pesada de lo normal (aun así yo no excedería los 4 Kbs), esta concesión en cuestión de peso se justifica principalmente por la importancia de esta imagen; además si hacemos un uso clásico del logo, lo colocaremos en la parte superior de cada una de nuestras páginas y quedará almacenado en la caché del navegador de nuestro visitante. Es decir: la imagen tardará en descargarse un poquito más que el resto, pero es un esfuerzo que sólo se realizará una vez y del que luego se beneficiará el internauta durante toda la navegación por nuestro web.

Otros factores que afectan a la velocidad

Si nuestro web obtiene su contenido de una base de datos podemos conseguir un considerable incremento de velocidad indexando los campos más populares que intervienen en nuestras consultas (queries). En mySQL, la utilización del “EXPLAIN SELECT” puede ayudarnos a comprender qué es exactamente lo que hace el motor de la base de datos en los procesos de consulta, permitiéndonos así optimizarlos.

Tanto nuestro Data Base Server como nuestro Web Server, disponen de ciertos parámetros que correctamente adaptados a nuestras necesidades reales pueden conseguir acelerar su velocidad de respuesta. Lamentablemente, dado que lo más probable es que tengamos un alojamiento compartido, no podremos tener acceso a estos parámetros de configuración.

El Dr. Watson nos puede servir como un primer acercamiento hacia la optimización de nuestro web pero siempre serán más fiables nuestros propios cómputos. Para ello sólo es necesario limpiar la caché de nuestro navegador y hacernos con un cronómetro; de nuevo es importante no probar sólo con nuestro flamante ADSL y hacer pruebas también conectándonos a través del modem; también es conveniente hacer varias mediciones de la misma página y contrastar nuestros resultados con los de otras webs.

En definitiva podemos concluir que todo el esfuerzo destinado a agilizar la respuesta de nuestra página será enormemente agradecido por nuestros impacientes visitantes, en Internet: cuanto más rápido mejor.

Links relacionados
Site Optimization Tutorial by Jason Cook (en inglés)

Fernando Plaza es el responsable de que en este web todo funcione corréctamente. De mayor le gustaría ser igualito que Grissom de la serie CSI Las Vegas.


Copyright 2000 - 2014 © Rent & Buy S.A.