2013-02-25 12 views
5

Sono interessato a misurare e registrare la nostra prestazione di caricamento della pagina DOPO che il corpo iniziale viene restituito dal server. In altre parole, una volta che il browser ha l'HTML su quando è finito, carica tutte le immagini, css e javascript sulla pagina e ha terminato il rendering e l'esecuzione del primo blocco jquery ready.Test delle prestazioni della pagina Web front-end

Qual è il modo migliore per eseguire test delle prestazioni su questo? La maggior parte di ciò che ho letto tende a concentrarsi sulla risposta del server e sul download dei dati. Tuttavia, la maggior parte delle volte che un utente attende è dopo questo. C'è qualcosa là fuori per aiutare in questo modo in modo automatico?

+0

Avete bisogno di automatizzare l'attività degli utenti? O basta misurare il tempo lato client per il rendering della pagina? – Brad

+0

'Load Testing' non è lo stesso di 'performance del tempo di caricamento della pagina web' ... solo dicendo, il titolo è confuso ... – yoosiba

+0

Scusa, hai ragione. Stavo pensando "Caricamento pagina" non "Carico server". – chrishomer

risposta

3

Chrome ha un profiler incorporato negli strumenti di sviluppo. CTRL+SHIFT+I su PC o Cmd+option+J su Mac.

Con jQuery, DOM ready avverrà prima del caricamento della finestra. Quindi, qualcosa come questo dovrebbe dirvi il delta tra Carico e asset DOM:

// When the DOM is loaded 
$(function(){ 
    console.log('Start ' + new Date().getTime()); 
}); 

// When all the images are loaded 
$(window).load(function(){ 
    console.log('End ' + new Date().getTime()); 
}); 
+0

Attenzione alla precisione temporale JavaScript: http://ejohn.org/blog/accuracy-of-javascript-time/ – Brad

+1

A mio parere, qualsiasi perdita o errore di calcolo derivante dal recupero dello stesso timestamp o dall'attesa fino alla successiva coda 15ms è trascurabile. Se ti stai avvicinando al benchmarking per migliorare meno di 100ms sul caricamento della pagina, non otterrai mai un ROI. – AlienWebguy

+0

Ovviamente, ma tutto dipende da cosa esattamente stai cercando di profilare. Ecco perché l'ho fatto notare. Ho visto un sacco di casi in cui la gente cerca di dedicare un po 'di tempo a ogni iterazione e si chiede perché i suoi dati siano dappertutto. Puoi solo guardare l'immagine più grande, o con molte iterazioni, confrontando i tempi in JavaScript. – Brad

1

L'ottimizzazione delle prestazioni web go (WPO) del settore di strumento per il monitoraggio delle prestazioni front-end è WebPagetest. Ti dà un'analisi molto dettagliata del pieno carico di una pagina web, incluso un grafico a cascata che mostra come ogni risorsa è caricata dal browser web e dove potresti avere problemi. Ottieni anche schermate di eventi chiave del browser, film e video. È davvero uno straordinario strumento open source ed è lo sviluppatore principale impiegato da Google.

http://www.webpagetest.org

WebPagetest non è una soluzione automatizzata però. SpeedCurve è un servizio commerciale che funziona su WebPagetest per automatizzare il processo di test e monitorare le prestazioni front-end. Valuta anche il tuo sito web rispetto ai concorrenti e ti avvisa di problemi con la creazione del tuo sito web. Disclaimer: sono il creatore di SpeedCurve.

http://speedcurve.com

+0

Sei il creatore di SpeedCurve? –

3

è possibile provare i seguenti servizi di monitoraggio degli utenti reali che fornisce quadro chiaro di come gli utenti stanno sperimentando il tuo sito o applicazione web in tempo reale.

Problemi correlati