TBT - Total Blocking Time

Définition

Le Total Blocking Time (TBT) mesure la somme de toutes les périodes entre le First Contentful Paint (FCP) et le Time to Interactive (TTI) où la tâche principale dépasse 50ms. Cette métrique quantifie la sévérité du blocage de la page pendant son chargement.

Calcul du TBT

Pour chaque tâche longue (> 50ms), le TBT additionne le temps excédentaire :

Tâche de 120ms → Contribution TBT = 120 - 50 = 70ms
Tâche de 90ms  → Contribution TBT = 90 - 50 = 40ms
Tâche de 40ms  → Contribution TBT = 0ms (< 50ms)

TBT Total = 70 + 40 + 0 = 110ms

Seuils de performance

Bon         : TBT < 200ms   ✅
À améliorer : 200-600ms     ⚠️
Mauvais     : TBT > 600ms   ❌

Causes principales d’un TBT élevé

1. JavaScript lourd

// ❌ Mauvais : Boucle bloquante
for (let i = 0; i < 1000000; i++) {
    complexCalculation(i);
}

// ✅ Bon : Découpage en chunks
function processInChunks(data) {
    let index = 0;
    function processChunk() {
        const chunkEnd = Math.min(index + 100, data.length);
        for (; index < chunkEnd; index++) {
            complexCalculation(data[index]);
        }
        if (index < data.length) {
            requestIdleCallback(processChunk);
        }
    }
    processChunk();
}

2. Parsing CSS volumineux

3. Manipulation DOM excessive

4. Third-party scripts

Optimisations recommandées

1. Code splitting : Charger uniquement le JS nécessaire
2. Defer/Async : Reporter l’exécution non critique
3. Web Workers : Déporter les calculs lourds
4. RequestIdleCallback : Exécuter pendant l’inactivité

Relation avec le FID

Le TBT est fortement corrélé au First Input Delay (FID) :

• TBT mesurable en lab (Lighthouse)
• FID mesurable uniquement en field
• TBT < 200ms = généralement FID < 100ms

Outils de mesure

• Lighthouse : Audit complet avec TBT
• WebPageTest : Timeline détaillée
• Chrome DevTools : Performance panel

Un TBT optimisé garantit une expérience utilisateur réactive et améliore significativement les Core Web Vitals.