Que sont les Core Web Vitals ? Notre Guide Complet 2022

Présentés par Google en 2020, les Core Web Vitals vous permettent d’évaluer la qualité de l’expérience utilisateur (UX) sur votre site web à travers trois indicateurs techniques. Ces critères font partie de la mise à jour de l’algorithme nommée Google Page Experience déployée en juin 2021.

Que sont donc ces Core Web Vitals ? Comment les évaluer et ainsi optimiser votre site ? Découvrez toutes les réponses à vos questions dans cet article.

Les Core Web Vitals, c’est quoi ?

Les Core Web Vitals – Signaux Web Essentiels en français – permettent de mesurer la qualité de l’expérience utilisateur sur un site web selon trois critères. 

Ces derniers sont nommés Large Contentful Paint (LCP), First Input Delay (FID) et Cumulative Layout Shift (CLS). Nous y reviendrons en détails juste après.

L’objectif est de mesurer la qualité de l’UX – ou expérience utilisateur – de votre page en se reposant sur ces critères techniques pris en compte dans l’algorithme de Google pour le classement des pages dans les résultats de recherche. Évidemment, ce n’est pas un substitut aux exigences de Google déjà existantes, comme le HTTPS ou l’optimisation mobile.

Pourquoi les Core Web Vitals sont importants ?

Quel est le lien entre l’attention apportée à votre site et les Core Web Vitals ? Voici l’explication.

Une meilleure expérience utilisateur…

L’UX design, ou le design centré autour de l’expérience utilisateur a pour but de proposer l’expérience la plus simple et la plus fluide pour vos visiteurs. Que ce soit le positionnement d’un bouton ou le temps de chargement d’une page, chaque détail compte. Proposer une expérience naturelle et souple est un critère essentiel en 2022 pour l’acquisition de vos leads. 

… Et un meilleur référencement…

Google tient compte de la qualité de votre UX pour son classement dans ses résultats. En fait, il ne favorise pas spécifiquement votre site parce que vous avez vérifié sa conformité aux Signaux Web Essentiels. Cependant, un site web optimisé sera naturellement privilégié et mis en avant par le moteur de recherche.

… Apportent un meilleur taux de conversion

Combinez un site à l’UX irréprochable et une position de leader dans les résultats de recherche, et vous obtenez un cocktail explosif de conversion !

Vous l’aurez compris, optimiser les performances de votre site web est un critère à inclure obligatoirement dans votre stratégie SEO en 2022. Mais alors, quels sont les indicateurs des Core Web Vitals ?

Quels sont les 3 indicateurs des Core Web Vitals ?

Google effectue sa mesure grâce à ces trois critères spécifiques :

Largest Contentful Paint (LCP)

Le critère LCP mesure la performance au chargement de la page. Le temps d’affichage des plus gros éléments de la page doit être inférieur à 2,5 secondes après que la page ait commencé à se charger.

Pour effectuer cette mesure, Google observe les dimensions des images, des vidéos et des blocs contenant des sous-blocs de texte.

First Input Delay (FID)

Quant à lui, le critère FID mesure le temps de réactivité lors d’une interaction sur la page. Lorsque la page est chargée et que l’utilisateur effectue sa première interaction, le temps que met la page à effectuer une action en réponse est mesuré. Il ne doit pas dépasser 100 millisecondes.

Pourquoi cette mesure est-elle importante ? Car il peut arriver que le code JavaScript ne réagisse pas instantanément à cause d’un autre processus JS exécuté sur la même page.

Cumulative Layout Shift (CLS)

Le troisième critère mesure la stabilité visuelle de la page. Vous avez certainement déjà fait l’expérience d’arriver sur une page, mais vous n’avez pu commencer à lire le contenu seulement qu’au bout de quelques secondes car les blocs de texte bougent dans la page. Et cela à cause du contenu souvent publicitaire qui ne s’affiche qu’après un temps donné, et qui décale le reste du contenu. 

La mesure CLS observe les changements se produisant dans la page entre 1 et 5 secondes après le chargement. Pour être conforme, le résultat de la mesure doit être de 0,1 maximum.

Comment vérifier la conformité de votre site aux Core Web Vitals ?

Plusieurs outils permettent l’analyse complète des Core Web Vitals. En voici 5 : 

Chrome UX Report

Chrome UX Report utilise la base de données CrUX (Chrome UX Report) contenant les données collectées par le navigateur Chrome. En effet, si l’utilisateur a accepté à l’installation, Chrome collecte des données d’analyse sur les performances des sites web, le lieu et l’appareil utilisé (téléphone, ordinateur, téléviseur, etc.).

L’avantage de cet outil est que les données d’analyse proviennent de vrais utilisateurs. L’inconvénient ? Votre site doit être très visité pour avoir assez de données et ainsi fournir une analyse pertinente.

Extension Web Vitals

Google propose l’extension Web Vitals permettant d’afficher l’évaluation directement lorsque vous naviguez sur un site.

L’API JavaScript

En compléments de Google Analytics ou d’un autre système d’analyse d’audience, vous pouvez intégrer directement la collecte des données Core Web Vitals à votre code JavaScript. 

Page Speed Insights

Page Speed Insights est une version étendue de Chrome UX Report. Les données analysées proviennent de la même base de données. 

Cependant, cet outil vous fournit également des recommandations techniques. Il s’agit d’une ressource essentielle pour vos développeurs.

Google Search Console

Outil bien connu des webmasters, la Search Console intègre une section Signaux Web essentiels. Vous pourrez y suivre l’évolution des métriques dans le temps.

Chrome DevTools

En amont de l’analyse de votre site en ligne, vous pouvez évaluer vos performances directement lors du développement. DevTools est un outil bien connu des développeurs. Il intègre la mesure LCP et CLS. 

Cependant, la mesure FID ne peut pas être effectuée mais peut être remplacée par la mesure TBT (Total Blocking Time). Une amélioration du TBT donnera également un résultat positif sur la mesure FID.

Lighthouse

À l’instar de DevTools, Lighthouse effectue une simulation d’exécution de la page web et est capable de mesurer les critères LCP et CLS. Le recours à la mesure TBT est également recommandé.

Astuces pour améliorer votre score (et vos performances)

Améliorez votre score Largest Contentful Paint (LCP)

• Utilisez des formats légers comme le Webp ou le Jpeg 2000 afin de garder des images légères. Également, prêtez attention à ce que la dimension de vos images ne soit pas trop grande.
• Privilégiez le LazyLoad dans votre code HTML. Ainsi, les images ne se chargeront qu’au moment où elles ont besoin d’être affichées.
• Limitez au maximum l’utilisation d’éléments exploitant des API externes, comme le Chat Messenger ou un système tiers de gestion des cookies.
• Privilégiez les polices web-safe lorsque la situation le permet.
• Assurez-vous d’une mise en cache efficace côté serveur, et désinstallez les plugins inutiles dans votre CMS.
• Assurez-vous que votre hébergeur fournisse une vitesse rapide, même en cas de fort trafic. La vitesse de chargement est un critère critique pour la performance.
• Si possible, utilisez un CDN pour votre projet. Ainsi, le site sera chargé depuis un serveur géographiquement proche de l’utilisateur.

Améliorez votre score First Input Delay

• Limitez l’utilisation d’éléments exploitant des API externes. En effet, leur chargement étant différé, votre score FID sera impacté négativement.
• Utilisez un système de cache pour améliorer drastiquement la performance de votre site. Si votre site est une PWA ou si il utilise AMP, il en sera avantagé.
• Minimisez votre code JavaScript. En effet, un code minimisé comportera moins de caractères (un saut de ligne est perçu comme un caractère par la machine !) et sera interprété plus vite par le navigateur. Si possible, chargez vos scripts de façon asynchrone.
• Lorsque c’est possible, mettez en cache vos pages HTML statiques côté serveur.
• Attention aux propriétés CSS gourmandes en performances, telles que box-shadow et filter. Utilisez-les un minimum ou essayez de trouver des alternatives.
• Différez le chargement des scripts non-critiques tels que les analytics ou les publicités.
• Confiez l’exécution de vos scripts lourds à des web workers.

Améliorez votre score Cumulative Layout Shift

• Assignez autant que possible une taille fixe à vos blocs. Ainsi, un contenu chargé en différé n’impactera pas l’emplacement des autres éléments.
• De même, prévoyez des zones de taille prédéfinie pour vos publicités. En effet, celles-ci ont tendance à apparaître après le chargement de la page. Leur réserver un emplacement fixe permettra à votre contenu de ne pas être décalé par leur apparition.
• Si un certain type de contenu risque de se décaler pendant le chargement, cachez-le si possible tant qu’il n’est pas fixe.
• Pour un site expérientiel affichant beaucoup d’éléments lourds, mettez en place un écran de chargement sous la forme d’une page HTML statique.
• Limitez la diversification de vos polices d’écriture. Utilisez les polices natives si possible.
• Veillez à utiliser une police de secours similaire dans votre CSS. Cela permet de limiter le décalage lors du chargement de votre police.
• Pour vos animations CSS, jouez sur les attributs transform et opacity.
• Pour les blocs récursifs, par exemple des articles, utilisez l’attribut CSS contain. Celui-ci indique au navigateur que chacun des blocs est indépendant et il peut prendre la décision de ne charger que ceux présents visuellement dans la page par exemple.

Les Core Web Vitals ont-ils un impact majeur sur le SEO en 2022 ?

Le rôle du moteur de recherche est de présenter à l’utilisateur les résultats les plus pertinents en fonction de divers critères. Au-delà des critères incontournables de la qualité du contenu et de la sécurité, on retrouve aujourd’hui une certaine exigence concernant l’expérience utilisateur (UX). 

Cependant, Google juge encore assez peu la qualité de l’UX par rapport à la qualité du contenu. Vous devez néanmoins vous assurer de travailler sur l’amélioration des critères Core Web Vitals sur votre site. En effet, la durée d’attention moyenne sur le web diminuant de plus en plus, vous devez fournir à vos leads un parcours ultra optimisé.

D’une façon générale, vous devez proposer une expérience utilisateur fluide et optimisée afin d’améliorer vos conversions.

Afin d’obtenir les meilleurs résultats pour votre business, nous vous recommandons de travailler votre stratégie SXO (alliance du SEO et de l’UI/UX Design) et de ne pas vous arrêter au SEO.

Effectivement, avec les Core Web Vitals, Google fait en sorte d’aider les concepteurs de sites web à non seulement améliorer leur référencement, mais aussi et surtout à améliorer la qualité de l’expérience utilisateur.

Article rédigé par

Mickaël Debalme

Responsable Éditorial