Comment améliorer le score de performance de Lighthouse pour les sites WordPress
Toutefois, l’amélioration du TBT améliore souvent également le fid, qui est un élément central du réseau. ️ il s’agit d’une autre composante importante de la note de rendement, pondérée à 30%. Un bon temps TBT doit être inférieur à 300 Ms. Les décalages cumulatifs de mise en page (CLS) mesurent la stabilité visuelle d’une page en quantifiant la fréquence à laquelle les utilisateurs peuvent rencontrer des changements inattendus de mise en page. ️ le poids de cet indicateur dans la note globale de rendement est de 15%. Un bon score CLS de 0,1 ou moins est proche de la meilleure expérience utilisateur. 2. Inspection de l’accessibilité Section « accessibilité » – Source: Lighthouse Report Accessibility score for Google Chrome Development Tools fait référence à la mesure dans laquelle votre site Web est disponible pour tous les utilisateurs et à la diversité des utilisateurs. Idéalement, votre site Web devrait être aussi efficace pour les personnes ayant une déficience visuelle, motrice, auditive ou Cognitive que pour celles qui ont eu la chance de se débarrasser de ces préoccupations. Vous devriez viser 100 points aussi près que possible de la perfection. L’amélioration la plus courante consiste à s’assurer que le texte est très contrasté pour être facile à lire. Vous ne pouvez naviguer efficacement sur votre site qu’à l’aide d’un clavier, et vos images devraient contenir des textes alternatifs pertinents pour ceux qui ne peuvent pas les voir.
L’idée ici est conforme aux principes du Guide d’accessibilité du contenu Web (WCAG) 2.0, qui énonce les diverses pratiques exemplaires que nous devrions tous examiner. 3. Validation des meilleures pratiques Section « pratiques exemplaires » – Source: rapport Lighthouse de Google Chrome Development Tools cette section effectue une série de vérifications sur votre site Web afin de trouver les meilleures pratiques pour fournir des composantes de développement Web qui offrent une expérience utilisateur exceptionnelle. Ce sont des fruits bas de gamme que vous devriez absolument préparer à l’avance
Lighthouse a également mesuré d’autres mesures: indice de vitesse (si) temps d’interaction (TTI) Temps total de blocage (TBT) peinture à contenu primo (FCP). La section diagnostic vous indique ce qui doit être amélioré. La Section du rapport de diagnostic de Rocket WP sur PageSpeed Insight – Source: PSI « Opportunities » vous donne quelques conseils sur la façon d’accélérer le chargement du site Web. Rapport diagnostique de WP Rocket sur PageSpeed Insight – Source: PSI check pass Section: il est toujours rassurant de voir le vert lors de l’exécution d’une vérification. Cette section vous dit essentiellement ce que vous avez fait de bien. WP Rocket a approuvé le rapport de vérification sur PageSpeed Insight – Source: PSI 4. Gtmetrix gtmetrix est un autre outil de performance populaire qui analyse le rendement d’un site et mesure les indicateurs de rendement des phares. Vous pouvez tester le site à partir de différents endroits. Par défaut, l’outil est testé à partir du Bureau. Il vous suffit d’inclure l’URL et de cliquer sur tester votre site. Une fois l’examen de la page d’accueil de gtmetrix terminé, vous recevrez une note de rendement et serez informé du rendement des principales clés Web: Gtmetrix grade en outre, l’outil fournit plusieurs onglets, en commençant par le résumé. Il est facile de voir combien de temps il faut pour charger la page et quels sont les principaux problèmes. Gtmetrix – onglet sommaire l’onglet rendement vous donne un aperçu complet des mesures du phare: Gtmetrix – onglet performance nous vous recommandons de parcourir également d’autres onglets: ils vous donneront un aperçu utile de la performance du site. Comment analyser les rapports sur le rendement de Lighthouse une fois qu’un rapport a été trouvé, l’étape suivante consiste à analyser les résultats et à déterminer comment améliorer le rendement du site. ️ assurez – vous de cliquer sur le bouton \
Métrique, avec э = bon) Exemple de bonne note – exemple d’indicateur de mauvaise note PSI avec ▲ = note négative, avec = besoin d’amélioration Mauvais exemple de score – Comment PSI optimise les scores de performance des phares sur WordPress il existe plusieurs façons d’optimiser les performances des phares sur le site WordPress. Jetons un coup d’oeil à quelques façons d’améliorer la métrique Lighthouse: configurer le cache de page, accélérer considérablement le temps de réponse du serveur, et aider à améliorer le rendu de contenu maximum (LCP). Cela fait partie intégrante de la solution de fusée WP. Optimiser le cache du Navigateur pour s’assurer que les politiques de maintenance des fichiers statiques dans le Navigateur sont correctes. WP Rocket vous aide à obtenir automatiquement un temps d’expiration optimal, éliminant complètement le stress. Vous retournerez au LCP. Optimisez les polices, les images et le Code pour vous assurer que vous ne chargez pas les fichiers CSS inutiles ou JavaScript inutilisés qui interfèrent avec votre contenu principal (et les scores LCP). Vous pouvez facilement effectuer ce type d’optimisation en utilisant l’onglet optimisation de fichier dans WP Rocket, ce qui aide à éliminer le rendu de blocage des ressources, à éviter les requêtes critiques de connexion, à minimiser les fichiers JS et CSS, à supprimer les CSS inutilisés et à retarder le chargement des images. Vous pouvez également utiliser des outils comme imaginy pour optimiser la taille des images sur les sites WordPress. Optimiser les rôles: par exemple, utiliser le précharge des rôles pour améliorer les performances de déplacement de la disposition cumulative (CLS). Si vous travaillez dans plus d’un pays, utilisez le réseau de distribution de contenu (rnc) afin que vous puissiez offrir une expérience exceptionnelle dans le monde entier. Notre service rocketcdn est parfait pour améliorer l
CP. Utilisez la compression au niveau du serveur pour réduire la taille des fichiers du site afin d’accélérer le chargement. WP Rocket active automatiquement la compression Gzip pour cela et traite les scores LCP. Assurez – vous que toutes les images et les Inserts sont dimensionnés, en particulier ceux qui sont ajoutés manuellement en utilisant le Code. WordPress ajoutera automatiquement toutes les images que vous avez téléchargées via l’éditeur, mais ne pourra pas capturer les images manuelles. Cette action vous aidera à améliorer votre CLS. N’injectez rien dynamiquement au – dessus du contenu existant à moins de répondre aux actions de l’utilisateur. Encore une fois, vous Réduirez le déplacement cumulatif de la disposition. Rafraîchir ou supprimer JavaScript ou CSS inutiles: Si vous essayez d’augmenter le temps d’interaction (TTI) et le temps total de blocage (TBT), vérifiez s’il y a JavaScript et CSS inutiles qui ralentissent le rendu de la page. Ce sont souvent les coupables. Si vous n’êtes pas satisfait des optimisations JavaScript et CSS, WP Rocket a la possibilité de gérer les deux situations et de vous aider à éliminer les blocs de rendu pour CSS et JS. Minimise le travail du thread principal ou réduit le temps d’exécution Javascript pour augmenter l’index de vitesse (si). Ce ne sont que quelques exemples de choses que vous pouvez faire pour optimiser votre score phare. Comme vous pouvez le voir, WP Rocket est un moyen très puissant de traiter 80% de ces problèmes immédiatement sans vous soucier de quoi que ce soit. Vous n’avez même pas besoin de cliquer sur paramètres. Il s’agit d’un outil plug – and – play qui fournit presque instantanément d’excellentes améliorations de performance. Si vous souhaitez améliorer votre score Lighthouse et donc l’expérience utilisateur du site WordPress, vous devriez essayer. Mais regardons la performance de WP Rocket dans la vraie vie. Je vais utiliser et analyser le site
Tirer parti de la puissance de la fusée WP pour obtenir des performances globales.
Mon score après l’activation de la fusée WP – PSI
|
Conseil: WP Rocket applique automatiquement 80% des meilleures pratiques de performance web immédiatement après l’activation.
Si vous voulez explorer ces paramètres, j’ai intégré quelques bonnes pratiques lors de la configuration de WP Rocket: n’activez pas toutes les options en même temps. Lentement, vérifiez – les un par un et lancez un nouveau test chaque fois que vous activez une nouvelle option. Lorsque vous effectuez un nouveau test, assurez – vous de le faire dans une fenêtre de navigateur anonyme et \/ ou de vous déconnecter du site WordPress:
Utilisez le mode de navigation anonyme pour lancer ma deuxième vérification de la façon d’utiliser WP Rocket pour améliorer les scores de performance du phare. Vous souvenez – vous des problèmes de performance énumérés dans le rapport du phare? Je vais vous montrer comment les manipuler avec WP Rocket. Question # 1: il manque une taille d’image dans la section diagnostic et j’ai trouvé le problème suivant: « les éléments d’image n’ont pas de largeur et de hauteur claires », ce qui signifie que je dois vérifier chaque élément (75!) Et ajouter une largeur et une hauteur spécifiques. WP Rocket solution – dans le tableau de bord, allez sur Media > taille de l’image et sélectionnez la boîte ajouter la taille de l’image manquante. WP Rocket ajoute des attributs de largeur et de hauteur à l’image.
Tableau de bord de la fusée WP ℹ Nous effectuons de nouvelles vérifications dans l’ISP (toujours en mode anonyme) afin de comparer les résultats. La bonne nouvelle, c’est qu’il n’y a plus \
El my Lighthouse – PSI Report problem 2 – minimize CSS WP Rocket solution – sur l’onglet optimisation des fichiers, WP Rocket offre la possibilité de minimiser les fichiers CSS comme suit:
CSS minimize – WP Rocket problem # 3 – Eliminating render Blocking Resource WP Rocket solution # 1 – WP Rocket fournit une fonctionnalité puissante pour gérer le blocage de rendu js: « Load Delay javascript». Il suffit de sélectionner cette option et le plug – in gère tout:
Chargement du JavaScript retardé – solution WP Rocket WP Rocket # 2: WP Rocket vous aide à gérer le blocage de rendu CSS en optimisant la livraison CSS.
Optimiser la livraison CSS – WP Rocket ℹ Nous effectuons de nouvelles vérifications dans l’ISP (toujours en mode anonyme) afin de comparer les résultats. La bonne nouvelle, c’est que ma section diagnostique ne contient plus de problèmes liés à CSS ou js:
Section diagnostique après l’optimisation des paramètres d’optimisation de fichier de WP Rocket – après l’activation de WP Rocket par PSI et la modification de certains paramètres dans le tableau de bord WordPress, ma note finale sur les performances mobiles est excellente:
Ma note orange lors de la première vérification sans Rocket WP – PSI
Installer WP Rocket – Mon nouveau score après PSI (vert)
Dans l’ensemble, je peux dire que les fusées WP m’ont aidé à améliorer la performance globale du phare.
|
Avant la fusée WP
Utilisation de fusées WP
Niveau global de performance
|
|
| Score LCP |
4,8 secondes
2.4s |
