Total Blocking Time et Interaction to Next Paint
Le Total Blocking Time (TBT) n'est pas une mesure de Core Web Vital à proprement parler, mais il est important car il peut impacter l'Interaction to Next Paint (INP). Ce guide couvrira toutes les informations pertinentes à ce sujet.
Comprendre le Total Blocking Time
En améliorant le Total Blocking Time - temps de blocage total (TBT), nous pouvons améliorer l'Interaction to Next Paint (INP), qui est la métrique Core Web Vital réelle. Le TBT mesure la réactivité de la page aux actions de l'utilisateur.
Le navigateur utilise ce que l'on appelle le main-thread ou thread principal pour afficher une page web. Ce thread regroupe toutes les tâches nécessaires : lire le HTML, exécuter les CSS et JavaScript, etc...
Lorsque l'une de ces tâches dure plus de 50 ms, considérée alors comme une "tâche longue", le thread principal est alors considéré comme "bloqué" car le navigateur ne peut pas interrompre la tâche en cours pour se consacrer à une autre. Le temps écoulé après 50 ms constitue alors la partie bloquée.
Le Total Blocking Time (TBT) est la somme de tous les temps de blocage pour chaque tâche longue.
Si le thread principal est bloqué pendant trop longtemps, les utilisateurs auront l'impression que la page est lente ou qu'elle ne répond pas à leurs commandes.
Lorsque vous analysez votre site à l'aide de PageSpeed Insights ou de Lighthouse, trouvez dans les résultats du test la section Diagnostics, et cliquez sur l'onglet Évitez les tâches longues dans le thread principal
Vous obtiendrez ainsi une liste des tâches les plus longues sur le thread principal, que vous pourrez essayer d’optimiser :
Comment WP Rocket peut aider ?
Vous pouvez utiliser les fonctionnalités suivantes de WP Rocket pour réduire cet impact :
- Chargement différé des fichiers JavaScript. et Reporter l’exécution Javascript : Ces options réduiront le JavaScript bloquant le rendu et chargeront le code nécessaire à la page ou à la réponse aux entrées de l'utilisateur. Cela s'applique au code provenant de votre site et au code tiers.
-
Préconnexion aux domaines externes : cela peut contribuer à réduire l'impact du code JS tiers en résolvant le DNS d'un domaine spécifique avant même qu'il n'ait été explicitement appelé
- Minifier les fichiers JavaScript et la compression GZIP : En minifiant les JS et en les compressant automatiquement avec GZIP, vous accélérer l'exécution du JavaScript
- Minifier les fichiers CSS et Supprimer les ressources CSS inutilisées : Ces options réduiront au minimum le travail sur le fil principal et, avec l'aide de GZIP, réduiront le transfert avec des fichiers de taille plus petite
- Rendu différé automatique : Avec cette fonctionnalité automatique, le travail du thread principal sera réduit, car les éléments en dessous de la ligne de flottaison ne seront rendus que si l'utilisateur fait défiler la page et a vraiment besoin de les voir.
Mesures complémentaires pour améliorer le TBT
La cause première d'un long TBT est le code (principalement JavaScript) ajouté à votre site via votre thème et vos plugins.
Il est donc essentiel de comprendre que si WP Rocket peut contribuer à atténuer l'impact de ce code, il ne peut pas tout régler.
L'idéal serait donc d'essayer de supprimer autant de JavaScript que possible de votre site. Vous pouvez le faire en utilisant des plugins tels que :