Comment réduire le temps total de blocage (TBT) des sites WordPress

Vous voulez savoir quel est l’indicateur de temps total de blocage et comment il affecte la performance des sites WordPress? Tu es au bon endroit. Nous aimons tous des sites Web beaux, faciles à utiliser et rapides. Pour vous assurer que vous offrez une expérience utilisateur exceptionnelle, vous devriez vous concentrer sur les indicateurs suivants, dont TBT. Plus important encore, en tant qu’indicateur de l’expérience utilisateur, le temps de gel total représente 30% du rendement global du phare. Cela en fait l’indicateur principal de l’optimisation! Nous expliquerons en détail quel est le temps total de blocage, pourquoi il est pertinent, comment il est mesuré et quels facteurs influent sur sa note. Nous partagerons également des conseils sur la façon de corriger les scores de temps de blocage total négatifs (TBT supérieur à 300 MS) afin d’améliorer les scores de rendement global et de rendre vos visiteurs heureux.
Quel est le temps total de blocage (TBT) du phare? Le temps d’arrêt total est un indicateur de performance important pour mesurer la réactivité de la charge sur les sites WordPress. Lorsque la durée de l’activité dépasse 50 MS, il s’agit de la somme de toutes les périodes entre le premier rendu de contenu (FCP) et le temps d’interaction (TTI). Les fractions sont toujours exprimées en millisecondes. Il représente 30% du total des performances du phare. Lighthouse est un outil open source automatisé qui aide les développeurs à améliorer la qualité de leurs pages Web. L’outil tient compte de six paramètres pour générer votre score de performance final, y compris la clé Web de base, l’indice de vitesse, le temps total d’interaction et le temps total de blocage:

Métrique	Poids	Quelle est la bonne note? (vert)
Le premier tableau heureux	10%	0 – 2 secondes
Indice de vitesse	10%	0 – 4,3 secondes
Le plus grand Pigment heureux	10%	0 – 2,5 secondes
Temps d’interaction	10%	0 – 5 secondes
Temps total de verrouillage	10%	< 300 ms
Spo Alignement cumulatif de la disposition	10%	0 – 0,1

Si vous avez besoin d’aide pour examiner votre site Web, nous vous recommandons de suivre notre guide complet qui explique comment améliorer les notes de rendement des phares. Comment mesurer le temps total de blocage vous pouvez mesurer le score TBT en calculant le temps total pendant lequel la page a été empêchée de répondre aux actions de l’utilisateur. Le temps total est calculé en ajoutant le temps de congélation de toutes les tâches longues entre la première peinture de contenu (FCP) et le temps d’interaction (TTI).
Je m’expliquerai mieux. Chaque navigateur a un processus pour convertir le Code en page Web. L’ensemble du traitement du Code et du style doit être efficace, car nous voulons que nos pages soient affichées aux visiteurs dès que possible. (rappelez – vous, nous voulons vous impressionner et vous montrer à quelle vitesse notre site Web est rapide!) Avant de pouvoir rendre une page, le navigateur doit accomplir un certain nombre de tâches, telles que l’analyse des scripts HTML, la construction de la structure et du contenu d’une page Web (DOM), et l’exécution du code CSS et JS. Il y a beaucoup à faire, n’est – ce pas?
Pour éviter des temps de gel élevés, les navigateurs ne devraient pas rencontrer de fichiers JS et CSS pendant l’analyse de code et le rendu de page. Pour que votre site fonctionne rapidement, nous devons « dire » au navigateur ce que nous voulons prioriser et ce que nous devons charger en premier. Comprendre les tâches longues les tâches longues sont définies comme étant « bloquées » si elles durent plus de 50 Ms. Dans ce cas, votre page ne répond pas à l’entrée de l’utilisateur, comme un clic d’écran, un clavier, un clic de souris, etc. Le temps total de gel est calculé sur la base de ces longues tâches. Une activité prolongée monopolise gravement le navigateur Web (> 50 MS) et empêche l’exécution d’autres tâches de base, telles que la réaction aux opérations.
TBT. Si vous souhaitez corriger le temps total de blocage et augmenter la vitesse du site WordPress, nous vous recommandons huit optimisations de performance. Rafraîchir JS Delay JS preload DNS request minimize JS use Gzip compression minimize CSS file Optimization CSS Delivery reduces Server Response Time and time to reach the first byte (ttfb) 1. Retarder JS retarder JS signifie retarder le chargement de JS à un moment donné. Dans ce cas, le fichier JS est chargé après que le Navigateur affiche le contenu le plus pertinent. En retardant les fichiers Javascript, vous augmentez la charge de Javascript, ce qui est précieux pour améliorer les performances de votre site WordPress. La réduction du temps consacré à l’analyse, à la compilation et à l’exécution des fichiers JS peut également aider à améliorer le TBT. Problèmes de lumière dans la section diagnostic: résoudre les problèmes de suppression des ressources de blocage de rendu, de suppression du JavaScript inutilisé et d’évitement des demandes critiques de connexion. Solution manuelle: utilisez la propriété defer: Vous pouvez utiliser la propriété booléenne \
Ou il n’y a pas d’interaction utilisateur, comme appuyer sur l’écran, défiler ou cliquer sur un bouton.

Problème de projecteur dans la section diagnostic: résoudre la recommandation « éviter les demandes critiques en série ». Solution manuelle: la méthode pour créer manuellement un délai dans JS est d’utiliser la fonction settimeout (). Ceci appelle la fonction après le temps spécifié en millisecondes. Vous pouvez trouver un fragment de code très utile pour retarder n’importe quelle fonction JS, mais voici un exemple: supposons que vous vouliez obtenir le scénario suivant: « l’utilisateur clique sur le bouton → attendez 2 secondes → la page affichera « Comment allez – vous? »? ‘:

Essaie.

Miafunction () {Alert (‘Comment vas – tu?’;}

Utilisez le plugin wordpress: Flight script: plugin qui retarde JS et fournit plus de ressources pour les fichiers JS critiques. Il aide à établir les priorités. WP Meteor: un plug – in qui retarde les scripts JS peut grandement améliorer la vitesse perçue par les visiteurs (importante pour l’expérience utilisateur). Gonzales: vous permet de désactiver conditionnellement CSS, JS, et même les plug – ins en fonction des pages visitées. Nettoyage des biens (mentionné dans la section précédente). Plug – in de cache de Rocket WP: le moyen le plus pratique. Vous pouvez facilement retarder un fichier JS en un seul clic.

Retarder l’exécution javascript: tableau de bord WP Rocket 3. Le perfectionniste DNS a tenté de résoudre le nom de domaine avant de demander une ressource. Quand ça marche? Si vous avez un code tiers sur votre site, par exemple une vidéo hébergée sur Vimeo ou une police Google. Le préfixe DNS améliore légèrement votre site parce qu’il minimise le temps et les ressources chargés à partir d’autres sites. En d’autres termes, le préfixe DNS vous permet de vous connecter à des scripts tiers le plus tôt possible, de réduire les latences et d’obtenir des résultats plus efficaces. P
Je compresse le Code de sorte que les fichiers envoyés du serveur au navigateur du visiteur soient plus petits (et votre site Web est plus rapide!) Vous pouvez voir tous les HTML, css et JS compressés ensemble pour obtenir des fichiers plus petits, réduire le TBT et améliorer les performances. Problème de projecteur dans la section diagnostic: résoudre la recommandation activer la compression de texte. Utilisation du plug – in WordPress: activer le plug – in de compression Gzip vous permet d’activer et de désactiver la compression Gzip sur les sites WordPress. WP Rocket active automatiquement la compression Gzip. Vous pouvez en savoir plus sur la compression Gzip dans notre documentation. Réduire au minimum les fichiers CSS cela réduit la taille des fichiers en supprimant les commentaires, le Code redondant et l’espace blanc. L’objectif est de réduire au minimum le temps nécessaire à l’exécution de la page. Cela réduira la charge CSS et le temps d’analyse global. Problème de projecteur dans la section diagnostic: résoudre les recommandations « minimiser le fonctionnement du fil central » et « minimiser le CSS ». Solution manuelle (voir la section JS ci – dessus pour plus de détails): sauvegardez le site ou ne modifiez pas les fichiers CSS directement sur le serveur de production. Utilisez un éditeur de texte comme sublize Text ou Visual Studio Code. Utilisez l’outil Web: Allez à minifycode. Com et cliquez sur l’onglet réducteur CSS. Collez le code CSS dans la zone d’entrée et cliquez sur le bouton minimiser CSS. Outils CSS minimizer – Source: CSS minimizer utilise le plug – in WordPress: auto – Optimisation WP super minify CSS Nano plug – in WP Rocket cache pour vous aider à minimiser CSS en un seul clic: Fichier CSS iconique: tableau de bord WP Rocket 7. Optimiser la livraison CSS minimiser le thread principal permet aux navigateurs de gérer les tâches supplémentaires nécessaires pour exécuter efficacement nos pages
Activation de la fusée WP

J’ai marqué pour les rockets du WP.

Points de phare avant la fusée WP: 51 \/ 100 Orange: TBT = 480 ms, TTI = 7,0 s rouge: indice de vitesse = 6,0 s, LCP = 7,1 s points de phare après l’utilisation de la fusée WP: 95 \/ 100 Orange: seul le LCP a besoin d’être réparé, mais nous pouvons constater qu’il s’est considérablement amélioré. Vert: indice de vitesse, FCP, TTI, CLS et… TBT! Lorsque j’ai effectué ma première vérification sans utiliser le plug – in WP Rocket cache, les sections sur les avis et les possibilités n’étaient pas très bonnes. Les problèmes rencontrés par Lighthouse ont eu une incidence sur mes scores TBT et global performance. Comme nous l’avons mentionné ci – dessus, les scores TBT sont principalement influencés par des questions telles que le brouillage et les JS inutilisés, les temps d’exécution élevés des JS, la charge de travail élevée sur le fil principal et le Code de tiers qui prend toutes les ressources. Selon la vérification, mon site n’est pas en très bon état et de nombreux problèmes de filetage js \/ Master ont été détectés:

Optimisation des fichiers js: tableau de bord WP Rocket 2. Optimisation des fichiers CSS

Optimisation des fichiers CSS: tableau de bord WP Rocket 3. J’ai ajouté plusieurs URL pour le préchargement et mes scores ont encore augmenté:

Problèmes détectés par Lighthouse et les zones d’amélioration (Extract) – après que PSI a activé la fonction WP Rocket pour activer WP Rocket, je vais à la section paramètres du site WordPress pour m’assurer que les options suivantes sont activées: 1. Optimisation des fichiers JS (latence et latence)

Options de précharge WP Rocket 4. Lighthouse a également rencontré des problèmes de performance avec les polices et les icônes utilisées sur le site. Correction du problème à l’aide de l’onglet caractères préchargés de WP Rocket: Étendre la section demandes de clés préchargées dans PSI pour obtenir l’identité
Les utilisateurs représentent 30% du rendement du phare. Un site lent peut chasser les visiteurs et les clients potentiels, détruire l’expérience utilisateur (ux) de votre site, et même affecter votre référencement. La façon la plus simple et la plus pratique d’obtenir des notes élevées pour TBT est d’installer WP Rocket, qui applique 80% des meilleures pratiques de performance web immédiatement après l’activation. Vous pouvez toujours compter sur notre garantie de remboursement à 100%. Bien que nous pensions que vous ne voudriez jamais, nous serions heureux d’offrir un remboursement si vous en faites la demande dans les 14 jours suivant l’achat. Le seul risque que vous courez avec notre plugin est d’accélérer votre site!