Saltar al contenido

Tiempo de carga de la página con JavaScript

Solución:

Es prácticamente el solamente forma en los navegadores heredados para medir los tiempos. Pero para el rescate, la mayoría de los navegadores implementan la window.performance objeto que ofrece una forma muy, muy precisa de obtener tiempos.

Un típico window.performance.timing producción:

connectEnd 1351036536696
connectStart 1351036536696
domComplete 1351036538277
domContentLoadedEventEnd 1351036538146
domContentLoadedEventStart 1351036538119
domInteractive 1351036538042
domLoading 1351036537552
domainLookupEnd 1351036536694
domainLookupStart 1351036536694
fetchStart 1351036536696
loadEventEnd 1351036538295
loadEventStart 1351036538277
navigationStart 1351036536696

..que ni siquiera es la lista completa.

Si solo está depurando el tiempo de carga de la página en su máquina local, Firebug de Firefox, Chrome Developer Tools y F12 Developer Tools de IE exponen los últimos tiempos de carga de la página.

Para obtener los tiempos de carga de la página de los visitantes de su sitio en el mundo real, querrá utilizar Real User Monitoring (también conocido como RON) métricas de carga de la página. Recomendaría mirar la especificación NavigationTiming. Esta especificación, compatible con IE9 +, FF7 + y Chrome6 +, expone los tiempos de carga de la página (por ejemplo, DNS, conexión TCP, solicitud, respuesta y tiempos DOM) a través del DOM del navegador. Esto puede permitirle obtener tiempos de carga de página con una precisión de milisegundos para cada visitante que llega a su sitio en un navegador moderno.

Expone todas estas métricas en la línea de tiempo:
ingrese la descripción de la imagen aquí

Ahora que estas métricas están expuestas, hay varias formas de consumirlas.

Para una solución de bricolaje, Boomerang es una biblioteca de terceros que utiliza NavigationTiming en los navegadores modernos para enviar estos datos a su centro de datos. Para los navegadores más antiguos, tiene algunos trucos interesantes que controlan la navegación de página a página dentro de su sitio para determinar cuánto tardan las cargas de página.

Si no está interesado en averiguar todas las cosas de Boomerang, hay varios otros proveedores de servicios que utilizan datos de NavigationTiming (y similares) para informar los datos de rendimiento de carga de la página, como web.dev, Google Analytics, New Relic, Pingdom, Speedcurve y Speedrank.

Considero usar Firebug de Firefox:

ingrese la descripción de la imagen aquí

… o las herramientas de desarrollo de Chrome (presione F12)
ingrese la descripción de la imagen aquí

Ver también:

  • https://getfirebug.com/network
  • https://developers.google.com/chrome-developer-tools/docs/network
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *