Total Blocking Time et First Input Delay
Le Total Blocking Time (TBT) n'est pas une mesure de Core Web Vital à proprement parler, mais il est important car nous pouvons le mesurer à l'aide d'outils tels que PageSpeed Insights ou Lighthouse, contrairement au First Input Delay (FID). Ce guide couvrira toutes les informations pertinentes à ce sujet.
Important !Le FID a été remplacé par la nouvelle métrique Core Web Vital, Interaction to Next Paint (INP), en mars 2024.
Comprendre le Total Blocking Time
Le Total Blocking Time (TBT) - littéralement le Temps de Blocage Total - n'est pas une mesure de Core Web Vital, mais il est important car nous pouvons le mesurer en utilisant des outils comme PageSpeed Insights ou Lighthouse, contrairement au First Input Delay (FID).
En améliorant le TBT, nous pouvons améliorer le First Input Delay, qui est la mesure actuelle du Core Web Vital.TBT measures the responsiveness of the page to the user input.
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.
Comment WP Rocket peut aider ?
L'exécution du JavaScript est le facteur le plus important qui affecte cette mesure. C'est donc en retardant et en différant autant que possible l'exécution de JavaScript que l'impact sera le plus important.
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 :
Réduire l'impact du code JavaScript
Vous pouvez utiliser les fonctionnalités suivantes de WP Rocket pour réduire cet impact :
- Chargement différé des fichiers JavaScript.
Il réduira le JS bloquant le rendu, et chargera le code nécessaire à la page ou à la réponse à la saisie de l'utilisateur. Cela s'applique au code provenant de votre site et au code de tiers. - Report de l’exécution Javascript.
Comme le JS est reporté jusqu'à l'interaction avec l'utilisateur, il améliorera le FID/TBT. Ceci s'applique au code provenant de votre site, et au code de tiers. - Préchargement des requêtes DNS.
Il 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é.
Réduisez le temps d'exécution de JavaScript
- Minifier les fichiers JavaScript et GZIP
En minifiant les JS et en les compressant automatiquement avec GZIP, vous accélérer l'exécution du JavaScript
Réduisez le travail du thread principal
- Minifier les fichiers CSSet Optimiser le chargement du CSS
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
Réduisez au maximum le nombre de requêtes et la taille des transferts
- Optimiser les Google Fonts
Pour les Google Fonts, nous optimisons déjà automatiquement les requêtes avec les paramètres display=swap et preconnect sur les ressources. - Précharger les polices
Pour les polices auto-hébergées, cela améliorera le temps de chargement en ajoutant une balise de préchargement dans la balise <head> ; du site. Cela vous permet de dire au navigateur de commencer à télécharger des polices qu'il ne découvrirait autrement que beaucoup plus tard.
Mesures complémentaires pour améliorer le TBT
La cause première d'un long TBT est le code (principalement JavaScript) qui a été 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 :