Les Core Web Vitals de Google sont devenus un baromètre incontournable pour évaluer l'expérience utilisateur d'un site web.

Mesurant des aspects cruciaux tels que le temps de chargement, la stabilité visuelle et l'interactivité, ces indicateurs définissent la convivialité d'une plateforme en ligne.

Les Google Core Web Vitals incluent :

• Largest Contentful Paint (LCP) : mesure le temps nécessaire au chargement du plus grand élément de contenu de la page.
• Cumulative Layout Shift (CLS) : mesure le degré de déplacement inattendu de la mise en page lors de son chargement. Comme des images ou des boutons qui bougent.
• Interaction avec Next Paint (INP) : mesure le temps nécessaire entre le moment où un utilisateur lance une interaction et le moment où la prochaine mise à jour visuelle est affichée.

Dans cet article, nous explorerons en profondeur l'importance des Core Web Vitals, leurs seuils recommandés et les méthodes pour améliorer ces performances essentielles.

Pourquoi les Core Web Vitals sont-ils importants ?

Avoir de bonnes performances dans les Core Web Vitals garantit une bonne expérience utilisateur, fluide, rapide et stable et améliore également votre référencement. 

Les gens sont plus susceptibles de rester (et potentiellement de se convertir en clients) sur un site qui fonctionne bien et répond rapidement à leurs demandes. C'est pourquoi les sites à chargement plus rapide ont tendance à avoir des taux de rebond plus faibles . 

Ainsi, l’optimisation de ces mesures peut améliorer les performances de votre site dans les classements de recherche et générer plus de trafic vers votre site

Quels sont les seuils recommandés pour les métriques Core Web Vitals ?

Largest Contentful Paint

LCP reflète la rapidité avec laquelle les utilisateurs peuvent voir le contenu de votre page. Et se mesure en secondes.

Un LCP compris entre 2,6 et 4 secondes signifie que la vitesse de votre site doit être améliorée. 

Et un mauvais LCP dure plus de 4 secondes, parce que cela peut frustrer les visiteurs, les rendant plus susceptibles de quitter votre site.

Cumulative Layout Shift

CLS révèle combien d'éléments de page bougent de manière inattendue pendant le chargement de la page (la métrique est exprimée sous forme de score).

Par exemple : vous cliquez sur un lien, la page commence à charger. Le texte commence à s’afficher et tout à coup il disparaît car une image qui était plus lourde à charger “pousse” le texte vers le bas de la page. C’est une expérience utilisateur assez désagréable quand on commence à lire une page.

Un score CLS compris entre 0,1 et 0,25 signifie que la stabilité visuelle de votre site doit être améliorée : il y a suffisamment de changements pour que les utilisateurs le remarquent.

Un mauvais score CLS est supérieur à 0,25 et signifie que les éléments de votre page bougent beaucoup : les utilisateurs pouvaient voir de gros sauts comme du texte ou des boutons se déplaçant de manière inattendue. Ce qui perturbe leur expérience. 

Interaction to Next Paint

INP est la dernière métrique Core Web Vitals qui a remplacé le First Input Delay (FID) le 12 mars 2024. Elle indique la rapidité avec laquelle une page répond aux interactions et est mesurée en millisecondes. 

Il convient de souligner qu'INP évalue la rapidité avec laquelle une page Web répond pendant tout le temps qu'un utilisateur interagit avec elle. 

FID a uniquement mesuré le temps de réponse pour la première interaction de l'utilisateur avec un élément du site. 

Ainsi, si un utilisateur est sur une page et zomme sur une carte, clique sur un bouton et ouvre également un accordéon, INP considère le temps écoulé entre l'initiation et l'apparition du changement visuel pour toutes ces interactions, et est basé sur celui qui prend le plus de temps pour vous donner une image plus précise de la réactivité globale de votre page. 

Un INP compris entre 200 et 500 millisecondes signifie que l'interactivité de votre site doit être améliorée. 

Un INP supérieur à 500 millisecondes reflète une mauvaise expérience interactive pour vos utilisateurs :cela signifie des décalages et des retards notables dans la réponse aux actions des utilisateurs.

Comment vérifier les performances Web Vitals de votre site

1. Chrome User Experience Report

Le rapport sur l'expérience utilisateur Chrome (CrUX) est un ensemble de données publiques qui vous donne un aperçu de la façon dont les vrais utilisateurs de Chrome interagissent avec les sites. 

L'un des moyens les plus simples d'accéder à CrUX consiste à utiliser le tableau de bord CrUX pour Looker Studio.

Une fois que vous avez ouvert l'outil, saisissez l'URL du site que vous souhaitez analyser dans la barre de recherche et ensuite, cliquez sur « Go ».

Vous verrez vos résultats pour les Core Web Vitals, mais vous pouvez également examiner d'autres données si vous le souhaitez.

Sur le tableau de bord, vous verrez un résumé des performances de vos pages pour chaque Core Web Vital pour les utilisateurs mobiles et de bureau.

Pour une analyse plus granulaire, sélectionnez les rapports individuels pour la métrique que vous souhaitez examiner dans le menu de gauche. 

Notez que ces données représentent vos performances sur tous les appareils. Vous pouvez choisir d'afficher vos scores uniquement sur mobile ou sur ordinateur en cliquant sur le filtre « Device » dans le coin supérieur droit et en sélectionnant votre type d'appareil. 

2. Informations Google PageSpeed

Google PageSpeed ​​Insights (PSI) est un outil gratuit qui évalue les performances d'une seule page Web pour les appareils mobiles et de bureau.

Il propose également des idées sur la façon de rendre votre page plus rapide et plus facile à utiliser.

Pour mesurer les performances Core Web Vitals d'une page, ouvrez PageSpeed ​​Insights, saisissez l'URL que vous souhaitez vérifier, puis cliquez sur « Analyser ».

Une fois votre rapport prêt, vous verrez une répartition détaillée de vos performances selon diverses mesures. 

Il existe un score de « performance » qui va de 0 à 100 et est basé sur ces mesures :

• Première peinture de contenu
• Indice de vitesse
• La plus grande peinture de contenu
• Temps de blocage total
• Changement de disposition cumulatif

PSI fournit également un aperçu de l'accessibilité de votre site, des performances de référencement et du respect des meilleures pratiques. Faites simplement défiler vers le bas pour voir ces résultats. 

3. Rapport Core Web Vitals dans Google Search Console 

Le rapport « Core Web Vitals » de Google Search Console (GSC) utilise des données réelles pour vous donner une image précise de la façon dont les utilisateurs perçoivent votre site.

GSC regroupe les pages de votre site présentant des problèmes similaires, ce qui facilite l'identification et la résolution des problèmes courants sur votre site. 

Pour utiliser ce rapport, connectez-vous à GSC et sélectionnez « Core Web Vitals » dans le menu.

Ici, vous verrez un aperçu de haut niveau du nombre d'URL que Google considère comme « médiocres », « à améliorer » et « bonnes ». 

Le rapport est disponible sur mobile et sur ordinateur.

Comment améliorer les performances de vos Core Web Vitals

Améliorer le LCP

Augmenter votre LCP peut être réalisé en apportant de petits ou grands changements.

L'une des méthodes les plus simples consiste à optimiser vos images en les compressant et en utilisant des formats d'image adaptés au Web, tels que WebP, dont la taille est jusqu'à 34 % plus petite que les formats traditionnels.

Vous pouvez également activer la mise en cache des pages, ce qui permet à la page d'être stockée sur le serveur après son premier chargement, elle sera donc récupérée et affichée plus rapidement à l'avenir. 

Une autre façon d'améliorer votre score LCP consiste à mettre à niveau votre hébergement Web.

L'hébergement partagé (lorsque plusieurs sites sont hébergés sur le même serveur) peut être plus lent car tout le monde partage des ressources telles que la mémoire et la puissance de traitement. Ainsi, votre site peut ralentir lorsque ces autres sites connaissent des pics de trafic. 

Pour résoudre ce problème, vous pouvez passer à un meilleur plan d'hébergement ou à un autre type d'hébergement comme l'hébergement dédié (lorsque votre site dispose de son propre serveur) ou l'hébergement cloud (lorsque plusieurs serveurs sont utilisés pour offrir des performances plus fiables).

Améliorer CLS

Les problèmes avec CLS ont tendance à se produire lorsque des éléments tels que des images, des bannières ou des publicités sans dimensions poussent d'autres contenus vers le bas ou sur le côté lors de leur chargement. 

L'un des moyens les plus simples d'améliorer votre score CLS consiste à ajouter des attributs de largeur et de hauteur aux images et aux vidéos. 

De cette façon, le navigateur réserve de l'espace pour des éléments tels que des images ou des vidéos lors du chargement de la page. Ainsi, tout s'intègre parfaitement et ne bouge pas lorsque les gens consultent le site.

Vous pouvez également utiliser des zones de rapport hauteur/largeur dans votre code CSS. Ce choix de conception réactive fonctionne en créant un conteneur pour votre contenu qui conserve le même rapport largeur/hauteur sur tous les écrans.

Le type de police que vous utilisez peut également avoir un impact sur votre score CLS. 

Il est préférable d'éviter d'utiliser des polices Web, car elles doivent être téléchargées avant que le navigateur puisse les afficher et rester fidèle aux polices système qui existent sur la plupart des appareils comme Arial, Helvetica et Verdana.

Par exemple, vous pouvez choisir une seule police Web à utiliser pour les titres et les sections spéciales. 

Améliorer l'INP

L'un des principaux facteurs qui peuvent nuire à votre interaction avec Next Paint est si votre site contient de nombreux scripts volumineux ou trop de code JavaScript en cours d'exécution.

JavaScript est un langage de programmation utilisé pour créer des fonctionnalités de site Web dynamiques telles que :

• Des menus
• Des formulaires
• Des animations

Votre développeur peut améliorer votre INP en minimisant JavaScript et autres codes non essentiels. 

C'est également une bonne idée de diviser les tâches longues que le navigateur effectue en coulisses et qui gênent l'interaction de l'utilisateur.

En divisant ces tâches en segments plus courts (ce que votre développeur peut effectuer grâce à des tactiques telles que différer l'exécution du code), le navigateur peut gérer les interactions des utilisateurs plus rapidement.

Quelques conseils pour prioriser les correctifs Core Web Vitals

La clé pour résoudre avec succès tous les problèmes Core Web Vitals est de leur donner la priorité. Vous pouvez ainsi améliorer progressivement les performances de votre site sans vous laisser submerger. 

Voici quelques suggestions à utiliser pour déterminer vos prochaines étapes : 

• Considérez la facilité de mise en œuvre : parfois, un problème peut être plus rapide à résoudre qu'un autre. Par exemple, l'optimisation des images pour améliorer le LCP peut être plus simple que l'ajustement de mises en page complexes pour améliorer le CLS.
• N'oubliez pas l'objectif de votre site Web : si vous avez un site riche en contenu, comme un blog ou une publication d'actualités, améliorer d'abord LCP pourrait avoir plus d'impact, car vos utilisateurs apprécieront le plus le contenu à chargement rapide. Mais si vous disposez d’un site de commerce électronique qui repose fortement sur l’interaction des utilisateurs, il est probablement plus logique de donner la priorité à CLS en premier.
• Regardez les données : si certaines pages sont nettement moins bonnes que d’autres, vous voudrez peut-être commencer par celles-là. Vous pouvez utiliser Site Audit pour vous aider. Dans le rapport « Core Web Vitals », faites défiler jusqu'à la section « Pages analysées » pour voir une liste d'URL avec les statuts « Médiocre » et « À améliorer ».

En conclusion

Les Core Web Vitals représentent une pierre angulaire dans la construction d'un site web performant et compétitif dans l'écosystème numérique moderne.

Comprendre et améliorer les Core Web Vitals ne devrait pas être considéré comme une tâche ponctuelle, mais plutôt comme un processus continu d'optimisation et d'adaptation aux évolutions des attentes des utilisateurs et des algorithmes de recherche. En suivant les recommandations de Google, en utilisant les outils disponibles pour évaluer les performances et en mettant en œuvre des stratégies ciblées, les propriétaires de sites peuvent non seulement améliorer leur classement dans les résultats de recherche, mais aussi fidéliser les utilisateurs et augmenter la conversion.

Ainsi, que ce soit en optimisant le temps de chargement, en stabilisant la mise en page ou en améliorant l'interactivité, l'investissement dans les Core Web Vitals est un investissement dans la croissance et la durabilité à long terme de tout site web. En se concentrant sur l'amélioration de ces aspects fondamentaux, les acteurs du web peuvent façonner des expériences en ligne qui captivent, engagent et convertissent les utilisateurs, créant ainsi des connexions significatives dans le vaste paysage numérique.