¿Cuál es la mejor manera de medir los tiempos de carga de la página del lado del cliente?

Question

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 - "Measuring Web application response time: Meet the client"

1. ¿Hay un mejor enfoque?
2. ¿Qué tipo de penalización de rendimiento debo esperar (orden de magnitud)?
3. ¿Qué tan buenos son los resultados?

Answer 1

EDITAR (2013): tratar Boomerang lugar, al igual que @ Yasei-no-umi sugiere. Se mantiene activamente.

- vieja respuesta -

Utilizamos Jiffy.

Es muy fácil de usar y modificar: escribimos nuestro propio código de 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.

Answer 2

Tenemos una "devolución de llamada" (una imagen GIF transparente 1x1 con un parámetro que representa la ID para el procesamiento de página) en la página que registra una "Página vista" 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.

Así tenemos tiempo de:

• preparación página Introducción
• preparación Página/Respuesta terminó
• cliente llamado por teléfono en el hogar cuando se representa completado

ayuda a la comprensión de los clientes que son " lento "(CPU o ISP/ancho de banda)

PS Los renders de página que no llaman a casa también son de interés: el usuario hizo clic (suponiendo que otra página renderiza en esa sesión registró un Phone Home)

Answer 3

¿Qué tal si utilizas algo como yslow (una extensión para Firefox)?

Answer 4

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 me gustaría hacer es tener probadores van a diversas redes y usar algo como Firebug o algo:

http://getfirebug.com/

Para el gusto de hacerlo; 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. :)

http://research.microsoft.com/en-us/groups/rad/sosp07.pdf

Answer 5

Nos tienden a utilizar una combinación de:

Firefox: Web Developer Toolbar Firebug YSlow

IE: Fiddler

de todo esto, he encontrado YSlow da la mejor información sobre lo que puede hacer para mejorar los 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 n velocidades de trabajo

Answer 6

Una alternativa a Jiffy es Episodes.

Ambos implican instrumentar su Javascript para realizar un seguimiento de varias temporizaciones y registrar esas temporizaciones en un servidor central.

Answer 7

También hay Boomerang de Yahoo.

Tiene algunas funciones avanzadas que no existen en Jiffy and Episodes. También soporte Navigation Timing API en los navegadores que lo soportan (cromo 6, IE 9)

Answer 8

Para completarlo, ahora se puede utilizar la API de temporización y navegación en algunas de las modernas navegadores: 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); 
} 

tercera parte de edición

Basado en caniuse.com navigation timing es ampliamente apoyado hoy (10/2016)