Come misurare le prestazioni del sito Web utilizzando Google Chrome Developer Tools

Questo articolo descrive come utilizzare gli strumenti di sviluppo di Google Chrome per misurare e monitorare le prestazioni di un sito web.

Utilizzo di Chrome Developer Tools

Il browser Web Google Chrome include Developer Tools, una funzionalità che aiuta gli sviluppatori Web a eseguire il debug di problemi con HTML, CSS e JavaScript:

• Per accedere a Strumenti di sviluppo di Microsoft Windows o Linux, premere Ctrl+Maiusc+I.
• Per accedere a Strumenti di sviluppo su Apple Mac OS X, premere Opzione+Comando+I.

L’immagine seguente mostra gli Strumenti per Sviluppatori di aprire la home page di Google:

Sulla scheda di Rete gli Strumenti di sviluppo riquadro, Chrome elenca tutte le connessioni per la pagina corrente. Per testare una pagina specifica, apri Strumenti di sviluppo e vai alla pagina che desideri testare. In alternativa, se si desidera testare la pagina corrente, è sufficiente aggiornare la pagina.

Chrome visualizza le informazioni per ogni risorsa pagina e la sua richiesta:

Nome: il nome o l’URL della risorsa richiesta.

Metodo: Il metodo HTTP (GET o POST).

Stato: il codice di stato HTTP restituito dal server.

Tipo: il tipo MIME della risorsa.

Iniziatore: Il referente inviato al server; di solito è l’URL della pagina che stai visualizzando.

Dimensione: La dimensione della risorsa ricevuta dal browser (se la pagina è stata compressa dal server, questo valore è inferiore alla dimensione effettiva del file).

Tempo: il tempo totale per recuperare la risorsa, inclusa la ricerca DNS e il tempo di download.

Timeline: La timeline è una vista time-lapse “a cascata” di ogni richiesta. Se si passa il puntatore del mouse su una barra sulla cascata, viene visualizzato un suggerimento con una ripartizione dettagliata del tempo di download:

• Blocco: questo include il tempo per la ricerca DNS, l’handshake SSL e la creazione di una connessione al server.
• Invio: Ciò include il tempo per inviare la richiesta con tutti i dati della richiesta al server e per ricevere conferma dal server che ha ricevuto la richiesta.
• Attesa: questo include il tempo per il server di rendere il contenuto da servire, e per iniziare a inviarlo al browser.
• Ricezione: questo include il tempo necessario per scaricare il contenuto.

La combinazione di tempi di attesa e ricezione è il fattore più importante nel determinare la velocità del sito. Tuttavia, la velocità di connessione a Internet può anche influire sulle prestazioni, pertanto è necessario confrontare sempre i tempi dalla stessa posizione quando si stabiliscono benchmark delle prestazioni del sito.

Nella parte inferiore della scheda Rete c’è un riepilogo del processo di caricamento della pagina. Questo riepilogo include il numero totale di richieste, la dimensione totale dell’intera pagina comprese le sue risorse e una ripartizione del tempo trascorso a rendere la pagina nel browser.

Il valore first time è il tempo totale impiegato per caricare tutto il contenuto della pagina. Questo valore include il contenuto caricato da JavaScript dopo il rendering della pagina; di conseguenza, questo numero può cambiare se le richieste si verificano in background.

I due valori temporali all’interno delle parentesi sono eventi importanti per l’ottimizzazione del sito:

• carica: Questo evento è il momento di caricare la pagina, inclusi tutti i file JavaScript, CSS e immagine presenti nel documento HTML originale. Questo evento richiede generalmente più tempo dell’evento DOMContentLoaded.
• DOMContentLoaded: Questo evento rappresenta il tempo percepito da un utente per caricare la pagina. È il momento di rendere la pagina come descritto nel documento originale prima che JavaScript richieda risorse aggiuntive. Questa volta viene memorizzata quando il browser attiva l’evento DOMContentLoaded in JavaScript. (Un esempio di una risorsa richiesta al di fuori del DOM è Google Analytics.)