Il grafico a cascata, o waterfall, è lo strumento diagnostico più ricco a disposizione di chi lavora sulle prestazioni. Mostra ogni richiesta fatta dalla pagina come una barra orizzontale su un asse del tempo. A prima vista sembra un groviglio, ma con un po' di pratica si leggono a colpo d'occhio i punti in cui il caricamento si inceppa. Qui uso come riferimento il pannello Rete di Chrome DevTools, ma i concetti valgono per qualsiasi strumento che produca un waterfall.
Preparare la registrazione
Prima di guardare il grafico conviene creare condizioni sensate:
- spuntare «Disattiva cache» per simulare una prima visita;
- scegliere un profilo di rallentamento della rete, perché su fibra tutto appare istantaneo e le dipendenze si nascondono;
- ricaricare la pagina con il pannello già aperto;
- aggiungere le colonne utili: priorità, protocollo, dimensione trasferita e dimensione della risorsa.
Anatomia di una barra
Passando con il mouse sulla barra di una richiesta compare la suddivisione dei tempi. Le fasi principali sono:
| Fase | Che cosa significa |
|---|---|
| In coda | il browser ha scoperto la risorsa ma aspetta di poterla richiedere |
| Stallo | attesa prima dell'invio, per esempio per limiti di connessioni |
| Ricerca DNS | risoluzione del nome a dominio |
| Connessione iniziale e SSL | handshake TCP e negoziazione TLS |
| Richiesta inviata | invio della richiesta, di solito trascurabile |
| Attesa (TTFB) | tempo che il server impiega a rispondere col primo byte |
| Download del contenuto | trasferimento del corpo della risposta |
Una barra dominata dall'attesa indica un server lento a elaborare. Una barra dominata dal download indica un file pesante o una banda limitata. Una lunga coda indica che la risorsa è stata scoperta presto ma ha ricevuto una priorità bassa, oppure che il browser era impegnato su altro.
Le linee verticali
Il grafico mostra anche alcuni riferimenti verticali, tipicamente l'evento DOMContentLoaded e l'evento load. Sono utili come orientamento, ma non misurano ciò che l'utente vede. Più significativo è confrontare il waterfall con la sequenza di fotogrammi: nel pannello Performance si possono vedere le schermate accanto alla cronologia di rete e capire quale richiesta ha sbloccato il primo disegno.
Schemi che segnalano un problema
La scala
Una serie di barre che partono ciascuna solo quando la precedente è finita, formando una scala discendente, indica una catena di dipendenze. Esempio tipico: l'HTML carica un CSS, il CSS importa con @import un secondo CSS, il secondo dichiara un font. Ogni gradino aggiunge un viaggio completo verso il server. Le soluzioni sono appiattire la catena (niente @import, risorse dichiarate direttamente nell'HTML) o anticipare la scoperta con un preload.
Il buco
Uno spazio vuoto in cui nessuna richiesta è attiva, seguito da una raffica di download, indica che il browser stava eseguendo JavaScript o analizzando qualcosa prima di scoprire nuove risorse. È comune nelle applicazioni che renderizzano lato client: l'HTML è quasi vuoto, si aspetta il bundle, lo si esegue e solo allora partono le richieste di dati e immagini.
Le connessioni ripetute
Se molte barre mostrano DNS, connessione e SSL, la pagina sta contattando troppi domini diversi. Ogni nuovo dominio costa almeno un viaggio di andata e ritorno per la connessione e uno o più per TLS. Ridurre i domini terzi o usare preconnect per quelli indispensabili riduce questo costo.
La risorsa importante in fondo
Se l'immagine principale o il font del titolo compaiono tra le ultime richieste, con priorità bassa, il browser non le ha considerate importanti. Spesso succede perché sono dichiarate nel CSS o inserite da JavaScript. Portarle nell'HTML e indicare fetchpriority="high" per l'immagine principale le sposta in alto.
Leggere la colonna Iniziatore
La colonna «Iniziatore» dice quale file ha provocato ogni richiesta. Tenendo premuto il tasto Maiusc mentre si passa sopra una riga, DevTools evidenzia in verde chi l'ha avviata e in rosso le richieste che essa ha a sua volta generato. È il modo più rapido per ricostruire una catena e capire, per esempio, che un widget di chat apparentemente innocuo scarica a sua volta dieci file da tre domini.
Dimensione trasferita e dimensione reale
Confrontare le due colonne aiuta a capire se la compressione funziona. Un file JavaScript da 400 KB che viene trasferito come 390 KB non è compresso; con Brotli o gzip un file di testo si riduce in genere a una frazione della dimensione originale. Allo stesso modo, la dicitura «(cache su disco)» o «(cache in memoria)» nella colonna dimensione conferma che la cache del browser sta lavorando nelle visite successive.
Un metodo in cinque passi
- Individua l'elemento LCP e trova la sua richiesta nel waterfall.
- Risali la catena di iniziatori fino all'HTML.
- Conta quanti viaggi separano l'HTML da quella risorsa.
- Elimina gli anelli inutili o anticipa la scoperta.
- Ripeti la registrazione e confronta.
In sintesi
- Ogni barra si scompone in coda, connessione, attesa del server e download.
- Le scale indicano catene di dipendenze da appiattire.
- I buchi rivelano JavaScript che ritarda la scoperta delle risorse.
- Troppi handshake segnalano troppi domini diversi.
- La colonna Iniziatore e il confronto delle dimensioni chiariscono cause e compressione.
