Qu'est-ce que le Total Blocking Time (TBT) ? Comment l'améliorer ?

Comprendre le Total Blocking Time (TBT)

Le Total Blocking Time (TBT) est une métrique de performance web qui mesure le temps total durant lequel une page web est bloquée et n'est donc pas réactive aux interactions de l'utilisateur. Plus précisément, le TBT quantifie le temps pendant lequel le thread principal du navigateur est occupé par des tâches longues (supérieures à 50 millisecondes) entre le First Contentful Paint (FCP) et le Time to Interactive (TTI). Cette période critique détermine la rapidité avec laquelle votre site répond aux actions des visiteurs, influençant directement l'expérience sur différents navigateurs comme Google Chrome, Firefox ou Safari.

Le rôle du TBT dans les performances web

Un TBT élevé indique que votre site web met du temps à réagir aux interactions des utilisateurs, ce qui peut provoquer frustration et abandon. Si une page ne répond pas rapidement, les visiteurs peuvent penser que le site est lent ou ne fonctionne pas correctement, particulièrement sur les appareils mobiles où les attentes de rapidité d'affichage sont élevées. Le TBT influence donc directement la réactivité de votre site et, par conséquent, la satisfaction de vos utilisateurs. Un site responsive avec un chargement fluide garantit une meilleure interactivité et favorise l'engagement.

Comparaison avec d'autres métriques

Il existe plusieurs métriques pour évaluer les performances web, telles que le First Contentful Paint (FCP), le Time to Interactive (TTI) et le First Input Delay (FID).

• First Contentful Paint (FCP) : mesure le temps nécessaire pour que le premier contenu (texte, image, canvas) apparaisse à l'écran, crucial pour la perception initiale de vitesse du site.
• Time to Interactive (TTI) : indique le moment où la page est entièrement interactive et réactive aux interactions de l'utilisateur, essentiel pour l'expérience globale.
• First Input Delay (FID) : mesure le délai entre la première interaction de l'utilisateur (clic, défilement) et le moment où le navigateur répond à cette action, directement lié au temps de réponse perçu.

Le TBT se distingue en ce qu'il évalue le temps total de blocage entre le FCP et le TTI. Alors que le FID est mesuré sur le terrain avec les données réelles des utilisateurs (field data), le TBT est généralement mesuré en laboratoire via des outils comme Page Speed Insights et permet d'identifier les problèmes potentiels de réactivité avant le déploiement du site.

Comment mesurer le TBT de votre site web

Pour évaluer le Total Blocking Time de mon site, plusieurs outils de mesure sont à votre disposition :

• Lighthouse : intégré dans les Chrome DevTools, Lighthouse est un outil d'audit de performance qui analyse les performances de votre site et fournit des recommandations d'amélioration pour le desktop et le mobile.
• Chrome DevTools : directement accessible dans le navigateur Chrome, cet ensemble d'outils permet aux développeurs d'inspecter et de diagnostiquer les performances de votre site en temps réel, y compris l'analyse des requêtes et du comportement CPU.
• WebPageTest : un outil en ligne gratuit qui offre des analyses détaillées des performances de vos pages, y compris le TBT, avec la possibilité de tester depuis différentes localisations et sous différentes conditions réseau.
• GTmetrix et PageSpeed Insights : d'autres solutions populaires pour mesurer et comparer les performances des sites web, offrant des analyses complètes et des suggestions d'optimisation pour chaque URL.

Mesure en laboratoire vs sur le terrain

La mesure du TBT se fait généralement en laboratoire, c'est-à-dire dans un environnement contrôlé simulant le comportement d'un utilisateur type. Cela permet d'identifier les problèmes de performances avant que les utilisateurs réels ne soient impactés. Les tests peuvent être effectués sur différentes configurations (desktop, mobile) et différents navigateurs. En revanche, les données sur le terrain (ou "field data") proviennent des interactions réelles des utilisateurs avec votre site, souvent collectées via Google Analytics ou Chrome User Experience Report. Bien que le TBT soit principalement mesuré en laboratoire, il est important de considérer les données du terrain pour avoir une vision complète des performances, notamment avec des métriques comme le First Input Delay (FID).

Interprétation des résultats

Après avoir effectué les tests, il est essentiel de savoir interpréter les données pour identifier les axes d'amélioration. Un TBT élevé vous indique que le thread principal du navigateur est bloqué par des tâches longues. En analysant le rapport, vous pouvez repérer quelles ressources ou scripts causent ces blocages et comprendre l'impact de chaque élément sur le temps de chargement des pages. L'analyse doit prendre en compte le temps de réponse du serveur web, les délais de résolution DNS, et l'impact des extensions ou plugins. Cela vous permettra de cibler précisément les optimisations à mettre en place pour réduire le TBT et améliorer la réactivité de votre site.

Techniques pour améliorer le Total Blocking Time (TBT)

Pour améliorer les performances de votre site, il est crucial d'optimiser le JavaScript. Voici les approches clés :

1. Minification et compression
   Réduisez la taille des fichiers en supprimant les espaces, commentaires, et en raccourcissant les noms de variables (minification). Appliquez ensuite des outils comme Gzip ou Brotli pour une compression supplémentaire, accélérant ainsi le chargement des scripts. La compression gzip peut réduire jusqu'à 70% la taille des fichiers texte.
2. Suppression du code inutilisé
   Identifiez et éliminez les parties de code obsolètes ou inutilisées grâce à l'analyse de couverture dans Chrome DevTools. Cela allège les fichiers et diminue le temps de chargement. Pour les sites WordPress, utilisez des plugins comme WP Rocket pour automatiser ce processus.
3. Division des tâches longues
   Scindez les fonctions longues en petites tâches. Cela permet au navigateur d'intercaler d'autres opérations, évitant les blocages du thread principal et améliorant la réactivité globale. Utilisez des techniques comme le time slicing ou les Web Workers pour les calculs intensifs.

Réduction de l'impact du code tiers

Pour optimiser le Total Blocking Time (TBT) de votre site, il est essentiel de gérer efficacement les scripts tiers et leur chargement. Voici quelques stratégies recommandées :

• Identifier et supprimer les scripts tiers non essentiels : Inventoriez les scripts tiers intégrés à votre site. Si certains ne sont pas indispensables, désactivez-les pour améliorer les performances. Utilisez des outils de monitoring pour mesurer l'impact de chaque script sur le TBT.
• Mettre en place le chargement différé (lazy loading) pour les ressources non critiques : Implémentez le chargement différé pour retarder le chargement des ressources jusqu'à ce qu'elles soient nécessaires. Cette technique est particulièrement efficace pour les images (JPEG, SVG), vidéos et widgets tiers, réduisant ainsi le TBT initial et améliorant la vitesse d'affichage. Web.dev
• Utiliser les attributs async et defer pour charger les scripts de manière asynchrone : Ajoutez les attributs async ou defer à vos balises script pour indiquer au navigateur qu'il peut charger les scripts sans bloquer l'analyse du HTML. Cette approche de chargement asynchrone accélère le chargement de la page et améliore le TBT. Fasterize

En appliquant ces pratiques, vous contribuerez à améliorer la vitesse et les performances globales de votre site web.

Optimisation du chargement des ressources

Précharger et préconnecter les ressources essentielles pour accélérer le rendu : Le préchargement indique au navigateur quelles ressources sont prioritaires, tandis que la préconnexion établit des connexions anticipées aux serveurs externes. Ces techniques accélèrent le chargement des ressources critiques, particulièrement efficaces pour les polices web et les ressources statiques servies depuis un CDN.

Optimiser les polices web, les images et autres médias pour réduire le poids des pages : Les polices personnalisées, images et vidéos peuvent augmenter considérablement le temps de chargement. Utilisez des formats optimisés comme WebP ou SVG, compresser vos images, et considérez le chargement différé pour les médias non essentiels. Implémentez une stratégie de mise en cache efficace pour les ressources statiques et utilisez un CDN pour distribuer vos contenus plus rapidement.

Pour approfondir vos connaissances sur l'optimization du JavaScript tiers, vous pouvez consulter ce cours interactif proposé par Google ou ouvrir un nouvel onglet (tab) pour explorer les bonnes pratiques de web performance.