javascript - pantalla - ha fallado la carga del<script> con origen
¿Cuál es la mejor manera de medir los tiempos de carga de la página del lado del cliente? (8)
Estoy buscando monitorear la experiencia del usuario final de nuestro sitio web y vincular eso con la información de tiempo ya registrada en el lado del servidor. Mi suposición es que esto requerirá javascript para capturar marcas de tiempo al inicio de la solicitud (window.onbeforeunload) y al final de la carga (window.onload). Básicamente esto: " Medir el tiempo de respuesta de la aplicación web: conocer al cliente "
- ¿Hay un mejor enfoque?
- ¿Qué tipo de penalización de rendimiento debería esperar (orden de magnitud)?
- ¿Qué tan buenos son los resultados?
Soy bastante dudoso de estos métodos. Algunos de estos métodos son más complejos de lo necesario y cuestiono la precisión de estos datos. Lo que haría es hacer que los verificadores vayan a varias redes y utilicen algo como Firebug o algo así:
Por el bien de eso; aquí hay un documento interesante presentado recientemente a SOSP sobre una herramienta llamada AjaxScope. Curiosamente, es un artículo académico, presentado por MS Research, que muestra que la implementación de JavaScript de Firefox es mucho mejor que la de Internet Explorer en algunos casos. :)
Tenemos una "devolución de llamada" (una imagen GIF transparente de 1x1 con un parámetro que representa la ID para el procesamiento de la página) en la página que registra una "Página visitada" en nuestra base de datos. Se trata de registros con el mismo ID que la página en sí misma, y tenemos una entrada de registro cuando termina nuestro renderizado.
Entonces tenemos tiempo de:
- Comenzó la preparación
- Preparación de la página / respuesta finalizada
- Cliente llamado por teléfono a casa cuando se completa la renderización
Ayuda a comprender clientes que son "lentos" (CPU o ISP / ancho de banda)
Los avisos de la Página PS que no llaman a la casa también son de interés: el usuario hizo clic (suponiendo que otra página presente en esa sesión grabó una Phone Home)
Tendemos a usar una combinación de:
Firefox: Web Developer Toolbar Firebug YSlow
IE: Fiddler
De todos ellos, encontré que YSlow brinda la mejor información sobre lo que puede hacer para mejorar sus tiempos de carga, pero Fiddler brinda la mejor información general sobre lo que puede esperar a través del cable, e incluso puede simular diferentes velocidades de red.
También hay Boomerang de Yahoo.
Tiene algunas características avanzadas que no existen en Jiffy y Episodios. También es compatible con Navigation Timing API en los navegadores que lo admiten (Chrome 6, IE 9)
EDITAR (2013): pruebe Boomerang , como sugiere @ yasei-no-umi. Se mantiene activamente.
- vieja respuesta -
Usamos Jiffy .
Es muy fácil de usar y modificar: escribimos nuestro propio código del lado del servidor (en lugar de Jiffy''s Apache + perl) y usamos Jiffy''s JS.
En cuanto a una penalización de rendimiento, no hay una en el lado del cliente. El JS en sí mismo es trivialmente rápido, y el informe al servidor se puede hacer con un XHR después de la carga de la página, lo que no afecta a nada en la experiencia del usuario. En el lado del servidor, recibirá el doble de solicitudes. Si eso es un cuello de botella, puede configurar un servidor diferente solo para las respuestas de tiempo.
Para mayor completitud, ahora puede usar la API de sincronización de navegación en algunos de los navegadores modernos : https://developer.mozilla.org/en-US/docs/Navigation_timing
function onLoad() {
var now = new Date().getTime();
var page_load_time = now - performance.timing.navigationStart;
console.log("User-perceived page loading time: " + page_load_time);
}
Edición de terceros
Basado en caniuse.com, el tiempo de navegación es ampliamente compatible hoy (10/2016)