Los siguientes métodos no van a mejorar la velocidad efectiva de tu web, ya que ésta va a tardar en cargar todos sus elementos más o menos el mismo tiempo, sin embargo va a mejorar la velocidad percibida, haciendo básicamente que el contenido relevante se muestre antes a tus visitantes. Aumentar la velocidad de carga aparente es tan importante como aumentar la real, ya que los usuarios de un sitio web no cronometran tiempos de carga, sino que intentan acceder a la información que buscan lo antes posible.

• Deshacerse de las tablas.
• Colocar el contenido al principio.
• Colocar el JavaScript al final.
• Especificar el ancho y alto de las imágenes.

Deshacerse de las tablas

Aunque afortunadamente la maquetación con tablas (<table>...</table> en HTML) es algo cada vez más infrecuente de ver, aún hay sitios web que se resisten al paso del tiempo y basan su diseño en arcaicas filas y columnas. Aunque las tablas en sí no tienen nada de malo (de hecho son muy útiles para presentar series de datos), los diseños basados enteramente en estos elementos presentan un grave inconveniente: algunos navegadores como Internet Explorer necesitan descargar enteramente una tabla antes de mostrar su contenido. Y pese a quien le pese el Explorer es todavía el navegador más usado. Esto quiere decir que si toda tu página está encerrada en tablas, la mayoría de tus visitantes necesitarán descargarse todo el código por completo antes de empezar a ver cualquier tipo de contenido.

Solucionar este inconveniente es algo relativamente sencillo y consiste en migrar el diseño de la página a CSS. Las páginas cuya disposición se basa en estilos CSS muestran sus distintos elementos tan pronto como llegan al navegador, realizándose por tanto la carga de una manera totalmente fluida, lo que reduce el tiempo de espera para los visitantes.

CSS («Cascading Style Sheets», es decir, hojas de estilo en cascada) es lo suficientemente flexible como para servir de soporte a cualquier tipo de diseño. Si estás empezando con CSS puede que te interese visitar esta guía breve o, aún más sencillo, descargarte una de estas plantillas básicas sobre las que basar tu diseño.

Colocar el contenido al principio

Ya que, tras el punto anterior, el contenido de tu web se va a ir mostrando tan pronto como se va cargando, es interesante colocar el contenido relevante lo antes posible. Y por «antes» no me refiero a la disposición visual sino a su posición dentro del código HTML de la página, que es lo que va a determinar el orden de carga.

Normalmente la acción a realizar en este aspecto es colocar el código de la barra lateral (sidebar, en la que normalmente se situán todos los enlaces a secciones, categorías, etc.) después del contenido principal, aunque dependiendo del diseño puede que haya más elementos que puedan ser retrasados en su orden aparición. El auge de las barras laterales alineadas a la derecha del contenido hace que este paso normalmente no sea necesario, aunque aún hay muchos diseños que muestran el sidebar en la izquierda y cuyo código también aparece antes del contenido.

Alinear la barra lateral a la izquierda no es un problema como tal; de hecho yo soy partidario de este tipo de disposición ya que los usuarios están tradicionalmente acostumbrados a ella (aunque esa es otra historia y será contada en otro momento). Lo que sucede es que aún hay diseñadores que no saben que es posible colocar el código de la barra «después» aunque visualmente aparezca «antes». Con CSS esto es muy sencillo gracias al atributo float que hace referencia a la alineación de los elementos. Por ejemplo con el siguiente código la barra lateral alineada a la izquierda se cargará después del contenido:

<div style="float: right; width: 70%">
...Aquí el contenido...
</div>
<div style="float: left; width: 30%">
... Aquí la barra lateral...
</div>

En blogs el uso de este método junto a la descarga por partes de la página con flush() es especialmente importante ya que los sidebars suelen hacer uso intensivo de consultas a la base de datos, y por tanto su tiempo de ejecución es mayor.

También en blogs es interesante incluir los comentarios en un bloque diferente al del resto de contenido y al final de la página, ya que las entradas con muchos comentarios pueden retrasar sustancialmente la carga de otros elementos (normalmente la barra lateral).

Colocar el JavaScript al final

Las referencias a los archivos externos de JavaScript (.js) se suelen colocar en el encabezado (entre las etiquetas <head></head>) por simple costumbre. Sin embargo muchos de estos archivos ejecutan su código cuando la página ya se ha cargado, mediante llamadas del tipo document.onload = (...). En este caso desde el punto de vista del código es indiferente que ese archivo se cargue antes o después del contenido. Por lo tanto colocándolo al final de la página, justo antes de la etiqueta de cierre </body>, evitaremos que la descarga de ese archivo retrase la aparición del contenido. El HTML quedaría entonces así:

...
<script type="text/javascript" src="archivo.js"></script>
</body>

Por supuesto si el archivo contiene variables o funciones que son utilizadas en tiempo de carga, retrasar su ejecución puede llevar a errores o comportamientos no deseados, así que hay que tener cuidado en este sentido.

Un ejemplo típico de llamadas a archivos JavaScript que se pueden situar al final de la página son los códigos de servicios de estadísticas, tracking, etc. Por ejemplo Google Analytics proporciona un código para el seguimiento de los visitantes que recomienda colocar al comienzo de la página. Mientras que esto no suele representar ningún problema, en ocasiones los servidores de Analytics resultan especialmente lentos, retrasando la carga de las páginas que incluyen su script. Colocando el código dado antes de la etiqueta </body> evitaremos este inconveniente, aunque hay que tener en cuenta que esto puede reducir el número de visitantes reportados por Analytics, ya que en ocasiones las páginas no se llegan a cargar por completo y el código de este servicio no llega a ser ejecutado.

Especificar el ancho y alto de las imágenes

De los aspectos que estamos tratando éste es el que es descuidado con mayor frecuencia, por la creencia generalizada de que no afecta a la velocidad de carga de una página. Y en cierta forma es cierto, ya que una imagen se descarga igual de rápido tanto si se especifica su tamaño como si no. Sin embargo no establecer el ancho y alto de las imágenes (atributos width y height) va a afectar de manera negativa la velocidad de carga aparente.

Cuando no se especifican los atributos de tamaño de una imagen, el navegador reserva inicialmente para ella cierto espacio que rara vez coincide con sus dimensiones reales. Cuando el navegador empieza a cargar esa imagen, le asigna el tamaño adecuado, «descolocando» normalmente los elementos a su alrededor. Ésto hace que el contenido no esté completamente accesible (estático) hasta que todas las imágenes han comenzado a cargar.

Sin embargo, especificando el ancho y el alto de las imágenes, una vez cargado el código de la página todos los elementos se mostrarán ya en su ubicación definitiva, independientemente de cuándo se carguen las imágenes. Esto proyecta la sensación de que la página se ha cargado más rápidamente.

Uno de los grandes culpables de que en muchos de los sitios no se declaren los atributos de tamaño es WordPress. Por alguna extraña razón este CMS no incluye por defecto las dimensiones de las imágenes al añadirlas al editor desde el gestor de archivos (botón «Enviar al editor»). Para resolver este problema en WordPress tienes varias opciones:

• Incluir directamente los atributos en el código de la imagen (<img src=»...» width=»XX» height=»YY» />).
• Especificar el alto y el ancho en el menú «Insertar/editar imagen».
• Usar este plugin que he escrito y que añade automáticamente los atributos de tamaño de las imágenes (siempre que estén alojadas en tu propio blog) al guardar las entradas. Descomprime el archivo, súbelo a la carpeta wp-content/plugins y actívalo desde el panel de WordPress. El plugin sólo añade los atributos si éstos no existen, o calcula uno de ellos si éste falta y el otro está especificado. Además realiza las operaciones en el panel de control, no al mostrar las entradas en la parte pública, por lo que no afecta al tiempo de ejecución del blog. 1 Blog Theme incluye automáticamente esta característica, así que si lo estás usando no hace falta que instales el plugin.

Esta entrada forma parte de la serie «Aumentar la velocidad de una página web en 7 pasos».