Core Web Vitals : qu'est-ce que c'est ?

L'annonce faite par Google de la prise en compte des Core Web Vitals dans son algorithme de classement des résultats de recherche a fait couler beaucoup d'encre. Désormais, les responsables de sites internet devront maîtriser les concepts liés à l'expérience utilisateur pour conserver leur classement, voire gagner des positions. Pour ce faire, des outils permettent de mesurer les Core Web Vitals (« Signaux Web Essentiels »en français) et d'obtenir rapidement un score.

Pourquoi les Core Web Vitals sont-ils importants ?

Les Core Web Vitals participent au bon référencement du site

Jusqu'à présent, le temps de chargement d'un site web n'était pas directement pris en compte par l'algorithme de Google, contrairement à ce que laissait croire une légende urbaine. Mais le taux de rebond, c'est-à-dire le pourcentage de visiteurs quittant un site, l'était en revanche. Or, un site lent ou peu ergonomique présente généralement un taux de rebond élevé. C'est donc indirectement que Google prenait en compte ces critères.

En novembre 2020, Google a officiellement annoncé sur son blog pour Webmasters que les « Signaux Web Essentiels » seraient pris en compte par son algorithme dès juin 2021. Depuis cette date, les trois indicateurs qui les composent participent donc au bon ranking des pages d'un site web. Néanmoins, John Mueller, le porte-parole de Google, nuance cette annonce en précisant que l'objectif du moteur de recherche est toujours d'apporter le meilleur résultat possible aux recherches des internautes. Ainsi, un site avec un mauvais score aux Core Web Vitals, mais plus pertinent qu'un autre site, pourtant plus ergonomique, continuera à être mieux classé dans les SERP (Search Engine Result Pages) de Google. Un quatrième indicateur, également présent dans notre liste, sera appliqué quant à lui à partir de mars 2024.

Les Core Web Vitals sont essentiels à l'expérience utilisateur

Lorsque l'internaute vit une expérience sans faille sur un site, il est davantage susceptible d'y revenir et, surtout, il aura envie de le recommander à ses proches. Un temps de chargement de la page trop long, une page remplie de fenêtres pop-up ou encore des éléments qui se déplacent sur la page à l'ouverture sont autant de points faibles qui n'incitent pas l'utilisateur à continuer sa lecture. L'utilisation des « Signaux Web Essentiels » permet de mesurer l'impact de l'UX sur le site et de mettre en place les actions nécessaires en cas de mauvais résultat.

Quels sont les 4 Core Web Vitals ?

1. LCP ou Largest Content Painful.
2. FID ou First Input Delay.
3. CLS ou Cumulative Layout Shift.
4. INP ou Interaction to Next Paint

1 - LCP ou Largest Content Painful

Le Largest Content Painful, aussi connu sous l'acronyme LCP, estime la vitesse de chargement perçue, c'est-à-dire le temps qu'il faut à une page web pour afficher les premiers éléments visibles. Il ne mesure donc pas le temps de chargement complet de la page, seulement son délai pour être active. Afin de passer ce test avec succès, la page doit afficher ses premiers éléments en moins de 2,5 secondes.

2 - FID ou First Input Delay

FID ou First Input Delay est un critère qui s'intéresse, quant à lui, au délai d'interactivité. Il mesure ainsi le temps qui passe entre le moment où un internaute interagit avec une page web et celui où le navigateur qu'il utilise répond à cette interaction. Par exemple, il évalue le délai entre le moment où un visiteur clique sur un lien et celui où le navigateur lance le chargement de la page liée. Pour obtenir un score satisfaisant à ce test, le délai doit être inférieur à 100 millisecondes.

Il est à noter que ce Core Web Vital est sur le point d'être remplacé par l'INP, un autre indicateur de performance dont le déploiement par Google sera complété en mars 2024.

3 - CLS ou Cumulative Layout Shift

Le Cumulative Layout Shift, connu sous l'acronyme CLS, est un indicateur mesurant la stabilité visuelle d'une page web. C'est donc à la stabilité de la mise en page qu'il accorde une attention particulière en s'assurant qu'elle ne connaît pas de changements inappropriés durant le chargement du site. Google attribue un score de 0 à 1 aux pages et, pour valider ce test, un site doit se situer entre 0 et 0,1.

4 - INP Interaction to Next Paint

Enfin, le Interaction to Next Paint est un nouveau Core Web Vital utilisé par Google pour mesurer la vitesse à laquelle un site internet réagit aux interactions des utilisateurs. Il s'agit donc de mesurer le temps s'écoulant entre un clic ou une pression sur une touche du clavier, et un changement apparent sur l'interface du site. Un bon INP serait ainsi inférieur à 200 millisecondes, tandis qu'un INP supérieur à 500 millisecondes ne représenterait pas un bon score.

L'INP sera l'un des Core Web Vitals utilisés par Google à partir de mars 2024. Il viendra, à terme, remplacer le FID.

Comment mesurer les Core Web Vitals ?

PageSpeed Insights

Outil le plus communément utilisé pour mesurer les « Signaux Web Essentiels », PageSpeed Insights propose un diagnostic rapide et détaillé des performances UX d'une page web. Les résultats sont répartis en deux onglets : mobile et desktop pour les performances de chacune des versions du site. Après l'affichage d'un score global et de scores détaillés par critères, chaque erreur identifiée s'accompagne de conseils pour la résoudre.

Lighthouse

Uniquement disponible sur le navigateur Chrome de Google, Lighthouse permet d'analyser une page d'un simple clic. Pour y accéder, il suffit de faire un clic droit et de choisir « Inspecter ». Dans le menu qui apparaît, il faut alors sélectionner « Lighthouse » pour utiliser cette fonctionnalité. Il est alors possible de choisir quelle version du site doit être analysée, à savoir mobile ou desktop. L'utilisateur peut également générer d'autres tests comme ceux liés au SEO ou aux meilleures pratiques web.

Chrome DevTools

Pour approfondir l'analyse de la performance d'un site web, il est aussi possible de choisir le menu « Performance » qui détaille les différents éléments à charger sur la page ainsi que leurs délais respectifs. En cas de temps de chargement long, cette méthode est particulièrement utile pour identifier ce qui pose problème.

Web.dev

Pour les internautes utilisant un autre navigateur que Chrome, il est possible de retrouver les fonctionnalités de Lighthouse sur le site web.dev qui présente les mêmes fonctionnalités. Cependant, il ne peut pas réaliser le test en navigation privée ni choisir la version à analyser, qui est le plus souvent la version mobile.

Google Search Console

Depuis peu de temps, les résultats « Signaux Web Essentiels » sont directement intégrés dans un menu dédié de la Google Search Console. Le propriétaire d'un site peut ainsi rapidement accéder à son état de santé, mais aussi être alerté en cas de problème. En effet, à l'apparition de chaque nouvelle erreur, la Search Console envoie un e-mail au propriétaire du compte afin de l'en informer et lui permettre de la résoudre dans les plus brefs délais.

Extension Web Vitals

Particulièrement synthétique, l'extension Web Vitals pour Chrome permet d'accéder en un clic à l'état des Core Web Vitals d'un site. Cette extension est particulièrement utile pour obtenir rapidement une information sans avoir à saisir l'URL.

Chrome UX Report (CrUX)

Le Chrome UX Report, aussi appelé CrUX, est un ensemble de données publiques collectées auprès de sites qui ont accepté d'y participer. Via une méthode de Real User Monitoring (RUM), Google collecte des données utilisateur basées sur une expérience réelle.

Comment optimiser ses Core Web Vitals ?

Comment optimiser le LCP ?

Un LCP supérieur à 2,5 nécessite d'être optimisé et cela passe, avant tout, par la réduction du temps de réponse du serveur. Lorsqu'un utilisateur cherche à ouvrir du contenu par l'intermédiaire de son navigateur, celui-ci envoie la demande au serveur. Le TTFB (Time to First Byte) correspond au temps nécessaire pour recevoir le premier octet du contenu demandé. Plus il est bas, plus le LCP est optimal.

Il est également possible d'utiliser un CDN (Content Delivery Network) afin de réduire le temps de latence, souvent très élevé, lorsque les visiteurs sont éloignés du serveur.

Il existe d'autres astuces à mettre en place pour améliorer le LCP comme optimiser la taille et le temps de chargement des images, supprimer les JavaScript inutilisés ou encore mettre en cache afin d'éviter de recréer inutilement le codage HTML.

Comment optimiser le FID ?

Afin d'améliorer le FID, plusieurs actions peuvent être mises en place, notamment :

• Utiliser un gestionnaire de balises afin de ne sélectionner que celles nécessaires à chaque page et éviter qu'elles ne prennent trop de temps à charger.
• Minifier le code JavaScript en supprimant les commentaires, par exemple.
• Différer l'exécution du code JavaScript inutile au bon chargement de la page.

Comment optimiser le CLS ?

L'optimisation du CLS passe par :

• La définition systématique des tailles attribuées aux images et aux éléments vidéo.
• La spécification de la largeur et de la hauteur des bannières publicitaires, des embeds et des iframes.
• La non-insertion de contenus au-dessus d'un contenu déjà existant.
• L'utilisation de polices de caractères web standard pour éviter qu'elles ne provoquent des changements de mise en page.

Comment optimiser l'INP ?

Pour optimiser votre INP :

• Vérifiez si le chargement de votre page implique également le chargement de fonctionnalités qui ne sont pas nécessaires. Si c'est le cas, essayez de désactiver ces fonctionnalités ou de faire en sorte qu'elles ne chargent que si c'est nécessaire.
• Regardez quelle partie de la page demande le plus de travail à votre navigateur. Optimisez cette section afin de rendre plus simple son calcul par votre processeur.
• Plutôt que de faire apparaître toute la page d'un seul coup, vous pouvez mettre la priorité sur l'apparition de certains éléments importants du premier écran de défilement. La page chargée commencera alors à apparaître plus tôt.

Pour aller plus loin, découvrez comment évaluer votre site web en utilisant l'outil website grader ; ou découvrez les modèles de site web gratuits de HubSpot.