Cos’è il Total Blocking Time (TBT) e come migliorarlo

Il Total Blocking Time (TBT) è una metrica delle prestazioni web che misura il tempo durante il caricamento della pagina quando il thread principale è bloccato e gli utenti riscontrano ritardi nell’interazione con la pagina.

Per migliorare il TBT, concentrati sull’ottimizzazione di JavaScript, riducendo al minimo le risorse di blocco del rendering e utilizzando strumenti di prestazioni come Lighthouse. La gestione efficiente degli script di terze parti, la definizione delle priorità delle risorse critiche e l’impiego di tecniche di caricamento asincrone contribuiscono a ridurre il TBT, con conseguente esperienza utente più fluida e reattiva sul tuo sito.

Il Total Blocking Time (TBT) è la metrica più importante (insieme a LCP) per il tuo punteggio in PageSpeed ​​Insights (PSI) di Google.

Questo è il risultato di un aggiornamento della tecnologia che alimenta PSI: Lighthouse.

La versione 6 di Lighthouse ha modificato tutte le vecchie metriche.

In particolare, ha rimosso :

1. First CPU Idle (FCI)
2. First Meaningful Paint (FMP)

mentre ha aggiunto

• TBT,
• LCP
• CLS al mix.

Come puoi avere notato, TBT rappresenta un grosso scoglio per molte aziende in questo momento. E ci sono alcune ragioni per questo.

In questo articolo, scoprirai:

• Cos’è TBT
• Come Google misura TBT;
• Le differenze tra TBT e TTI;
• Come controllare quali attività danneggiano il tuo TBT.

Iniziamo!

Cos’è il Total Blocking Time (TBT)?

Il Total Blocking Time (TBT) è la quantità di tempo durante la quale le attività lunghe (tutte le attività più lunghe di 50 ms) bloccano il thread principale e influenzano l’usabilità di una pagina.
Mostra quindi per quanto tempo una pagina non risponde prima di diventare completamente interattiva.

Scomponiamo questa definizione nelle sue componenti.

Innanzitutto, un’attività lunga è un’attività che viene eseguita sul thread principale per più di 50 ms. Le attività lunghe bloccano il thread principale perché il browser non può interromperle mentre sono in esecuzione, anche in caso di input dell’utente.

Dopodiché, dobbiamo capire alcune cose sul thread principale.

Cos’è il Main thread?

Il thread principale o Main thread è dove un browser elabora gli eventi utente e “dipinge”(cioè compone una pagina).

Per default, il browser utilizza un singolo thread per eseguire tutto il JavaScript nella tua pagina, nonché per eseguire layout, reflow e garbage collection.

Ciò significa che le funzioni JavaScript di lunga durata possono bloccare il thread, portando a una pagina non reattiva e a una cattiva esperienza utente.

Il thread principale è la star dello spettacolo quando si tratta di visualizzare (renderizzare) una pagina. Il browser si affida a esso per un sacco di cose.
Dopo che il browser ottiene un file di codice, il thread principale analizza l’HTML e lo trasforma in un Document Object Model (DOM).

Il thread principale analizza quindi il CSS e determina lo stile per ogni elemento.

Il thread principale esegue anche circa un miliardo di altri lavori. :D

Per ora, atteniamoci al ruolo che ha TBT in tutto questo.

Ok, quindi il thread principale fa tutto il lavoro pesante.

Cosa c’è di sbagliato in questo?

Beh, il thread principale è sovraccarico. E di default, tutto JavaScript viene eseguito su di esso. Questo andrebbe bene se il thread principale non avesse altre cose da fare. Ma ce le ha.

E, come ho scritto sopra, il browser non può interrompere un’attività già avviata. Di conseguenza, una lunga funzione JS può bloccare completamente il thread, indipendentemente da cosa sia responsabile della funzione.

In questi casi, la pagina non risponde più. Gli utenti devono attendere prima che il loro input produca un risultato.

E sappiamo tutti quanto gli utenti amino aspettare. :(

Come Google misura il TBT

Diamo un’occhiata ad alcuni esempi per capire come Google misura questa metrica.

Supponiamo di avere quattro attività in esecuzione sul thread principale.

L’attività uno impiega 290 ms, l’attività due 30 ms, l’attività tre 90 ms e l’attività quattro 60 ms.

Per calcolare il TBT, dobbiamo fare due cose:

• Calcolare il tempo di blocco di ogni attività
• Sommare tutti i risultati

Ricorda:

Solo il tempo superiore a 50 ms è considerato tempo di blocco (Blocking Time).

 

Quindi, l’attività uno è lunga 290 ms, 240 ms dei quali sono bloccanti. L’attività due impiega meno di 50 ms, quindi non contribuisce al TBT. Task

La terza è lunga 90 ms, di cui 50 ms sono bloccanti. E il Task quattro è lungo 60 ms, di cui 10 ms sono bloccanti.

Aggiungendo 240 ms, 50 ms e 10 ms, otteniamo il nostro TBT. Nel nostro caso, è 300 ms.

Diamo un’occhiata a un altro esempio.

Diciamo che abbiamo solo un task sul thread principale che è lungo 400 ms. All’inizio, un task potrebbe sembrare meglio di quattro.

Tuttavia, il tempo di blocco di quel task magari è  di 4000 ms. Anche se è solo un task, blocca il thread per più tempo dei quattro task nell’esempio di sopra messi insieme.

E questo è un punto fondamentale da considerare quando si parla di TBT:

Quindi avere un piccolo numero di task sul thread principale non significa necessariamente un basso Blocking Time.

Al contrario, un gran numero di task non porta necessariamente a tonnellate di tempo di blocco (TBT)o a una brutta esperienza utente.

Tieni presente questo quando cerchi modi per migliorare il tuo TBT.

Le differenze tra TBT e TTI

A prima vista, TBT suona come Time To Interactive (TTI). Ma sebbene simili, entrambe le metriche in ultima analisi misurano cose diverse.

TTI ti dice quanto tempo impiega la pagina a diventare completamente interattiva, misurato in secondi. Per essere considerata interattiva, la pagina deve visualizzare contenuti utili e rispondere agli input dell’utente in meno di 50 ms. Inoltre, i gestori di eventi devono essere registrati per la maggior parte degli elementi della pagina.

Ma quando esattamente la pagina visualizza contenuti utili?

Bene, First Contentful Paint (FCP) lo misura. FCP ti dice quando è stato presentato il primo testo o la prima immagine all’utente.

È qui che entra in gioco TBT. TBT misura cosa sta succedendo tra FCP e TTI.

Quando i visitatori provano a interagire con una pagina durante quel periodo, si verificano dei ritardi perché il thread principale è occupato. TBT aiuta a quantificare la gravità di questi ritardi.

Ecco perché TBT è fantastico. Ti fornisce un quadro dettagliato di quanto l’interattività sia stata influenzata gravemente dalle attività lunghe, anziché indicare quando una pagina è diventata interattiva.

Ecco perché TBT è un’ottima metrica autonoma e un fantastico compagno di TTI.

Come verificare quali attività danneggiano il tuo TBT

Gli audit di Chrome Dev Tools Performance e Lighthouse altri strumenti per misurare la velocita del sito possono fornirti informazioni sulle attività lunghe nel thread principale.

Per prima cosa, diamo un’occhiata all’audit delle prestazioni.

Vai a una pagina che vuoi analizzare. Fai clic con il pulsante destro del mouse e seleziona “Ispeziona“. Dopodiché, fai clic su “Prestazioni”.

Fai clic sul pulsante “Ricarica e Registra” ​​e attendi che Chrome faccia il suo lavoro.

Otterrai un’analisi dettagliata delle prestazioni della pagina.

Nella sezione “Principale“, vedrai le attività colorate in colori diversi. Se vedi un’attività grigia con una piccola sovrapposizione rossa, hai trovato un’attività lunga. Quando ci passi sopra con il mouse, vedrai quanto tempo impiega nel thread principale.

Puoi anche cliccare su “Dal Basso verso l’alto” per vedere una descrizione dettagliata di ogni attività.

Da lì, puoi suddividere ogni attività e vedere cosa causa i ritardi.

Un’altra opzione è quella di analizzare il tempo di blocco totale del tuo sito web utilizzando l’audit Lighthouse in Chrome.

Di nuovo, fai clic con il pulsante destro del mouse, seleziona “Ispeziona”. Questa volta vai su “Lighthouse”.

Otterrai un sacco di suggerimenti per il tuo sito web.

E molti di questi possono aiutarti con TBT in un modo o nell’altro.

Tuttavia, i due suggerimenti più comuni su come migliorare il total blocking time sono:

• ridurre l’impatto del codice di terze parti
• minimizzare il carico sul thread principale.

Troverai questi suggerimenti nella sezione “Diagnostica”.

Questo report non ti fornirà una ripartizione granulare delle attività come fa una Waterfall, ma ti indicherà specifici problemi di prestazioni.

Entrambi gli audit hanno tutte le informazioni di cui hai bisogno per trovare la fonte dei tuoi problemi con TBT.

Considerazioni finali

TBT è sicuramente una metrica che devi tenere d’occhio quando ottimizzi le prestazioni del tuo sito.

Mentre Total Blocking Time non fa parte del programma Core Web Vitals di Google, Largest Contentful Paint e Cumulative Layout Shift lo sono.

Entrambi influenzano la classifica organica del tuo sito web, quindi scopri cosa puoi fare con queste metriche dell’esperienza di pagina e mettiti al lavoro.