TBT - Total Blocking Time - Tempo di blocco totale - BHOOST

Il tempo di blocco totale (TBT) è una delle metriche monitorate nella sezione Prestazioni del rapporto Lighthouse. Ogni metrica cattura alcuni aspetti della velocità di caricamento della pagina.

Il rapporto Lighthouse mostra TBT in millisecondi:

Indice dei contenuti

Cosa misura TBT

TBT misura la quantità totale di tempo in cui una pagina è bloccata dal rispondere all’input dell’utente, come clic del mouse, tocchi dello schermo o pressioni della tastiera. La somma viene calcolata sommando la parte di blocco di tutte le attività lunghe tra First Contentful Paint e Time to Interactive . Qualsiasi attività eseguita per più di 50 ms è un’attività lunga. La quantità di tempo dopo 50 ms è la parte di blocco. Ad esempio, se Lighthouse rileva un’attività di 70 ms, la porzione di blocco sarebbe di 20 ms.

In che modo Lighthouse determina il tuo punteggio TBT

Il tuo punteggio TBT è un confronto tra il tempo TBT della tua pagina e il TBT per milioni di siti reali caricati su dispositivi mobili. Consulta Come vengono determinati i punteggi delle metriche per sapere come vengono impostate le soglie del punteggio di Lighthouse.

Questa tabella mostra come interpretare il tuo punteggio TBT:

Tempo TBT (in millisecondi)	Codificazione del colore
0–200	Verde (veloce)
200-600	Arancio (moderato)
Oltre 600	Rosso (lento)

Consulta il post sul punteggio delle prestazioni di Lighthouse per sapere come viene calcolato il punteggio delle prestazioni complessive della tua pagina.

Come migliorare il tuo punteggio TBT

Vedi Qual è la causa delle mie lunghe attività? per scoprire come diagnosticare la causa principale di attività lunghe con il pannello Prestazioni di Chrome DevTools.

In generale, le cause più comuni di compiti lunghi sono:

Caricamento, analisi o esecuzione JavaScript non necessari. Durante l’analisi del codice nel pannello Prestazioni, potresti scoprire che il thread principale sta eseguendo un lavoro che non è realmente necessario per caricare la pagina. La riduzione dei payload JavaScript con la suddivisione del codice , la rimozione del codice non utilizzato o il caricamento efficiente di JavaScript di terze parti dovrebbe migliorare il tuo punteggio TBT.
Dichiarazioni JavaScript inefficienti. Ad esempio, dopo aver analizzato il codice nel pannello Prestazioni, supponiamo di visualizzare una chiamata document.querySelectorAll(‘a’)che restituisce 2000 nodi. Il refactoring del codice per utilizzare un selettore più specifico che restituisce solo 10 nodi dovrebbe migliorare il punteggio TBT.

Il caricamento, l’analisi o l’esecuzione di JavaScript non necessari è solitamente un’opportunità molto più grande di miglioramento sulla maggior parte dei siti.

Come migliorare il tuo punteggio di Performance complessivo

A meno che tu non abbia un motivo specifico per concentrarti su una metrica particolare, di solito è meglio concentrarti sul miglioramento del tuo punteggio di Performance complessivo.

Utilizza la sezione Opportunità del rapporto Lighthouse per determinare quali miglioramenti avranno più valore per la tua pagina. Più significativa è l’opportunità, maggiore sarà l’effetto che avrà sul tuo punteggio di Performance. Ad esempio, lo screenshot di Lighthouse di seguito mostra che l’ eliminazione delle risorse che bloccano il rendering produrrà il miglioramento maggiore.

Testa ora la velocità del tuo sito e ottieni 1 mese di Hosting Bhoost GRATIS.

Fonte / Source: https://web.dev/lighthouse-total-blocking-time/