Che cos'è il TBT?
La metrica Tempo di blocco totale (TBT) misura il tempo totale dopo il First Contentful Paint (FCP) in cui il thread principale è stato bloccato per il tempo necessario a evitare la reattività all'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à 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, nel caso in cui un utente interagisse con la pagina nel bel mezzo 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 noti il ritardo e percepisca la pagina come lenta o non funzionante.
Il tempo di blocco di una determinata attività lunga corrisponde alla sua durata superiore a 50 millisecondi. Il tempo di blocco totale di una pagina è la somma del tempo di blocco di ogni attività lunga che si verifica dopo l'FCP per il periodo di tempo misurato (in genere TTI per gli strumenti di caricamento della 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 dell'attività (millisecondi) | Tempo di blocco dell'attività (millisecondi) | |
|---|---|---|
| Attività uno | 250 | 200 |
| Attività 2 | 90 | 40 |
| Attività tre | 35 | 0 |
| Attività quattro | 30 | 0 |
| Attività 5 | 155 | 105 |
| Tempo di blocco totale | 345 millisecondi | |
Qual è la relazione tra TBT e INP?
Il TBT è precedente all'INP ed è utile come indicatore di problemi di INP, in particolare nell'ambiente di laboratorio, dove la misurazione dell'INP è più difficile. Tuttavia, TBT può segnalare potenziali problemi anche se non ci sono problemi per gli utenti, se non interagiscono in quel momento. Inoltre, possono essere ignorati i problemi causati dalle interazioni quando vengono misurati nell'ambiente di laboratorio. Consigliamo di misurare l'INP sul campo come misura dei problemi di reattività effettivi riscontrati dagli utenti. Il TBT potrebbe essere una metrica proxy ragionevole per l'INP per il lab, ma non sostituisce l'INP in sé.
Qual è la relazione tra TBT e TTI?
Il TBT viene misurato in un determinato periodo di tempo. Per alcuni strumenti di laboratorio che misurano tradizionalmente i caricamenti delle pagine, tra cui Lighthouse, il TBT è stato misurato fino al TTI perché aiuta a quantificare la gravità della non interattività 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 oltre il TTI, ad esempio in modalità Periodo di tempo di Lighthouse.
TTI considera una pagina "interattiva in modo affidabile" se il thread principale è stato privo di attività lunghe per almeno cinque secondi. Ciò significa che tre attività di 51 ms distribuite su 10 secondi possono posticipare il TTI tanto quanto una singola attività di 10 secondi, ma questi due scenari sarebbero molto diversi per un utente che tenta di interagire con la pagina.
Nel primo caso, tre attività di 51 ms avranno un TBT di 3 millisecondi. Mentre una singola attività di 10 secondi avrebbe un TBT di 9950 millisecondi. Il valore TBT maggiore nel secondo caso quantifica l'esperienza peggiore.
Questo esempio mostra perché il TBT è spesso una metrica migliore del TTI, in quanto è meno soggetto a valori anomali. 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 TBT è eseguire un controllo delle prestazioni di Lighthouse sul tuo sito. Per i dettagli di utilizzo, consulta la documentazione di Lighthouse su TBT.
È possibile misurare il TBT sul campo, ma sconsigliamo questa operazione perché l'interazione dell'utente può influire sul valore da confermare della pagina in modi che possono portare a molte differenze nei report. Se vuoi andare oltre una singola interazione INP, ti consigliamo di utilizzare la più recente API Long Animations Frame.
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 informazioni dettagliate su come il TBT della tua pagina influisce sul punteggio di rendimento di Lighthouse, consulta In che modo Lighthouse determina il punteggio TBT.
Come migliorare TBT
In generale, consigliamo di eseguire l'ottimizzazione per INP rispetto a TBT, poiché consigliamo di utilizzare TBT è una metrica proxy per INP in laboratorio (dove solitamente l'INP non può essere misurato con precisione). Di conseguenza, per migliorare TBT, consulta le nostre indicazioni per l'ottimizzazione di INP.
Se ti stai occupando specificamente di TBT, puoi eseguire un controllo delle prestazioni di Lighthouse e prestare attenzione a eventuali opportunità specifiche suggerite dal controllo.
In generale, migliorare la TBT per un sito significa ridurre la quantità di script di blocco, il che significa ottimizzarli in modo che siano meno blocchi o ridurre la quantità di script complessivi. Fai riferimento alle seguenti guide sul rendimento: