Guide

Il Total Blocking Time è la metrica con il peso maggiore nel punteggio di performance di Lighthouse, il 30 per cento, davanti a LCP e CLS al 25 ciascuno. Non è però un Core Web Vital, e tenere insieme questi due fatti è proprio il motivo per capirlo bene.

Quello che misura non è quanto ci mette la pagina a caricare. Misura per quanto tempo il browser è stato troppo occupato per risponderti.

Che cosa conta davvero il TBT

Durante il caricamento il browser esegue il tuo JavaScript sul thread principale, lo stesso che gestisce i clic e le pressioni dei tasti. Finché lì gira del lavoro, non può accadere nient'altro. Un'attività che occupa il thread principale per più di 50 millisecondi si chiama long task, ed è l'unità con cui il TBT è costruito.

Ecco la parte che sorprende. Il TBT non conta l'attività intera, ma solo la porzione oltre la soglia dei 50 ms. Un'attività di 70 ms contribuisce con 20 ms. Una di 45 ms non contribuisce affatto. Il TBT è la somma di quelle porzioni bloccanti per ogni long task compresa tra il First Contentful Paint e il momento in cui la pagina diventa interattiva.

La soglia dei 50 ms non è arbitraria. È all'incirca il punto in cui una persona si accorge che l'interfaccia non ha risposto subito, quindi la metrica conta il tempo in cui la pagina è stata visibilmente inerte, non il tempo che ha passato a lavorare.

Perché pesa il 30 per cento e non è comunque un Core Web Vital

Lighthouse classifica il TBT in tre fasce, misurate sul suo dispositivo mobile simulato: buono a 200 ms o meno, da migliorare tra 200 e 600 ms, scarso oltre i 600 ms. Quei numeri presuppongono un telefono di fascia media, deliberatamente più lento della macchina da cui stai provando.

• Buono - 200 ms o meno
• Da migliorare - tra 200 e 600 ms
• Scarso - oltre i 600 ms

Il TBT è una metrica di laboratorio. Viene misurata in un'esecuzione controllata, con un profilo di dispositivo fisso e senza utente reale, ed è esattamente per questo che non è un Core Web Vital: i Core Web Vitals sono metriche di campo raccolte da visite reali. Il suo corrispettivo di campo è l'Interaction to Next Paint, e i due sono legati senza essere la stessa cosa.

Il TBT guarda il thread principale bloccato durante il caricamento. L'INP guarda che cosa è successo davvero quando una persona ha interagito, in qualsiasi momento della visita. Una pagina può avere un TBT dignitoso e un INP scarso perché il lavoro costoso arriva dopo, all'apertura di un menu o all'applicazione di un filtro.

Che cosa lo peggiora

Le cause sono quasi sempre JavaScript, di solito in una di tre forme. Un bundle grande deve essere analizzato, compilato ed eseguito prima che possa girare qualsiasi altra cosa, e quel lavoro atterra sul thread principale tutto insieme.

L'hydration del framework è la seconda fonte comune. L'HTML reso lato server arriva in fretta, poi il framework percorre l'albero dei componenti per agganciare il comportamento, e su una pagina grande quel percorso è un'unica attività lunga proprio nel momento in cui l'utente è più propenso a provare a cliccare.

Gli script di terze parti sono la terza, e la meno controllata. Tag manager, analytics, widget di chat e banner di consenso eseguono ciascuno il proprio lavoro sul tuo thread principale, con tempi che non decidi tu, e il loro costo non compare quasi mai nel budget di bundle di nessuno.

Spezzare vale più che ridurre

L'istinto è ridurre la dimensione del bundle. Aiuta, ma non è la stessa leva, ed è la cosa più utile da sapere sul TBT. La metrica conta il tempo oltre i 50 ms per attività, quindi la stessa quantità di lavoro spezzata in molte attività brevi ottiene un punteggio molto migliore di una sola lunga, a parità esatta di byte.

Per questo conta restituire il controllo. Spezzare un ciclo pesante perché il browser possa servire l'input tra un pezzo e l'altro, spostare il calcolo in un Web Worker dove non tocca affatto il thread principale, e rimandare le terze parti finché la pagina non è utilizzabile riducono tutti il TBT senza togliere una sola riga di logica.

Laboratorio e campo non misurano la stessa cosa

Una riserva onesta prima di ottimizzare per il numero. Un'esecuzione di laboratorio usa un solo profilo di dispositivo e non clicca mai niente, quindi il TBT può sembrare buono mentre utenti reali su hardware più economico stanno ancora aspettando. Trattalo come una diagnosi che ti dice dove il thread principale è occupato, e guarda i dati di campo per sapere che cosa hanno vissuto davvero le persone.

Letti insieme, i due rispondono a domande diverse. Il TBT ti dice che la pagina è stata bloccata durante il caricamento, e all'incirca di quanto. L'INP ti dice se questo ha contato per qualcuno.