Performance Tools   

Por cada petición Http normalmente se genera una respuesta, enviándose elementos desde el servidor al equipo cliente. En el caso más simple se enviaría un elemento con el texto html que se renderiza el navegador. No obstante la mayoría de las páginas no son tan simples, si no que incluyen más elementos: imágenes, archivos js, archivos css... Además estos recursos pueden ser externos a la propia página, podemos cargar imágenes que estén en otro servidor o realizar llamadas por javascript a servicios externos.

El tiempo de carga de la página es vital para la experiencia de usuario y puede determinar en gran medida el éxito de la misma. Con la creciente oferta de sitios web existentes, tener un tiempo de carga alto puede hacernos perder tráfico directamente, sin haber siquiera llegado a ver la página. Podríamos considerar cómo una página ágil aquella que carga en menos de uno o dos segundos. Aunque este dato es relativo, una página que tarde más de dos segundos en cargar debería de ser optimizada. A partir de cuatro segundos la situación es preocupante y más de ocho segundos inaceptable. Por supuesto estas reglas no son fijas y dependerán en gran medida del tipo de página al que estemos accediendo. Por ejemplo, si la "tardanza" viene ocasionada porque estamos realizando una búsqueda compleja entre todos los operadores de viajes disponibles para encontrar el mejor precio, puede ser lícito mostrar al usuario un mensaje "cargando" mientras se realiza una búsqueda de diez segundos. Eso no implica que cada vez que nos movamos entre las páginas del sitio tenga esos tiempos de carga porque entonces sí que tendríamos una web inservible.

Cómo siempre que intentamos optimizar algo, lo primero es tener objetivos medibles. Necesitamos un análisis detallado para ver quién o qué es responsable del tiempo de carga de la página. Podemos hacer esta medición en el servidor, o con scripts insertados en la página, pero su fiabilidad es limitada, con el problema añadido de que estas herramientas de medida pueden modificar los propios tiempo de carga. Por eso la mejor opción es utilizar algún analizador de tráfico en cliente. Existen numerosas herramientas para este propósito, cada una de ellas con sus particularidades. 

Developer Tools IE9

Las herramientas de desarrollador o Developer Tools es una característica de Internet Explorer 9 heredada de sus antecesores, aunque en esta versión está ampliada. Una de las nuevas características es precisamente la nueva pestaña "Network", que nos permite analizar la carga de contenidos. Para acceder a esta herramienta basta con pulsar F12 ó ir al menú "Tools/ F12 Developer Tools" en el navegador.

En la imagen vemos la apariencia de la herramienta. Su primera pestaña carga el DOM de la página mostrando el árbol de elementos html incluidos. Vamos a centrarnos en la última de las pestañas: Network.

Realizar un análisis de carga es tan sencillo cómo pulsar en el botón "Start Capturing". Desde ese momento y hasta que paremos la captura, se medirán los tiempos de carga de la página. Si cambiamos de página sigue capturando, pero reiniciará los contadores por tratarse de una petición distinta. En cambio si dentro de la misma página se lanzan peticiones asíncronas al servidor que no impliquen la recarga completa de la página en el navegador, dichas peticiones se registrarán en la misma secuencia.

En la captura podemos ver la carga inicial de una página de prueba. Una única petición genera todas las respuestas que se muestran en la imagen: la primera con el html, distintos archivos auxiliares de javascript y las imágenes. Posteriormente se observa cómo la página realiza peticiones post al servidor y este responde enviando actualizaciones de texto y javascript. Las columnas son bastante explicativas, aportando la siguiente información:

  •  URL: dirección de la petición.
  • Method: acción HTTP, típicamente GET o POST.
  • Result: código HTTP del resultado
  • Type: tipo mime del contenido de la respuesta.
  • Received: tamaño total de los datos recibidos en bytes.
  • Taken: tiempo total de descarga para esta línea.
  • Inititator: subsistema de Internet Explorer que inició la petición.
  • Timings: representación gráfica en una línea del tiempo de los eventos. Se muestra en distintos colores el tiempo de espera, el tiempo de la petición y el tiempo de respuesta.

En esta vista podemos identificar fácilmente cuáles son las fuentes de problemas (otra cosa es solucionarlos). Las cabeceras de las columnas permiten ordenar los registros por los distintos campos. Suele ayudar a identificar los elementos problemáticos ordenar las peticiones por "Taken" en lugar de por orden cómo están por defecto. De cada una de las distintas peticiones podemos ver todavía más información si pulsamos en "Detailed View". Se nos abrirá una ventana con 7 pestañas de información detallada de cada columna de la vista resumida.

Cuando se visualiza el detalle, se hará de la petición seleccionada en el momento de pulsar "Detailed View", aunque podemos navegar por todas ellas utilizando los botones Prev y Next. En la imagen se observa la pestaña "Timings", con los tiempos invertidos en cada evento.

  • Wait: tiempo de espera desde que se inició la carga de la página hasta que se inicia la petición que nos ocupa.
  • Start: tiempo en el que se inició la petición. La duración se refiere desde que se inicia la petición hasta que se envía al servidor (siempre es despreciable).
  • Request: tiempo que tarda en enviar la petición al servidor (Franja amarilla vertical en el gráfico). Se cuenta desde que se empieza a enviar hasta que se empieza a recibir la respuesta.
  • Response: tiempo de descarga de la respuesta del servidor (Franja azul).
  • Gap: holgura libre desde que esta petición finaliza hasta que se produce el evento Load de la página, donde se da por finalizada la carga de la misma.

Entender estos tiempos es especialmente importante: por ejemplo, no importa que una petición sea lenta si realmente no es bloqueante y tiene holgura: en ese caso esa petición no será la causante de la tardanza de la página.

Otra información disponible en las distintas pestañas abarcan los detalles de la petición: cabeceras de petición y respuesta, cuerpo de petición y respuesta, cookies transferidas y el detalle del iniciador si se conoce.

En MSDN está disponible una explicación más detallada de cada uno de estos aspectos.