¿Qué es la API Navigation Timing?

¿Qué es la API Navigation Timing?

La API Navigation Timing es una interfaz del navegador que informa cuánto duró cada fase de la carga de una página: redirecciones, conexión, solicitud, respuesta, procesamiento del DOM y el evento load. Hoy se lee mediante una entrada PerformanceNavigationTiming. El objeto antiguo performance.timing está obsoleto y MDN recomienda evitarlo en proyectos nuevos.

Cómo funciona

El navegador crea una entrada de navegación para el documento actual, dentro de la Performance Timeline y de la Web Performance API. Se lee así:

const [nav] = performance.getEntriesByType('navigation');

Todos los valores son milisegundos relativos al inicio de la navegación, así que startTime siempre es 0. Propiedades útiles según MDN:

• domInteractive: justo antes de que el documento pase a interactive.
• domContentLoadedEventStart y domContentLoadedEventEnd: los manejadores de DOMContentLoaded.
• domComplete, loadEventStart, loadEventEnd: documento completo y manejadores de load. duration es loadEventEnd menos startTime.
• type: navigate, reload o back_forward.
• redirectCount: redirecciones desde la última navegación sin redirección.

La entrada hereda además las fases de red de PerformanceResourceTiming, como DNS, conexión y responseStart.

Ejemplo: desglose rápido de una carga

En una página lenta, ejecuta la línea anterior en la consola. Si responseStart es grande, la espera está en la red o el servidor: revisa el tiempo hasta el primer byte (TTFB) y la cabecera Server-Timing. Si responseStart es pequeño pero domContentLoadedEventEnd llega tarde, el navegador está ocupado analizando o ejecutando scripts.

Errores frecuentes

• Usar el obsoleto performance.timing en código nuevo.
• Leer loadEventEnd demasiado pronto: vale 0 hasta que terminan los manejadores de load.
• Esperar que los cambios de ruta de una aplicación de página única aparezcan: hay una entrada por documento, no por ruta.
• Usar medias en lugar de percentiles sobre muchas visitas.

Navigation Timing en pruebas y monitorización

Es la materia prima de la monitorización de usuarios reales. Como contrapunto de laboratorio, la monitorización de velocidad de página de LoadFocus ejecuta auditorías Lighthouse programadas desde 25 regiones y avisa si una página se ralentiza; el verificador de Core Web Vitals gratuito muestra datos de usuarios reales de una URL. Guía relacionada (en inglés): monitorizar Core Web Vitals con alertas e informes. Detalles de la especificación en PerformanceNavigationTiming en MDN.

Preguntas frecuentes

¿Está obsoleto performance.timing?

Sí. MDN lo marca como obsoleto y sustituido por PerformanceNavigationTiming. Usa performance.getEntriesByType('navigation').

¿Cómo obtengo el tiempo de carga de la página?

Lee la entrada de navegación después del evento load. Su duration es loadEventEnd menos startTime, que vale 0.

¿Mide Navigation Timing los Core Web Vitals?

No. Ofrece hitos de navegación como DOMContentLoaded y load. LCP y CLS vienen de otras entradas de rendimiento.