Articulos sobre velocidad web

¿Que influye en la velocidad de una página web?

esquema_velocidad_web

En el proceso de carga de una página web intervienen tanto el cliente (el que solicita la página) como el servidor, el que responde con las diferentes partes que forman la página (xhtml, imágenes, css, javascript,..)

Cuando tecleamos en la barra de direcciones del navegador una dirección web, se suceden las siguientes fases:

1. Resolución DNS para saber a qué servidor pedir la página y lanzamiento de la petición. Transcurre lo que se denomina, tiempo de petición (hasta que establecemos conexión con el servidor). Los servidores web no soportante un número infinito de peticiones simultaneas, por lo que si el servidor en ese momento tiene muchas peticiones deberemos guardar turno.

2. Espera de la respuesta. Tiempo hasta que recibimos el primer byte de información. En esta fase, entra en juego tanto la calidad y saturación de la red, como el tiempo que tarda el servidor en generar la página o el componente. Si el contenido es dinámico, el servidor deberá construir la información antes de enviarla (ejecutar código del lado servidor, acceder a bases de datos,...), si es estática, bastará con leer la información y comenzar a enviarla.

3. Descarga del código (x)html de la página.

4. El navegador analiza el código recibido y realiza las peticiones del resto de componentes de la página indicados en el código xhtml. Para cada componente, el navegador hará una petición (todas las fases por cada componente). Estos componentes puede ser simples (ej. imágenes) o mas código que incluyen a su vez otros componentes (Ej. Ficheros CSS que incluyen otras imágenes). Los navegadores no se descargan los componentes de forma secuencial (uno tras otro), sino que intentan descargarse componentes en paralelo, en la medida que sea posible. Existe un límite de conexiones en paralelo, que depende del cliente y del navegador. Una vez alcanzado ese límite, el resto de descargar deberán guardar turno.

5. A medida que el navegador va recibiendo los componentes de la página los va renderizando (dibujando en pantalla)

Ejemplo real: Descarga de la web http://www.uji.es. Universidad Jaume I de Castellón

grafico_descargas_velocidad_web

En primer lugar vemos un gráfico donde se van sucediendo las descargas de todos los componentes que forman este web a lo largo de la linea de tiempo. La primera descarga se corresponde con el código html de la página. A medida que el navegador va detectando la presencia del resto de componentes, va procediendo a su descarga.

tabla_descargas_velocidad_web

En la tabla anterior, podemos ver que desde el componente 2 al 5 se descargan en paralelo, sin embargo, desde el 6 al 21 las descargas son secuenciales, ya que hay componentes que no pueden paralelizarse (en principio).

Tambien observamos que en algunos componentes, es mayor el tiempo de establecer la conexión mas el tiempo que tarda en llegar el primer byte, que el propio tiempo de la descarga.

Por lo tanto, en la velocidad de carga influye el tiempo de descarga de cada uno de los componentes, el tiempo en establecer cada una de las conexiones, los tiempos de espera, y la capacidad de paralelizar las descargas.

En el proceso de optimización web, no podemos intervenir en la línea de comunicaciones del cliente, ni en la potencia ni el tipo de dispositivo que solicita la página. En cambio sí que podemos trabajar en la estructura de la página, todos sus componentes y como se transmiten para facilitar el proceso de carga.

Es decir, reorganizar o modificar internamente el código de la página, sus componentes, el número de estos y la forma de transmisión para reducir el tiempo de cada una de las fases descritas.