Apra il pannello di rete, ricarichi e guardi la FORMA prima di leggere qualsiasi cosa. Quattro forme coprono quasi ogni pagina lenta, e ognuna indica un posto diverso.

1. Una barra lunga in cima, poi tutto il resto

È stato il documento stesso a prendersi quasi tutto il tempo. Quello è tempo del server, e nulla che riguardi immagini o script lo cambierà. Vada a misurare il TTFB.

2. Una scala

Ogni richiesta parte quando finisce la precedente. Qualcosa viene scoperto solo dopo che qualcos'altro è stato caricato: un foglio di stile che ne importa un altro, o uno script che inserisce uno script. Ogni gradino è un andata e ritorno completo.

<link rel="preload" href="/fonts/body.woff2" as="font" crossorigin>

3. Un muro, poi una lunga coda

Parte tutto insieme e qualcuno ci mette molto di più. Quei pochi di solito sono di terze parti: uno script di analisi, un widget di chat, un font da un altro dominio. Il suo server sta bene e la pagina no.

Uno script di terze parti nell'head senza async né defer blocca il rendering al ritmo del tempo di risposta del server LORO. Il loro guasto è la sua pagina bianca.

4. Un grande vuoto prima del primo disegno

I byte sono arrivati e non è stato disegnato nulla. CSS che blocca il rendering, o un font che aspetta di essere scambiato. Guardi la dimensione del primo foglio di stile e font-display.

@font-face { font-display: swap; }

Le tre colonne che vale la pena leggere

  • Waiting (TTFB) - il server che pensa.
  • Content Download - i byte che si muovono. Grande qui vuol dire che il file è troppo grosso.
  • Queueing / Stalled - l'attesa di una connessione. Che qui sia grande su HTTP/1.1 è la ragione per cui esiste HTTP/2.
Provi su una connessione rallentata, non sulla sua. Su una linea veloce da scrivania sembra andare quasi tutto bene, mentre i suoi visitatori sono al telefono.