Che cos'è 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 smette di monitorare il TBT dopo il tempo di interattività (TTI), così come alcuni altri strumenti di laboratorio che misurano il caricamento della pagina. Consulta Qual è la relazione tra TBT e TTI?.
Il thread principale è considerato "bloccato" ogni volta che è presente un'attività lunga, ovvero un'attività che viene eseguita sul thread principale per più di 50 millisecondi. Diciamo che 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 è la 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:
Pertanto, sebbene il tempo totale impiegato per l'esecuzione delle attività sul thread principale sia di 560 millisecondi, solo 345 millisecondi di questo tempo sono considerati tempo di blocco.
| Durata dell'attività (millisecondi) | Tempo di blocco dell'attività (millisecondi) | |
|---|---|---|
| Attività 1 | 250 | 200 |
| Attività 2 | 90 | 40 |
| Attività tre | 35 | 0 |
| Attività quattro | 30 | 0 |
| Attività 5 | 155 | 105 |
| Total Blocking Time | 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 più elevato 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 accade anche quando 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 audit del rendimento di Lighthouse sul tuo sito. Per informazioni dettagliate sull'utilizzo, consulta la documentazione di Lighthouse su TBT.
È possibile misurare il TBT sul campo, ma non lo consigliamo perché l'interazione degli utenti può influire sul TBT della tua pagina in modo da generare molte variazioni nei report. Se vuoi andare oltre una singola interazione INP, ti consigliamo di utilizzare la più recente API Long Animations Frame.
Strumenti di laboratorio
Che cos'è un buon punteggio TBT?
Per offrire una buona esperienza utente, i siti dovrebbero fare in modo che il tempo di blocco totale sia inferiore a 200 millisecondi quando viene eseguito il test su hardware mobile medio.
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 i TBT
In generale, consigliamo di eseguire l'ottimizzazione per l'INP anziché per il TBT, in quanto consigliamo di utilizzare il TBT come metrica proxy per l'INP in laboratorio (dove in genere l'INP non può essere misurato con precisione). Pertanto, per migliorare il TBT, consulta le nostre indicazioni per l'ottimizzazione di INP.
Se ti interessano specificamente i TBT, puoi eseguire un audit del rendimento di Lighthouse e prestare attenzione alle eventuali opportunità specifiche suggerite dall'audit.
In generale, il miglioramento del TBT per un sito comporta la riduzione del numero di script di blocco, il che significa ottimizzarli in modo che siano meno bloccanti o ridurre il numero di script in generale. Consulta le seguenti guide sul rendimento: