WordPress est le système de gestion de contenu (CMS) le plus populaire au monde, grâce à sa simplicité d'utilisation et à sa flexibilité. Ses nombreuses options de personnalisation permettent aux éditeurs de créer des sites web qui trouvent un écho profond auprès de leur public.
Malgré la puissance des fonctionnalités du CMS, il est toujours possible de créer des sites à l'esthétique soignée qui peinent à développer leur audience. Si un audit de contenu est fortement conseillé, les éditeurs devraient d'abord envisager un audit technique afin de s'assurer qu'aucun élément en arrière-plan ne limite leur visibilité.
Parmi les indicateurs de performance qu'ils devraient mesurer, les principaux sont les Google Core Web Vitals (CWV).
Ces indicateurs, que Google a convertis en signaux de classement peu après leur introduction en 2020 , jouent un rôle clé dans la mesure de l'expérience utilisateur (UX) d'une page Web.
Les CWV englobent trois indicateurs distincts mais liés :
- La plus grande peinture à contenu (LCP)
- Délai de première entrée (FID)
- Décalage cumulatif de la mise en page (CLS)
Ces signaux mesurent respectivement la vitesse de chargement perçue, l'interactivité et la stabilité visuelle d'une page web.
Examinons de plus près ces CWV pour comprendre pourquoi ils sont si importants, comment les mesurer avec précision et ensuite évaluer les mesures concrètes que nous pouvons prendre pour améliorer leurs scores.
Que sont les indicateurs clés de performance web ?
Les trois Core Web Vitals (CWV) de Google évaluent la qualité de l'expérience utilisateur (UX) d'un site Web, fournissant des informations sur les performances des pages Web en termes de vitesse de chargement, d'interactivité et de stabilité visuelle.
- Largest Contentful Paint (LCP) : cet indicateur mesure la vitesse de chargement d'un site et correspond précisément au moment où le contenu principal est susceptible d'être affiché.
Prenons l'exemple d'un article de blog sur un nouveau gadget technologique. Si l'image principale (une photo du gadget, par exemple) et le texte d'introduction se chargent rapidement (Google recommande un temps de chargement inférieur à 2,5 secondes pour le LCP), les visiteurs seront plus enclins à rester, lire et interagir avec le contenu.
À l'inverse, un temps de chargement trop long peut inciter les visiteurs à quitter la page, ce qui peut entraîner une baisse de trafic.
- Délai de première interaction (FID) : ce paramètre représente un instantané de la réactivité d'une page web lors de la première interaction de l'utilisateur, comme un clic sur un lien ou un bouton. Il mesure le temps écoulé entre cette action et le moment où le navigateur peut commencer à traiter les gestionnaires d'événements en réponse.
Prenons l'exemple d'un bouton « S'abonner maintenant ». Si un visiteur clique sur ce bouton et constate un délai avant que le site ne réponde (un délai supérieur à 100 millisecondes est considéré comme un résultat médiocre), il pourrait penser que le site ne répond pas, ce qui dégraderait son expérience utilisateur et pourrait entraîner la perte de son abonnement.
Google prévoit d'introduire en mars 2024 qui remplacera le FID en tant que CWV (Continuous Workness Value).
- Décalage cumulatif de mise en page (CLS) : cet indicateur quantifie la stabilité visuelle, c’est-à-dire l’ampleur des décalages inattendus de la mise en page du contenu visible sur une page web.
Si un site d’actualités contient du texte, des images ou des publicités dont la mise en page se décale soudainement pendant le chargement complet de la page, les visiteurs risquent de perdre leur chemin ou de cliquer accidentellement sur un lien ou un bouton indésirable. Cette expérience frustrante peut les dissuader de revenir sur le site.
Source : Web.dev - Interaction to Next Paint (INP) : cet indicateur évalue la réactivité globale d'une page aux interactions de l'utilisateur. Il mesure la latence de toutes les interactions souris et clavier lors de la visite d'une page web, l'interaction la plus longue observée (en excluant les valeurs aberrantes) constituant la valeur INP finale.
Obtenir un score INP idéal peut s'avérer complexe en raison de la grande variabilité des performances des appareils. Toutefois, il reste raisonnable pour les éditeurs de viser un score INP se situant dans le 75e percentile des temps de chargement de page, segmentés entre appareils mobiles et ordinateurs.
Un site web avec un INP inférieur ou égal à 200 millisecondes est considéré comme ayant une bonne réactivité. Si l'INP se situe entre 200 et 500 millisecondes, la réactivité du site nécessite des améliorations. Enfin, si l'INP est supérieur à 500 millisecondes, sa réactivité est considérée comme médiocre.
Source : Web.dev
Pourquoi le score Core Web Vitals est-il important ?
Les utilisateurs exigent des vitesses de chargement rapides, une interactivité fluide et un environnement visuellement stable ; une évaluation des Core Web Vitals est donc essentielle pour aider les éditeurs à comprendre comment leurs sites web répondent à ces exigences.
Google a constaté que le taux de rebond augmentait de 32 % lorsque le temps de chargement des pages passait de 1 à 3 secondes. Parallèlement, les sites d'actualités ayant réussi le test CWV ont enregistré un taux d'abandon inférieur de 22 % à celui des sites ayant échoué.
1. Influencer les résultats de recherche
Les CWV (Customer Weak Values) servent de référence à Google pour mesurer les performances d'un site web. Elles lui fournissent des informations sur la qualité de l'expérience utilisateur, ce qui influe directement sur le positionnement du site dans les résultats de recherche.
En termes simples, un meilleur score CWV peut aider un site web WordPress à apparaître plus haut dans les résultats de recherche Google.
2. Augmenter le trafic
Les sites dont le temps de chargement est optimisé peuvent constater une augmentation de leur trafic. Par exemple, le site d'orientation professionnelle LearnHowToBecome.org a réduit son temps de chargement moyen de 7 à 2,9 secondes et a vu son trafic mensuel passer de 500 000 à 750 000 visiteurs.
3. Augmenter les revenus
Un utilisateur est moins susceptible de lire un article s'il constate un temps de chargement long (LCP), une réponse tardive à son interaction (FID) ou une mise en page instable (CLS). Les sites web qui excellent sur ces trois points captent non seulement l'attention de l'utilisateur, mais le guident également tout au long du parcours de conversion, générant ainsi davantage de revenus pour l'entreprise.
En résumé, les indicateurs CWV ne se limitent pas à de simples chiffres. Ils offrent une vision précise des performances d'un site du point de vue de l'utilisateur, permettant ainsi à la marque d'améliorer les aspects les plus importants pour ses visiteurs.
Comment vérifier les scores des indicateurs Web Vitals d'un site WordPress
Comprendre comment analyser le score CWV est la première étape pour améliorer les performances d'un site web. Il existe deux façons de mesurer ce score : soit en interne avec les outils Google, soit avec l'aide d'un spécialiste WordPress expérimenté en optimisation des indicateurs de performance.
Pour ceux qui ont choisi la voie interne, il est important de comprendre que la mesure des CWV nécessite l'utilisation d'un mélange de données de terrain et de données de laboratoire.
Les données de terrain sont des données réelles d'expérience utilisateur, collectées dans des environnements réels. Ce type de données permet de mieux comprendre comment les utilisateurs interagissent avec un site web sur différents appareils, avec diverses connexions et dans d'autres conditions réelles.
Par exemple, si les utilisateurs accèdent principalement à un site WordPress sur des appareils mobiles connectés à des réseaux 3G, les données de terrain peuvent révéler des problèmes de performance qui n'apparaîtraient pas dans un environnement de laboratoire contrôlé.
En revanche, les données de laboratoire sont générées dans un environnement contrôlé et servent à résoudre les problèmes de performance. Elles ne reflètent pas l'ensemble des expériences utilisateur réelles, mais fournissent des résultats reproductibles pour le débogage et l'optimisation des performances d'un site web.
L'utilisation d'un outil tel que Lighthouse dans un environnement de développement permet de simuler un réseau lent afin d'identifier les goulots d'étranglement en termes de performances.
Tous les outils de développement populaires de Google, de Google Search Console (GSC) à Google Analytics (GA), peuvent mesurer les scores CWV.
Source : Web.dev
Aujourd'hui, nous allons toutefois nous intéresser à PageSpeed Insights , tout simplement parce qu'il s'agit de l'un des outils les plus simples et les plus complets pour débuter.
Comment découvrir et améliorer le FID et le TBT avec PageSpeed Insights
Jusqu'à présent, nous avons parlé du First Input Delay (FID) comme moyen de mesurer la réactivité d'un site, mais dans la section suivante, nous allons examiner à la fois le FID et le Total Blocking Time (TBT).
Ces deux indicateurs mesurent les interactions des utilisateurs, et leur mesure et leur optimisation peuvent avoir des retombées positives sur l'expérience utilisateur d'un site.
1. Qu'est-ce que le TBT et en quoi diffère-t-il du FID ?
Le TBT indique la durée pendant laquelle un site web est trop occupé pour répondre aux interactions des utilisateurs, comme les clics sur des boutons. Le TBT mesure la durée totale pendant laquelle une page web est « bloquée », ce qui revient à dire : « Veuillez patienter, je suis occupé » pendant qu’elle traite d’autres tâches.
Le TBT est une mesure de laboratoire utilisée pour l'évaluation des performances pendant la phase de développement, tandis que le FID est une mesure de terrain qui fournit des informations sur les expériences réelles des utilisateurs.
Dans le cas où un utilisateur clique sur un bouton d'une page web, le FID mesure le délai entre l'action de cet utilisateur et la réponse du site web.
Ces deux indicateurs sont interdépendants : si un éditeur parvient à optimiser le TBT pendant les tests, il est probable qu'il observe un impact positif sur les scores FID dans des conditions réelles.
2. Comment mesurer le FID et le TBT avec PageSpeed Insights
Pour mesurer ces indicateurs avec PageSpeed Insights, suivez ces étapes :
- Accédez à l' outil PageSpeed Insights
- Analysez la page web souhaitée
- Défilez pour trouver les scores FID et TBT du site
3. Comment améliorer le FID et le TBT d'un site WordPress
Améliorer le FID et le TBT implique d'optimiser la réactivité et l'interactivité d'un site. Voici quelques conseils :
- Compressez et optimisez le code CSS et JavaScript : cela permet de réduire la taille des fichiers et d’améliorer la réactivité du site. De nombreux outils, comme WPRocket, proposent un onglet d’optimisation des fichiers permettant de compresser le code, ce qui peut améliorer significativement les scores FID et TBT.
- Éliminez les tâches longues : les tâches longues sont celles qui bloquent le thread principal pendant 50 millisecondes ou plus. Les diviser en tâches asynchrones plus petites permet de libérer le thread principal et d’améliorer à la fois le FID et le TBT.
- Optimisation de l'exécution JavaScript : L'analyse syntaxique, la compilation et l'exécution de JavaScript peuvent fortement contribuer à des taux élevés de FID et de TBT. Le report des exécutions JavaScript inutilisées, le chargement asynchrone des fichiers volumineux nécessaires, la minimisation des polyfills inutilisés et l'optimisation de l'exécution de JavaScript permettent de réduire ces taux.
- Exploitez les paramètres de performance de votre thème WordPress : de nombreux thèmes WordPress intègrent des paramètres de performance. Tirez pleinement parti de ces paramètres pour optimiser votre site.
- Préchargement et postchargement des ressources : des techniques telles que le chargement différé des images, le report du CSS non critique, le préchargement des ressources critiques et la prélecture des ressources tierces peuvent améliorer les performances de TBT et, par conséquent, améliorer également le FID.
Conseil de pro : lors de l’optimisation, privilégiez l’expérience utilisateur globale plutôt que les scores de chaque indicateur. Cette approche holistique permet d’obtenir de meilleurs résultats en matière de performances du site.
Améliorer le score FID est un processus complexe car il dépend du code du site web. Par conséquent, la première chose que les éditeurs devraient faire est de limiter l'exécution de scripts JavaScript lourds et de supprimer les fichiers JS inutiles, afin de permettre au navigateur de répondre rapidement aux interactions de l'utilisateur.
En s'attaquant aux principaux problèmes qui affectent l'interactivité d'un site WordPress, les éditeurs peuvent améliorer efficacement à la fois le FID et le TBT, améliorant ainsi l'expérience utilisateur et les performances globales.
Comment découvrir et améliorer le LCP avec PageSpeed Insights
Un faible score LCP signifie qu'un visiteur doit attendre plus longtemps avant que le contenu n'apparaisse, ce qui entraîne généralement des taux de rebond plus élevés.
1. Que sont les éléments LCP ?
LCP évalue le temps nécessaire au chargement du contenu principal d'une page web : plus ce contenu apparaît rapidement à l'écran, meilleure est l'expérience utilisateur.
Les principaux contributeurs au score LCP sont principalement des éléments de grande taille, tels que des éléments image, des éléments vidéo ou des éléments avec des images de fond chargées via des fonctions URL.
De plus, les éléments de niveau bloc — tels que les titres, les sous-titres et les tableaux, ainsi que les éléments basés sur des blocs tels que le texte — jouent également un rôle essentiel dans la structuration du LCP.
2. Comment mesurer le LCP avec PageSpeed Insights
Pour mesurer le score LCP, suivez ces étapes :
- Accédez à PageSpeed Insights
- Analysez la page web souhaitée
- Accédez à la section « Diagnostiquer les problèmes de performance »
- Configurez le paramètre « Afficher les audits pertinents pour » sur LCP
- Les utilisateurs peuvent désormais consulter les opportunités et les diagnostics pertinents.
Les éditeurs peuvent également identifier l'élément LCP dans le rapport PageSpeed Insights en repérant la recommandation relative à l'élément Largest Contentful Paint dans la section Diagnostics et en la développant pour obtenir plus de détails.
3. Comment améliorer le LCP d'un site WordPress
Améliorer le LCP implique plusieurs étapes, chacune contribuant à une expérience de navigation plus rapide et plus fluide. Voici quelques stratégies clés :
- Optimisation de l'élément LCP : cette étape dépend de la nature de l'élément LCP. Par exemple, un élément LCP de type image peut être compressé (sans perte de qualité). D'autres solutions consistent à précharger les images visibles au chargement de la page et les images de remplacement, à proposer des images adaptatives via l' attribut `srcset` en fonction de la taille de l'écran de l'utilisateur et à veiller à ne pas charger les images visibles au chargement de la page de manière différée.
- Améliorer les temps de réponse du serveur : le LCP mesure le temps écoulé entre l’arrivée d’un utilisateur sur une page et la réception d’une réponse du serveur par son navigateur. Investir dans un hébergement web de meilleure qualité, mettre en place un système de cache performant côté serveur et côté navigateur, et adopter une plateforme CMS robuste comme WordPress peuvent contribuer à réduire les temps de réponse du serveur.
- Réduisez les éléments bloquant le rendu : les éléments bloquant le rendu, tels que le HTML, les polices et le CSS, sont des fichiers statiques que le navigateur traite avant de charger le contenu. Moins il y a de sources bloquant le rendu, moins les navigateurs passent de temps à les afficher, ce qui accélère le chargement des pages et améliore le score LCP. Par exemple, les éditeurs peuvent utiliser une police simple pour leurs pages web ou précharger des polices web modulaires.
- Supprimez les extensions inutilisées : les sites WordPress peuvent utiliser des extensions pour gérer de nombreux aspects techniques. Toutefois, il est important de ne conserver que les extensions et leurs fonctionnalités qui contribuent directement au fonctionnement du site, et de supprimer celles qui ne sont pas utilisées. Cela permet d’alléger le site et d’améliorer son score LCP.
Conseil de pro : La mise en cache est un processus puissant qui peut améliorer considérablement le score LCP. Mettez en place une solution de mise en cache qui enregistre une copie statique des pages web sur les appareils des visiteurs, évitant ainsi le téléchargement systématique des mêmes données lors de chaque visite.
Il est important de comprendre que le LCP est de loin la métrique CWV la plus difficile à améliorer. En effet, le LCP dépend du TTFB (Time to First Byte), qui lui-même dépend de la rapidité de réponse du serveur. Selon le framework utilisé, réduire le temps de réponse du serveur peut s'avérer complexe.
Les éditeurs doivent garder à l'esprit que la marge d'amélioration peut varier en fonction de l'infrastructure avec laquelle ils travaillent.
En se concentrant sur l'optimisation des éléments de contenu de la page principale, l'amélioration des temps de réponse du serveur, la réduction des temps de blocage JavaScript et CSS et une utilisation judicieuse des plugins, les éditeurs peuvent améliorer considérablement leurs scores LCP.
Comment découvrir et améliorer le CLS avec PageSpeed Insights
Le Cumulative Layout Shift (CLS) vise à évaluer la stabilité visuelle en mesurant les variations inattendues du contenu visuel d'une page web lors de son chargement. Les pages web visuellement instables peuvent dégrader l'expérience utilisateur et augmenter le taux de rebond.
1. Que sont les éléments CLS ?
Le CLS mesure la stabilité visuelle ; les éléments qui y contribuent sont donc ceux qui peuvent potentiellement changer de position de manière inattendue pendant le chargement de la page. Il peut s’agir d’images sans dimensions spécifiées, de publicités, de contenus intégrés et d’iframes sans dimensions fixes.
En résumé, tout élément susceptible de se déplacer pendant le chargement de la page peut impacter négativement le score CLS.
2. Comment mesurer le CLS avec PageSpeed Insights
Utilisez PageSpeed Insights pour identifier et mesurer le CLS d'une page Web en suivant ces étapes :
- Accédez à PageSpeed Insights
- Analysez la page web souhaitée
- Accédez à la section « Diagnostiquer les problèmes de performance »
- Configurez l’option « Afficher les audits pertinents pour » sur CLS
Cette approche nous permet de cibler les éléments responsables des modifications de la mise en page, offrant ainsi un point de départ pour l'amélioration.
3. Comment améliorer le CLS d'un site WordPress
Améliorer le CLS d'un site WordPress implique des étapes stratégiques qui peuvent améliorer considérablement la stabilité visuelle d'une page :
- Modifiez la mise en page : vérifiez et ajustez la mise en page des éléments pour éviter tout décalage lors du chargement de la page. Cette étape implique de définir des attributs de largeur et de hauteur spécifiques pour les images et les vidéos, et de réserver statiquement l’espace pour les publicités ou les iframes chargées dynamiquement à l’aide d’un espace réservé.
- Utilisez le CSS critique ou supprimez le CSS inutilisé : le CSS inutilisé peut entraîner des décalages de mise en page. Envisagez d’implémenter un CSS critique contenant uniquement les styles visibles au chargement de la page ou supprimez le code CSS redondant afin d’éviter ces décalages. L’intégration directe des styles les plus légers et le préchargement des styles importants contribueront également à améliorer le CSS critique.
- Évitez les plugins Sliders : leur nature dynamique peut entraîner des modifications de la mise en page. Dans la mesure du possible, évitez-les.
- Utilisez des dimensions correctes pour les images et les balises div : des dimensions précises et l’utilisation d’images adaptatives au même rapport hauteur/largeur permettent d’éviter le décalage des éléments lors du chargement de la page. Spécifiez toujours les dimensions de ces éléments dans le CDN (réseau de diffusion de contenu) d’images.
- Déplacez le CSS de l'éditeur de thème vers le fichier style.css du thème enfant : le transfert du CSS vers un thème enfant peut contribuer à réduire les décalages de mise en page en garantissant le chargement correct des styles.
- Utilisez des thèmes et des plugins qui utilisent des animations de transformation : ces outils ont moins d’impact sur les changements de mise en page que d’autres types d’animations.
En effectuant ces ajustements, les propriétaires de sites WordPress peuvent réduire considérablement le score CLS de leur page, ce qui permet une expérience utilisateur plus stable et agréable.
Conseil de pro : Utilisez le chargement différé pour les images hors écran. Cette stratégie permet aux images de se charger uniquement lorsqu’elles sont sur le point d’apparaître à l’écran, évitant ainsi les décalages de mise en page causés par un chargement tardif.
Il est important de noter que le CLS (Content Lifetime Scale) est un indicateur clé centré sur l'utilisateur qui mesure la variation du contenu d'un site lors du chargement de la page. Plus le score CLS est bas, meilleure est l'expérience utilisateur.
En définitive, l'amélioration du score CLS exige une approche globale. Des vérifications régulières avec des outils comme PageSpeed Insights, des pratiques de mise en page cohérentes et une utilisation judicieuse des thèmes et des extensions peuvent contribuer à un score CLS plus bas et à un site web plus stable et convivial.
Emballer
Les éditeurs qui mesurent les Core Web Vitals (CWV) seront mieux placés pour optimiser l'expérience utilisateur de leurs sites.
L'optimisation des CWV (Content-Write-Vues) améliore non seulement considérablement l'expérience de lecture, mais contribue également au référencement naturel. Les pages qui se chargent rapidement, sont visuellement stables et réagissent instantanément aux interactions de l'utilisateur sont appréciées non seulement par les utilisateurs, mais aussi par les algorithmes des moteurs de recherche.
Outre la maîtrise d'outils comme PageSpeed Insights, les éditeurs doivent également suivre de près les tendances de l'édition numérique , les mises à jour des algorithmes des moteurs de recherche et les avis d'experts afin d'offrir en permanence une expérience de lecture de qualité supérieure.
