Como usar la Timing API para ver las métricas de carga y rendimiento de una página web

La Navigation Timing API, que es parte de la Page Performance API de HTML5, nos permite conocer todas las métricas de carga y rendimiento de una página o aplicación web.
Es usada en las consolas o herramientas de desarrollo de los navegadores web de escritorio Google Chrome y Firefox, para mostrar todos estos datos en el Network y en la vista de cascada (Waterfall).
También en muchas extensiones y aplicaciones de desarrollo web.

Usos prácticos de Navigation Timing API

La Navigation Timing API lista todos los eventos, desde el inicio de carga de una página hasta el final.
Podemos usarla con JavaScript para calcular métricas cuyo valor no se devuelve directamente, como el tiempo de resolución DNS, el Time To First Byte (TTFB), la descarga de contenido, el tiempo del renderizado del DOM, etc.
El funcionamiento de esta API es de interés principalmente de desarrolladores, para probar el funcionamiento y rendimiento de sus aplicaciones, pero también para aficionados, que necesitan obtener las métricas fundamentales de las páginas de su blog o sitio web y poder mejorar su rendimiento.
En este artículo dirigido a aficionados, explico su uso de forma elemental, con ejemplos y como mostrar las métricas usando JavaScript.

Atributos de la Timing API

Principales atributos definidos por Navigation Timing API, en el orden en que se reciben al cargar una página.
Se pueden comprobar cómo se desencadenan de forma gráfica, en la imagen más abajo.
Atributos de la Navigation Timing API Level 2 (Noviembre 2018)

Ver a mayor tamaño
Para ver todos los atributos con los valores que corresponden a esta página en formato de tabla, abre la consola de desarrolladores del navegador.

Métricas de esta página usando la Timing API

En el siguiente cuadro muestro los principales indicadores de esta página.
Se escriben solo después que termine la carga de la página.
Son los mismos valores que se obtienen en el Network de la consola del navegador, lo que se puede comprobar abriéndola y adosándola.
En dispositivos con iOS (iPhone) este valor no se muestra correctamente.
Más abajo explico el significado de cada uno de ellos y como se calculan.

Tiempo de resolución DNS
Tiempo empleado por el navegador en acceder al servidor DNS, si la resolución dominio/IP no está guardada en cache.
Se obtiene restando "domainLookupEnd", cuando concluye la búsqueda DNS, menos "domainLookupStart", cuando comienza.

T o negociación del contenido
Tiempo de envio de los encabezados, incluyendo la negociación TLS.
Se obtiene restando "connectEnd", cuando la negociación termina (incluyendo el periodo de TLS), menos "connectStart", cuando el navegador abre la conexión al servidor.

Time To First Byte (TTFB)
Time To First Byte, es el tiempo de demora en obtener el primer byte de datos.
Se obtiene restando "responseStart", cuando se obtiene el primer byte de datos, menos "requestStart", cuando el navegador inicia la petición al servidor.

Descarga del contenido (Content )
Parámetro que indica el tiempo empleado en descargar el contenido (no el total).
Se obtiene restando "responseEnd", cuando se recibe el ultimo byte del contenido de la página menos "responseStart", cuando comienza la respuesta.

Tiempo total de descarga de la página
Este valor indica el tiempo total de descarga del contenido HTML de la página.
Se obtiene restando "responseEnd", cuando llega el ultimo byte de datos, menos "navigationStart", momento del comienzo de la navegación.

domInteractive
Tiempo empleado por el navegador en representar el contenido de la página, incluyendo scripts que cargan de forma forzada, pero sin cargar los que lo hacen usando el modo "async" o "defer".
Se obtiene restando "domContentLoadedEventStart" menos "domInteractive".

DOMContentLoaded
Tiempo en que todo el contenido de la página ha sido representado por el navegador, incluyendo imágenes y scripts que cargan usando "async" o "defer".
Es cuando se desencadena el evento DOMready, usado por los scripts para efectuar sus funciones.
Se obtiene restando " domContentLoadedEventEnd ", cuando llega el ultimo byte de datos, menos "navigationStart",

domProcessing
Tiempo total empleado en la representación del DOM.
Se obtiene restando "domComplete" menos "domInteractive".

Proceso y renderizado del DOM (Total)
Tiempo hasta que todo está representado sin ningún retraso, incluyendo imágenes y scripts.
Se obtiene restando " domComplete", tiempo en que termina el proceso del DOM menos "navigationStart", el comienzo de la navegación.

Como escribir con JavaScript los valores de Timing API

Para escribir el valor de un atributo de la Timing API, por ejemplo el de "responseEnd", hazlo de la siguiente forma:

document.getElementById("div").innerHTML = "responseEnd " + window.performance.timing.responseEnd + " ms";

Para calcular un valor resultante que requiere la resta de dos atributos, como en el caso del Time To First Byte (TTFB), hazlo de la siguiente forma:

document.getElementById("div").innerHTML = "TTFB: " + (window.performance.timing.responseEnd - window.performance.timing.requestStart) + " ms";

Mas informacion sobre el uso de la Timing API

Navigation Timing API (Github)
Desarrolladores de Google

Páginas relacionadas

Comparta esta página

Sígueme en las redes sociales