Il tempo di blocco totale (TBT) è una delle metriche monitorate nella sezione Rendimento del report Lighthouse. Ogni metrica acquisisce alcuni aspetti della velocità di caricamento della pagina.
Il report Lighthouse mostra TBT in millisecondi:
Cosa misurano le TBT
TBT misura il tempo totale durante il quale una pagina non risponde all'input dell'utente, ad esempio clic del mouse, tocchi sullo schermo o pressioni della tastiera. La somma viene calcolata aggiungendo la parte che blocca tutte le attività lunghe tra First Contentful Paint e Time to Interactive. Qualsiasi attività eseguita per più di 50 ms è lunga. La quantità di tempo dopo 50 ms è la parte di blocco. Ad esempio, se Lighthouse rileva un'attività di 70 ms, la parte di blocco sarà di 20 ms.
In che modo Lighthouse determina il punteggio TBT
Il punteggio TBT mette a confronto il tempo TBT della tua pagina e il tempo TBT moltiplicato per milioni di siti reali quando vengono caricati su dispositivi mobili. Consulta Come vengono determinati i punteggi delle metriche per scoprire come sono impostate le soglie di punteggio Lighthouse.
Questa tabella mostra come interpretare il punteggio TBT:
| Tempo TBT (in millisecondi) |
Codifica con colori |
|---|---|
| 0-200 | Verde (veloce) |
| 200-600 | Arancione (moderato) |
| Oltre 600 | Rosso (lenta) |
Come migliorare il tuo punteggio TBT
Consulta la sezione Qual è la causa delle mie attività lunghe? per scoprire come diagnosticare la causa principale delle attività lunghe con il riquadro Prestazioni di Chrome DevTools.
In generale, le cause più comuni di attività lunghe sono:
- Caricamento, analisi o esecuzione di JavaScript non necessari. Mentre analizzi il codice nel riquadro Rendimento, potresti scoprire che il thread principale sta svolgendo operazioni non necessarie per caricare la pagina. La riduzione dei payload JavaScript con la suddivisione del codice, la rimozione del codice inutilizzato o il caricamento efficiente di JavaScript di terze parti dovrebbe migliorare il tuo punteggio TBT.
- Istruzioni JavaScript inefficienti. Ad esempio, dopo aver analizzato il codice nel riquadro Prestazioni, supponi di vedere una chiamata a
document.querySelectorAll('a')che restituisce 2000 nodi. Il refactoring del codice per utilizzare un selettore più specifico che restituisca solo 10 nodi dovrebbe migliorare il tuo punteggio TBT.
Come migliorare il punteggio di rendimento complessivo
A meno che tu non abbia un motivo specifico per concentrarti su una determinata metrica, è meglio concentrarsi sul miglioramento del punteggio di rendimento complessivo.
Utilizza la sezione Opportunità del report Lighthouse per determinare quali miglioramenti avranno più valore per la tua pagina. Più alta è l'opportunità, maggiore sarà l'effetto sul punteggio del rendimento. Ad esempio, lo screenshot di Lighthouse riportato di seguito mostra che l'eliminazione delle risorse di blocco della visualizzazione produrrà il maggiore miglioramento:
Consulta la pagina di destinazione dei controlli delle prestazioni per scoprire come sfruttare le opportunità identificate nel report Lighthouse.
Risorse
- Codice sorgente per il controllo Tempo di blocco totale
- Le attività JavaScript lunghe ritardano il tempo all'interattività?
- Ottimizza First Input Delay
- First Contentful Paint
- Tempo all'interattività
- Riduci i payload JavaScript con la suddivisione del codice
- Rimuovi il codice inutilizzato
- Caricare in modo efficiente le risorse di terze parti