Qual è il modo migliore per misurare i tempi di caricamento della pagina lato client?

Sto cercando di monitorare l'esperienza dell'utente finale del nostro sito Web e collegarlo con le informazioni di sincronizzazione già registrate sul lato server. La mia ipotesi è che questo richiederà javascript per acquisire timestamp all'inizio della richiesta (window.onbeforeunload) e alla fine del caricamento (window.onload). Fondamentalmente questo - "Measuring Web application response time: Meet the client"Qual è il modo migliore per misurare i tempi di caricamento della pagina lato client?

C'è un approccio migliore?
Che tipo di penalità per prestazioni dovrei aspettarmi (ordine di grandezza)?
Quanto sono buoni i risultati?

fonte

2009-02-13 Kam

EDIT (2013): provate Boomerang invece, come @ Yasei-no-umi suggerisce. È mantenuto attivamente.

- vecchia risposta -

Usiamo Jiffy.

È molto semplice da utilizzare e modificare: abbiamo scritto il nostro codice sul lato server (invece di Jiffy's Apache + perl) e utilizzato JS Jiffy.

Per quanto riguarda una riduzione delle prestazioni - non c'è uno sul lato client. Lo stesso JS è banalmente veloce e la segnalazione al server può essere eseguita con un XHR dopo il caricamento della pagina, che non influisce sull'esperienza dell'utente.Sul lato server avrai il doppio delle richieste. Se questo è un collo di bottiglia, potresti configurare un altro server solo per le risposte temporali.

fonte

2009-04-27 12:18:27 orip

Questa libreria sembra essere non mantenuta dal 2008. – migg

@migg - sì, Boomerang è l'opzione migliore – orip

@surfmuggle - hai ragione, aggiornato. – orip

Abbiamo una "richiamata" (un'immagine GIF trasparente 1x1 con un parametro che rappresenta l'ID per il rendering della pagina) nella pagina che registra una "Pagina visualizzata" nel nostro database. Si tratta di record con lo stesso ID che la pagina stessa è stata registrata e abbiamo una voce di log al termine del rendering.

Così abbiamo il tempo di:

preparazione Page ha iniziato
preparazione Page/Response finito
client telefonato-casa, quando il rendering completato

aiuta a capire i clienti che sono " lento"(CPU o ISP/larghezza di banda)

PS Pagina rende che non chiamare casa sono di interesse troppo - l'utente fa clic-off (supponendo che altra pagina esegue il rendering in quella sessione ha registrato un telefono di casa)

fonte

2009-02-13 20:09:30 Kristen

sono un po 'unc scopri come hai inizio la richiesta. È tracciato in base al timestamp del server? Sono anche incerto su come distinguere tra la finitura di rendering e quando viene richiesta l'immagine. I browser non recuperano le immagini prima che la pagina finisca il rendering? -Kam – Kam

C'è anche un elemento in base all'ordine di caricamento, credo che più browser guardino in avanti attraverso il documento per trovare le risorse come cose in anticipo - non sono sicuro se caricheranno solo specifici tipi di risorse. – olliej

Scusa, non ero molto chiaro. I primi due sono i tempi in cui l'applicazione serveride si avvia e termina preparando la pagina. La Phone House è quando il browser del client carica la nostra immagine falsa. Sì, è soggettivo sul fatto che il rendering sia completo, usiamo l'evento OnLoad. Modificherò il mio testo – Kristen

Che dire utilizzando qualcosa di simile a yslow (un'estensione per Firefox)?

fonte

2009-02-13 20:13:14 GregD

In questo caso sono interessato all'esperienza degli utenti in produzione. Il mio obiettivo è conoscere le prestazioni a livello di sistema anziché solo le singole prove. yslow ci ha dato ottimi suggerimenti, non è una soluzione di monitoraggio. – Kam

-1

Sono abbastanza dubbioso su questi metodi. Alcuni di questi metodi sono più complessi del necessario e metto in discussione l'accuratezza di questi dati. Quello che mi piacerebbe fare è di avere tester vanno a varie reti e usare qualcosa come Firebug o qualcosa:

http://getfirebug.com/

Per il gusto di farlo; ecco un documento interessante recentemente presentato a SOSP su uno strumento chiamato AjaxScope. È interessante notare che si tratta di un articolo accademico, presentato da MS Research, che mostra l'implementazione Javascript di Firefox che funziona in molti casi meglio di Internet Explorer. :)

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

fonte

2009-02-13 20:13:37 BobbyShaftoe

Non sono in disaccordo con la complessità, ma registriamo questi dati anche sui siti Live, quindi segnaliamo come varia nel tempo (piuttosto che solo controlli puntuali). Questo mostra pagine che hanno rallentato (ad esempio il database ha bisogno di ottimizzazione) – Kristen

@Kristen: Sì, potrebbe funzionare. Sono solo un po 'a disagio a riguardo. :) Potresti essere interessato a un documento recentemente presentato a SOSP su AjaxScope da MS Research. http://research.microsoft.com/en-us/groups/rad/sosp07.pdf – BobbyShaftoe

"Quello che farei è che i tester vadano su varie reti e usino qualcosa come Firebug o qualcosa del genere" - Questo non funzionerebbe se hai utenti distribuiti a livello globale. A quante "reti" invierete i tester? – talonx

-1

tendiamo ad usare una combinazione di:

Firefox: Web Developer Toolbar Firebug YSlow

IE: Fiddler

di tutti questi, ho trovato YSlow dà il meglio informazioni su cosa puoi fare per migliorare i tempi di caricamento, ma Fiddler fornisce le migliori informazioni generali su ciò che puoi aspettarti sul filo, e può anche simulare diversi n velocità della rete.

fonte

2009-04-27 12:23:17

wow - Sono stato downvoted per questo? alcune persone spietate su SO al giorno d'oggi ...:/ –

Un'alternativa a Jiffy è Episodes.

Entrambi prevedono lo strumenting di Javascript per tenere traccia di vari intervalli di tempo e la registrazione di questi orari su un server centrale.

fonte

2009-05-07 19:09:38

C'è anche Boomerang da Yahoo.

Alcune funzioni avanzate non sono presenti in Jiffy e negli episodi. Anche il supporto Navigation Timing API nei browser che lo supportano (cromo 6, IE 9)

fonte

2010-12-13 19:14:40

Yahoo Boomerang sembra non essere più in fase di sviluppo attivo. Ma c'è un fork su github e sembra che [Soasta Boomerang] (https://github.com/SOASTA/boomerang) sia ancora in fase di sviluppo. – surfmuggle

Per completezza, è ora possibile utilizzare la sincronizzazione API di navigazione in alcune delle moderni browser: 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); 
}

3rd party modificare

sulla base caniuse.com navigation timing è ampiamente supportato oggi (10/2016)

fonte

2012-09-04 11:30:58

Qual è il modo migliore per misurare i tempi di caricamento della pagina lato client?

risposta

Problemi correlati