Qu'est-ce que le #TBT ?
La métrique "Durée de blocage totale" mesure la durée totale après le First Contentful Paint (FCP), où le thread principal a été bloqué suffisamment longtemps pour empêcher la réactivité aux entrées.
Par défaut, Lighthouse cesse de surveiller le TBT après le délai avant interactivité (TTI), comme le font d'autres outils de laboratoire qui mesurent le chargement de la page. Consultez Quel est le rapport entre le TBT et le TTI ?
Le thread principal est considéré comme "bloqué" chaque fois qu'une tâche longue s'exécute sur le thread principal pendant plus de 50 millisecondes. On dit que le thread principal est "bloqué", car le navigateur ne peut pas interrompre une tâche en cours. Par conséquent, si un utilisateur interagit avec la page au milieu d'une tâche longue, le navigateur doit attendre la fin de la tâche avant de pouvoir répondre.
Si la tâche est suffisamment longue (plus de 50 millisecondes), il est probable que l'utilisateur remarque le délai et perçoive la page comme lente ou défectueuse.
Le temps de blocage d'une tâche longue donnée est sa durée supérieure à 50 millisecondes. Le temps de blocage total d'une page correspond à la somme du temps de blocage de chaque tâche longue qui se produit après le FCP pour la période mesurée (généralement le TTI pour les outils de chargement de page ou la durée de trace totale pour les autres outils).
Prenons l'exemple du diagramme suivant du thread principal du navigateur lors du chargement de la page:
La chronologie représentée dans l'image précédente comporte cinq tâches, dont trois sont des tâches longues, car leur durée dépasse 50 millisecondes. Le diagramme suivant montre le temps de blocage pour chacune des tâches longues:
Ainsi, bien que le temps total passé à exécuter des tâches sur le thread principal soit de 560 millisecondes, seuls 345 millisecondes de ce temps sont considérés comme du temps de blocage.
| Durée de la tâche (millisecondes) | Temps de blocage de la tâche (millisecondes) | |
|---|---|---|
| Première tâche | 250 | 200 |
| Tâche 2 | 90 | 40 |
| Tâche 3 | 35 | 0 |
| Tâche 4 | 30 | 0 |
| Tâche 5 | 155 | 105 |
| Durée totale de blocage | 345 millisecondes | |
Quel est le lien entre le TBT et l'INP ?
Le TBT est antérieur à l'INP et est utile comme indicateur des problèmes d'INP, en particulier dans l'environnement de laboratoire où la mesure de l'INP est plus difficile. Toutefois, la fonctionnalité peut signaler des problèmes potentiels alors qu'il n'y en a peut-être pas pour les utilisateurs s'ils n'interagissent pas à ce moment-là. Il peut également passer à côté des problèmes causés par les interactions lorsqu'ils sont mesurés dans l'environnement de test. Nous vous recommandons de mesurer l'INP sur le terrain pour évaluer les problèmes de réactivité réels ressentis par les utilisateurs. Le TBT peut être une métrique proxy raisonnable pour l'INP dans le cadre d'un laboratoire, mais il ne remplace pas l'INP en soi.
Quel est le rapport entre le TBT et le TTI ?
Le TBT est mesuré sur une période donnée. Pour certains outils d'analyse qui mesurent traditionnellement le chargement des pages, y compris Lighthouse, le TBT a été mesuré jusqu'au TTI, car il permet de quantifier le degré de non-interactivité d'une page avant qu'elle ne devienne réellement interactive. Toutefois, le TBT peut également continuer à être mesuré après le chargement de la page et donc au-delà du TTI, par exemple en mode "Période" de Lighthouse.
Le TTI considère qu'une page est "interactive de manière fiable" si le thread principal n'a pas été occupé par des tâches longues pendant au moins cinq secondes. Cela signifie que trois tâches de 51 ms réparties sur 10 secondes peuvent repousser le TTI aussi loin qu'une seule tâche de 10 secondes. Toutefois, ces deux scénarios seront très différents pour un utilisateur qui tente d'interagir avec la page.
Dans le premier cas, trois tâches de 51 ms auraient un TBT de 3 millisecondes. Alors qu'une seule tâche de 10 secondes aurait un TBT de 9 950 millisecondes. La valeur TBT plus élevée dans le second cas quantifie la pire expérience.
Cet exemple montre pourquoi le TBT est souvent une meilleure métrique que le TTI, car il est moins sujet aux valeurs aberrantes. C'est même le cas lorsque le TTI est utilisé comme point de terminaison pour le TBT.
Mesurer le TBT
Le TBT est une métrique qui doit être mesurée en laboratoire. Le meilleur moyen de mesurer le TBT est d'effectuer un audit des performances Lighthouse sur votre site. Pour en savoir plus, consultez la documentation Lighthouse sur le TBT.
Il est possible de mesurer le TBT sur le terrain, mais nous vous déconseillons de le faire, car l'interaction des utilisateurs peut affecter le TBT de votre page de manière à entraîner de nombreuses variations dans vos rapports. Nous vous conseillons plutôt d'utiliser la nouvelle API Long Animations Frame dans le champ si vous souhaitez aller au-delà d'une seule interaction INP.
Outils de l'atelier
Quel est un bon score TBT ?
Pour offrir une expérience utilisateur de qualité, les sites doivent s'efforcer de ne pas dépasser un temps de blocage total de 200 millisecondes lors de tests sur un matériel mobile moyen.
Pour en savoir plus sur l'impact du TBT de votre page sur votre score de performances Lighthouse, consultez Comment Lighthouse détermine votre score de TBT.
Améliorer le TBT
En règle générale, nous vous recommandons d'optimiser pour l'INP plutôt que pour le TBT, car le TBT est une métrique proxy de l'INP en laboratoire (où l'INP ne peut généralement pas être mesuré avec précision). Par conséquent, pour améliorer le TBT, consultez nos conseils sur l'optimisation de l'INP.
Si vous vous intéressez spécifiquement aux TTB, vous pouvez effectuer un audit des performances Lighthouse et prêter attention aux opportunités spécifiques suggérées par l'audit.
En général, pour améliorer le TBT d'un site, vous devez réduire le nombre de scripts bloquants. Pour ce faire, vous pouvez les optimiser pour qu'ils soient moins bloquants ou réduire leur nombre global. Consultez les guides de performances suivants: