Che cos'è TBT?
La metrica Total Block Time (TBT) misura il tempo totale dopo il First Contentful Paint (FCP) in cui il thread principale è stato bloccato per un tempo sufficientemente lungo da impedire la reattività dell'input.
Per impostazione predefinita, Lighthouse interrompe il monitoraggio da TBT dopo Time to Interactive (TTI), così come alcuni altri strumenti lab che misurano il caricamento pagina. Consulta la sezione Qual è la relazione tra TBT e TTI?.
Il thread principale viene considerato "bloccato" ogni volta che è presente un'attività di tipo Attività lunga che viene eseguita sul thread principale per più di 50 millisecondi. Il thread principale è "bloccato" perché il browser non può interrompere un'attività in corso. Pertanto, se un utente interagisce con la pagina nel corso di un'attività lunga, il browser deve attendere il completamento dell'attività prima di poter rispondere.
Se l'attività è abbastanza lunga (più di 50 millisecondi), è probabile che l'utente noterà il ritardo e percepirà la pagina come lenta o non funzionante.
Il tempo di blocco di una determinata attività lunga corrisponde alla sua durata superiore a 50 millisecondi. mentre il tempo di blocco totale per una pagina è la somma del tempo di blocco per ogni attività lunga che si verifica dopo FCP per il periodo di tempo misurato (in genere TTI per gli strumenti di caricamento pagina o il tempo di traccia totale per altri strumenti).
Ad esempio, considera il seguente diagramma del thread principale del browser durante il caricamento della pagina:
La sequenza temporale rappresentata nell'immagine precedente contiene cinque attività, tre delle quali sono attività lunghe perché la loro durata supera i 50 millisecondi. Il seguente diagramma mostra il tempo di blocco per ciascuna delle attività lunghe:
Di conseguenza, mentre il tempo totale dedicato all'esecuzione delle attività nel thread principale è di 560 millisecondi, solo 345 millisecondi di quel tempo sono considerati tempo di blocco.
| Durata attività (millisecondi) | Tempo di blocco delle attività (millisecondi) | |
|---|---|---|
| Attività uno | 250 | 200 |
| Attività due | 90 | 40 |
| Attività tre | 35 | 0 |
| Attività quattro | 30 | 0 |
| Attività cinque | 155 | 105 |
| Tempo di blocco totale | 345 millisecondi | |
Qual è la relazione tra TBT e TTI?
Il TBT viene misurato in un periodo di tempo. Per alcuni strumenti di laboratorio che tradizionalmente misurano i caricamenti delle pagine, tra cui Lighthouse, la metrica TBT è stata misurata fino al TTI, perché consente di quantificare la gravità del livello di non interazione di una pagina prima che diventi interattiva in modo affidabile. Tuttavia, il TBT potrebbe continuare a essere misurato anche dopo il caricamento della pagina e quindi al di là della TTI, ad esempio in modalità Lighthouse Timespan.
TTI considera una pagina "in modo affidabile" se il thread principale è stato privo di attività lunghe per almeno cinque secondi. Ciò significa che tre attività da 51 ms distribuite in 10 secondi possono respingere il TTI fino a una singola attività di 10 secondi, ma questi due scenari sarebbero molto diversi a un utente che tenta di interagire con la pagina.
Nel primo caso, tre attività da 51 ms avrebbero una TBT di 3 millisecondi. Una singola attività di 10 secondi avrebbe invece una TBT di 9950 millisecondi. Il valore TBT maggiore nel secondo caso quantifica l'esperienza peggiore.
Questo esempio mostra perché TBT è spesso una metrica migliore di TTI, in quanto è meno soggetta a outlier. Questo è anche il caso in cui il TTI viene utilizzato come endpoint per TBT.
Come misurare il TBT
Il TBT è una metrica che deve essere misurata in laboratorio. Il modo migliore per misurare il valore da registrare è eseguire un controllo delle prestazioni di Lighthouse sul tuo sito. Per i dettagli di utilizzo, consulta la documentazione di Lighthouse su TBT.
Strumenti del lab
Cos'è un buon punteggio TBT?
Per offrire una buona esperienza utente, i siti dovrebbero cercare di avere un tempo di blocco totale inferiore a 200 millisecondi quando vengono testati su hardware per dispositivi mobili di media.
Per maggiori dettagli su come il valore da TBT della pagina influisce sul punteggio delle prestazioni di Lighthouse, consulta In che modo Lighthouse determina il punteggio TBT
Come migliorare TBT
Per scoprire come migliorare la metrica TBT per un sito specifico, puoi eseguire un controllo delle prestazioni di Lighthouse e prestare attenzione a eventuali opportunità specifiche suggerite dal controllo.
Per informazioni su come migliorare TBT in generale (per qualsiasi sito), consulta le seguenti guide al rendimento: