Guide des Core Web Vitals de Google, les métriques techniques pour l’UX

Core Web Vitals de Google, des mesures clés pour le référencement et l’ergonomie

Elles sont appelées Core Web Vitals, en français, signaux web essentiels, et constituent un ensemble de mesures techniques axées sur des paramètres spécifiques de l'expérience utilisateur afin d'évaluer dans quelle mesure une page réussit à offrir une expérience fluide et transparente. Introduites pour la première fois par Google en mai 2020, puis officiellement au sein des facteurs de classement qui composent l'expérience de la page, ces mesures se composent actuellement de trois éléments - vitesse de chargement du contenu, interactivité et stabilité visuelle, respectivement mesurés par Largest Contentful Paint, First Input Delay et Cumulative Layout Shift - mais sont évolutives et non statiques. Découvrons les Core Web Vitals, pour comprendre ce que sont les mesures de performance des pages, comment elles fonctionnent, comment les mesurer et comment optimiser votre site à la lumière de ces nouveaux paramètres techniques.

Que sont les Core Web Vitals ?

Le projet Core Web Vitals de Google a été décrit pour la première fois en mai 2020 par Ilya Grigorik, ingénieur en performances Web, sur le blog Chromium, qui l'a décrit comme un guide unifié des signaux de qualité essentiels à une bonne expérience utilisateur sur le Web.

Il n'est pas toujours facile de comprendre quels sont les aspects importants sur lesquels concentrer notre attention dans le travail d'optimisation de l'expérience utilisateur d'un site, en fait, et c'est pourquoi Google a décidé d'établir les Web Vitals pour simplifier l'analyse en identifiant les métriques qui comptent le plus dans le processus de travail sur la qualité de l'expérience utilisateur, qui reste la clé du succès à long terme de tout site web.

Si la mesure de la qualité de l'expérience utilisateur présente de nombreuses facettes et que certains aspects sont spécifiques à un site et à un contexte, Google a identifié un ensemble commun de signaux de base pour toutes les expériences web. Les "Core Web Vitals" s'appliquent en fait à toutes les pages web, doivent être mesurées par tous les propriétaires de sites et sont affichées sur tous les outils Google. Chacun de ces paramètres représente un aspect distinct de l'UX, est mesurable sur le terrain et reflète l'expérience réelle d'un résultat critique centré sur l'utilisateur.

Que sont les Core Web Vitals : les premières mesures choisies par Google

Les métriques qui composent les Core Web Vitals évolueront avec le temps, prévoit Google (mais pas avec une cadence précise ni assidue, afin d'éviter de modifier trop fréquemment les objectifs des référenceurs et des développeurs), et pour l'instant elles se concentrent sur trois aspects - le chargement, l'interactivité et la stabilité visuelle - à travers trois métriques spécifiques avec des seuils respectifs auxquels se référer.

Les trois premières métriques que Google a définies comme essentielles et vitales pour le web sont :

• Largest Contentful Paint (LCP), qui mesure l'intervalle de temps entre le début du chargement d'une page et le rendu complet de la plus grande image ou du plus grand bloc de texte dans l'affichage d'un utilisateur. Le score peut changer pendant le chargement de la page et lorsque le contenu est visible, mais le nœud le plus important reste dans l'arriéré et n'est pas encore affiché ; cela est plus visible sur les connexions à faible vitesse. Selon les études de Google, pour offrir une bonne expérience aux utilisateurs, le LCP doit se produire dans les 2,5 secondes qui suivent le lancement de la première page.
• Le délai de première entrée (First Input Delay, FID), qui est le temps nécessaire pour qu'une page soit prête pour l'interactivité avec l'utilisateur, c'est-à-dire le temps qu'il faut à la page, telle qu'elle est assemblée, pour répondre aux clics, aux défilements ou aux entrées clavier en traitant les gestionnaires d'événements correspondants. L'interaction de l'utilisateur peut être considérablement retardée par d'importantes activités de script bloquant les threads. Pour des performances efficaces, les pages doivent avoir un FID de moins de 100 millisecondes.
• Cumulative Layout Shift (CLS), qui est la distance mesurée et la fraction de la fenêtre d'affichage qui se déplace en raison de la manipulation du DOM ou de l'absence d'attributs de taille pour les principaux éléments de média. Lorsque nous ne parvenons pas à définir les dimensions de nos images héroïques, par exemple, le texte des pages semble d'abord être déplacé, ce qui entraîne un "déplacement" destructeur de la présentation du contenu pour nos utilisateurs. Les pages doivent maintenir un CLS inférieur à 0,1 pour offrir une bonne UX.

Pourquoi optimiser les métriques et les performances : les avantages selon Google

Même si nous parlons de questions purement techniques, il devrait déjà être clair pourquoi il est important de travailler à l'optimisation de ces aspects sur nos pages - ne serait-ce que pour le fait que les Essential Web Signals font, comme mentionné, partie de la Google Page Experience Update, la mise à jour algorithmique qui a commencé en juin 2021 pour les recherches mobiles et a ensuite été définitivement étendue en mai 2022 aux classements des ordinateurs de bureau également, et représentent donc des facteurs de classement pour Google.

Lorsqu'on parle de performances, il faut toutefois tenir compte des effets concrets sur la navigation et la satisfaction des utilisateurs, et de nombreuses études établissent un lien entre l'élément "temps" et les retours. Ainsi, en partant du principe que sur le Web, chaque seconde compte et améliore les chances de gains potentiels, il existe quelques raisons valables pour lesquelles les référenceurs et les spécialistes du marketing digital devraient faire un effort pour améliorer (et maintenir !) les performances des pages du site, en se concentrant au moins sur celles qui sont les plus importantes pour les affaires.

C'est précisément l'aspect économique qui doit être un levier d'optimisation, car aujourd'hui plus que jamais, l'expérience client est de plus en plus numérique et la plupart des parcours clients ont des composantes numériques, même pour les achats hors ligne. Des statistiques récentes expliquent que 85 % des parcours clients passent par Google Search au moins une fois, de sorte que la visibilité dans ce domaine favorise l'engagement et les résultats.

Se concentrer sur les Google Core Web Vitals signifie donc construire des pages capables de satisfaire les utilisateurs, plus encore que des pages capables de mieux se classer sur Google (un élément qui, comme nous l'avons mentionné, n'a pas répondu aux attentes), et cela va dans le sens d'une amélioration globale du service offert qui a des résultats concrets en retour. Il ne faut pas oublier, par exemple, que deux enquêtes distinctes menées par Akamai et Deloitte ont conclu qu'un retard d'une seconde dans le temps de chargement d'une page réduit les conversions de manière drastique, de 7 à 9 %. Le temps de chargement est un facteur important d'abandon de page et l'utilisateur moyen n'a pas la patience d'attendre une page trop longue à charger. C'est précisément la raison pour laquelle Google fait de Core Web Vitals un facteur de classement.

La création d'une expérience utilisateur sans décalage et sans faille sur une page web est essentielle pour gagner et fidéliser les clients, et pour augmenter la probabilité que des clients potentiels visitent notre site web. La rétention des utilisateurs est également cruciale pour améliorer les conversions, alors que (comme vous pouvez facilement le deviner) les sites lents ont un impact négatif sur les revenus.

Selon l'équipe Chromium de Google, la mise en œuvre de Core Web Vitals permet de réduire de 24 % les abandons de page dus à des retards de chargement et de 24 % les abandons pour les sites d'achat. En outre, une enquête sur l'expérience ThinkwithGoogle a montré que le simple fait d'offrir une expérience utilisateur positive augmente de 67 % la probabilité que les clients achètent et de 74 % celle qu'ils reviennent sur le site web.

• Guide pour optimiser l’INP et l’interactivité des pages

Toujours en prenant comme référence certaines des données publiées par Google, la performance des pages et l'amélioration des Essential Web Signals ont un impact direct sur l'engagement des utilisateurs et les mesures commerciales. Par exemple :

• Des recherches ont montré que lorsqu'un site atteint les seuils des Essential Web Signals, la probabilité que les utilisateurs abandonnent la page pendant le chargement est réduite de 24 %.
• Pour chaque réduction de 100 ms de la métrique Largest Contentful Paint (LCP), le taux de conversion en ligne de Farfetch a augmenté de 1,3 %.
• La réduction de 0,2 de la métrique CLS (Cumulative Layout Shift) s'est traduite par une augmentation de 15 % des pages vues par session pour Yahoo ! JAPAN, une durée de session plus longue de 13 % et une diminution de 1,72 point de pourcentage du taux de rebond.

Un projet en évolution

Les indicateurs Core Web Vitals initiaux (et toujours actuels) mesurent trois aspects importants de l'expérience utilisateur sur le Web, mais Google est conscient que "de nombreux aspects de l'expérience utilisateur ne sont pas encore couverts". D'où la décision de mettre à jour les Core Web Vitals sur une base annuelle et de fournir des mises à jour régulières sur les futurs candidats, la motivation et l'état d'avancement de la mise en œuvre - même si, en réalité, l'ensemble est toujours le même aujourd'hui, deux ans plus tard.

Par exemple, selon M. Grigorik, Google a raisonné en investissant dans "une meilleure compréhension et une meilleure capacité à mesurer la vitesse des pages et d'autres caractéristiques clés de l'expérience utilisateur". L'article mentionne notamment la possibilité "d'étendre la capacité de mesurer la latence d'entrée entre toutes les interactions, et pas seulement la première ; de nouveaux paramètres pour mesurer et quantifier la fluidité" ; soutenir les primitives et les métriques qui permettront de fournir des expériences instantanées et préservant la vie privée sur le web, et plus encore", mais comme mentionné jusqu'à présent, il n'y a pas eu de progrès officiel - bien que, il y a quelques mois, la métrique INP ou Interaction to Next Paint a été dévoilée, qui mesure plus précisément la réactivité (responsive) et qui, pour beaucoup, est un candidat sérieux pour être inclus dans les futures Core Web Vitals.

Comment mesurer les vitales du Web : les trois mesures

Il convient de noter que ces mesures se concentrent sur l'achèvement de certains événements - y compris ce qui est affecté interactivement ou visuellement lorsque ces événements se produisent - à mesure que les pages se chargent jusqu'à un point de stabilité par rapport à l'expérience de l'utilisateur, comme l'explique Detlef Johnson dans Search Engine Land.

Cela signifie que les valeurs de score peuvent changer au fur et à mesure que les utilisateurs interagissent avec la page et, en général, de meilleurs scores sont obtenus lorsque les événements se produisent plus rapidement le long des intervalles de temps du chronomètre.

Google propose une méthode pour s'assurer que nous atteignons l'objectif recommandé pour la majorité de nos utilisateurs : pour chaque indicateur, un bon seuil de mesure consiste à "atteindre le 75e percentile des chargements de pages, segmenté entre les appareils mobiles et de bureau".

Plus précisément, les mesures de performance pour chaque statistique de Web Vitals sont classées en fonction de trois résultats :

• Bon (c'est-à-dire promotion)
• Améliorations nécessaires
• Échec

Les utilisateurs de longue date de PageSpeed Insights connaissent peut-être des mesures similaires, dont beaucoup resteront inchangées, mais peut-être pas toutes. Les Core Web Vitals sont l'aboutissement de ces autres mesures, et avec elles, la complexité de l'expérience du développeur, simplifiée pour permettre à tous les utilisateurs (propriétaires de sites, mais aussi webmasters et développeurs) d'avoir une clarté bienvenue et moins de mesures, mais plus importantes, à suivre.

Au fil du temps, en effet, Google a mis au point de nombreux indicateurs et outils utiles pour aider les propriétaires d'entreprises, les spécialistes du marketing et les développeurs à identifier les possibilités d'améliorer tout ce qui a trait à l'UX, notamment en collaborant avec des millions de développeurs Web et de propriétaires de sites.

Outre PageSpeed Insights, déjà mentionné, nous mentionnons également Lighthouse, Chrome DevTools et le rapport sur la vitesse dans la Search Console, qui sont certainement utiles et valables : cependant, l'abondance de mesures et d'outils a rendu difficile de suivre, de comprendre leur fonctionnement et d'interpréter toutes les données fournies, ce qui a compliqué le processus de prise de décision sur les points sur lesquels il faut concentrer ses efforts en priorité, d'où la nécessité de simplifier et d'optimiser.

Comment mesurer les Core Web Vitals

L'objectif de Google est de "rendre Core Web Vitals simple, facile d'accès et mesurable pour tous les propriétaires et développeurs de sites", à la fois dans l'écosystème Google et dans les différents tableaux de bord et outils qui peuvent être utilisés.

Sur le plan pratique, il est possible d'analyser, de mesurer et d'obtenir des scores indépendants pour les Essential Web Vitals entre les appareils mobiles (téléphone) ou les ordinateurs de bureau/portables.

Dans certains outils, vous pouvez spécifier le type de dispositif que vous souhaitez tester ou passer d'un type à l'autre lorsque les deux sont disponibles. Par exemple, PageSpeed Insights utilise par défaut des statistiques pour les appareils mobiles. Il faut donc passer à l'onglet "desktop" pour voir la différence de scores entre les deux versions.

De manière encore plus intuitive pour les débutants, Google a créé le rapport spécifique Essential Web Signals au sein de la Search Console, qui permet de découvrir en un coup d'œil les performances des pages d'un site sur la base de données d'utilisation réelles (dites données de terrain).

Quels outils utiliser pour mesurer Core Web Vitals ?

M. Johnson énumère également des outils utiles pour mesurer les paramètres de Core Web Vitals en plus du GSC, en donnant des détails sur leur fonctionnement.

• PageSpeed Insights. Il s'agit du premier outil utilisé pour mesurer les Web Vitals. Dans le rapport, nous pouvons obtenir des données de laboratoire et de terrain (si elles sont disponibles), mais aussi de nombreux autres paramètres largement liés à l'amélioration des pages comportant des erreurs, notamment les résultats qui influencent la vitesse d'une page et le téléchargement de ses ressources.
• Extension Web Vitals pour Chrome. Grâce à l'extension Chrome, il est possible d'accéder à Web Vitals directement au moment du chargement de la page et, comme indiqué, d'interagir avec la page pour résoudre tout problème de délai de saisie et/ou de décalage de la mise en page du contenu. Il est également disponible d'une page à l'autre lors de la navigation sur des sites web.
• WebPageTest. Cet outil de test indépendant permet de configurer l'approche en fonction de diverses conditions. Construit par des ingénieurs de Google qui font partie de l'équipe Chromium, il fait autorité et met à disposition l'API RESTful.
• Web Vitals JavaScript API. Nous permet d'utiliser JavaScript pour accéder aux mesures directement depuis le navigateur et les transmettre à un référentiel de notre choix. Nous pouvons également intégrer le test dans le processus de développement et nous assurer que les changements que nous apportons n'ont pas d'incidence négative sur les résultats après la mise en production.
• Outils de développement de Chrome. Chrome lui-même fournit le meilleur ensemble d'outils pour découvrir ou localiser les problèmes à l'aide des informations très détaillées disponibles dans les rapports et les enregistrements de chargement de page de l'onglet Performances. La vaste gamme d'outils, de commutateurs et d'options sans fin est idéale pour les travaux d'optimisation plus exigeants.
• Rapport sur l'expérience utilisateur de Chrome. Dans le cadre de son rapport sur l'expérience des utilisateurs de Chrome (CrUX), Google présente des données de terrain provenant de plus de 18 millions de sites Web qui ont recueilli suffisamment de statistiques pour faire l'objet d'un rapport Web Vitals. Les données sont stockées dans le service BigQuery de Google, où il est possible d'effectuer des recherches sur les statistiques de ces sites web en remontant plusieurs années en arrière ; les mises à jour sont permanentes et disponibles le deuxième mardi de chaque mois, après accumulation, informe l'article. Pour voir les scores des appareils mobiles et de bureau en utilisant le rapport CrUX, nous aurons besoin de "phone" ou "desktop" comme facteurs de forme des appareils dans nos instructions SQL. Il est intéressant de noter que "mobile" ne fonctionne pas car il ne s'agit pas d'une colonne et que "tablette" ne fonctionnait à l'origine que rarement en raison de la rareté des données spécifiées. Les données des tablettes pouvaient être vues dans les requêtes pour l'origine (domaine) de Google, par exemple, mais nous ne les aurions pas vues pour les sites plus discrets.

Pour permettre aux développeurs de mesurer plus facilement les performances de ces mesures sur leurs sites, une bibliothèque JavaScript open source dédiée aux Web-vitals a également été publiée. Elle peut être utilisée avec n'importe quel fournisseur d'analyses prenant en charge les mesures personnalisées ou, alternativement, comme référence pour savoir comment capturer avec précision chacune des Web-vitals de base pour les utilisateurs de nos sites.

La différence entre les données de laboratoire et les données de terrain, les métriques de terrain et les métriques de laboratoire.

Dans son premier billet, Grigorik a également expliqué la distinction cruciale entre ce qu'on appelle les field data ou données de terrain (également souvent appelées Real User Monitoring car elles recueillent des informations sur les performances enregistrées par les utilisateurs dans le monde réel sur une variété de dispositifs et de conditions de réseau, collectées de manière anonyme) et les mesures en laboratoire.

Par choix, les Core Web Vitals sont essentiellement mesurables avec des mesures de terrain, bien que les données de laboratoire puissent également être utilisées. Les données de laboratoire (données de test contrôlées obtenues par une méthode scientifique et des mesures objectives qui peuvent être calculées dans un environnement contrôlé avec un certain niveau de précision et de répétabilité) restent le meilleur moyen de tester les performances des fonctionnalités pendant le développement, avant qu'elles ne soient mises à la disposition des utilisateurs, et de détecter les régressions de performances avant qu'elles ne se produisent.

Si les mesures en laboratoire sont donc un élément essentiel pour offrir des expériences de qualité, elles ne peuvent pas remplacer complètement les données de terrain, et Google explique pourquoi. Les performances d'un site peuvent varier considérablement en fonction des capacités de l'appareil de l'utilisateur, des conditions de son réseau, des autres processus en cours d'exécution sur l'appareil et de la manière dont il interagit avec la page.

En effet, chacun des scores de la métrique Core Web Vitals peut être affecté par l'interaction de l'utilisateur, de sorte que seule une mesure sur le terrain peut saisir avec précision l'image complète et fournir des informations exploitables.

Pour vraiment comprendre les métriques et les scores, il faut donc d'abord se familiariser avec les concepts de données de laboratoire et de données de terrain, un sujet sur lequel Detlef Johnson ouvre également une parenthèse utile.

Les données de "laboratoire" de Web Vitals sont collectées via l'API du navigateur, dans le cadre de l'événement de chargement de la page et des approximations mathématiques qui simulent l'interactivité de l'utilisateur. Au lieu de cela, les données "de terrain" sont constituées des mêmes mesures collectées à partir de l'expérience réelle des utilisateurs qui naviguent sur nos pages, les valeurs des minuteurs d'événements qui en résultent étant transmises à un référentiel.

Les conditions d'utilisation peuvent donner lieu à des scores extrêmement variables et les scores eux-mêmes peuvent littéralement changer au fur et à mesure que l'on navigue sur les pages. C'est pourquoi nous devons comprendre comment chaque score est calculé par rapport à un environnement donné et n'interpréter véritablement les résultats qu'après avoir déterminé si nous examinons des données de laboratoire ou de terrain.

Informations sur les instruments

Nous pouvons accéder aux données de laboratoire en temps réel à l'aide de PageSpeed Insights, WebPageTest, Chrome Dev Tools et d'une nouvelle extension du navigateur Chrome, "Web Vitals". PSI et WebPageTest calculent les scores à partir des événements de chargement des pages et évaluent les délais d'interactivité des pages en comptant les temps d'activité des scripts qui bloquent les threads.

Les outils de données de laboratoire sont incroyablement utiles dans le flux de production de rapports et de scores et "devraient faire partie de votre arsenal de référencement technique", conseille l'auteur.

La bibliothèque Web JavaScript Vitals peut être introduite dans le flux de travail et le pipeline de test ; disponible via CDN, la bibliothèque peut être incluse dans le HTML de production et écrite pour transmettre les données collectées sur le terrain de manière indépendante à l'endroit où nous voulons les comparer pour les rapports.

Lighthouse fournit divers points d'accès qui peuvent être utiles dans le flux de travail de développement et comprend de nombreux tests supplémentaires qui peuvent contribuer à garantir la conformité aux normes Web modernes et nous aider à déboguer les situations dans lesquelles nous rencontrons et résolvons des problèmes avec Web Vitals.

Comparaison des résultats de laboratoire avec les données de terrain

Les navigateurs modernes, à commencer par Chrome, mesurent la façon dont les utilisateurs expérimentent réellement notre site web dans la nature via une API JavaScript intégrée. Nous pouvons y accéder avec n'importe quel JavaScript ou choisir l'une des bibliothèques de Google modifiée pour répondre à nos besoins. Google collecte et, comme mentionné, affiche les données de terrain des utilisateurs de Chrome pour son rapport CrUX, et utilise parfois l'API du navigateur lui-même.

Il existe plusieurs façons d'accéder aux données CrUX ou de les afficher : nous pouvons utiliser des connecteurs de la sortie de BigQuery vers d'autres services Google pour générer des tableaux de bord, comme le connecteur par défaut pour DataStudio. Il est plus facile d'accéder aux données des champs lorsque le site est dans CrUX, après avoir vérifié la propriété dans Google Search Console, car le tableau de bord affiche les données des champs avec une interface qui nous permet d'approfondir avec des clics au lieu d'écrire des requêtes SQL. Nous pouvons aussi simplement utiliser l'outil PSI, qui fournit des données remontant à 28 jours maximum.

Dépannage des rapports Web Vitals

En raison de la nature dynamique de certaines données temporelles et de la manière dont elles sont collectées, nous devons toujours vérifier les données de laboratoire en corrélant les données de terrain afin de pouvoir corriger les divergences. Par exemple, les chargements successifs de pages peuvent faire varier les valeurs des résultats lors de l'utilisation de l'extension Web Vitals, et cela peut se produire pour deux raisons, explique Johnson.

Notre navigateur est capable d'assembler les ressources plus rapidement lors de l'actualisation grâce à l'utilisation de sa propre réserve de cache. De plus, l'extension peut accumuler des valeurs interactives au fur et à mesure de la navigation sur la page, ce qui permet d'approcher les données de terrain du monde réel, plutôt que de calculer un score en additionnant les temps de tâches de script bloquant les threads.

Pour obtenir des résultats locaux plus précis à l'aide de l'extension Web Vitals et de Chrome Dev Tools, il ne faut pas oublier d'effacer les données du cache ou de les contourner avec shift-refresh lorsque l'on se déplace rapidement avec le navigateur Web dans le flux de travail. Une autre astuce consiste à charger "about : blank" avant de commencer une session d'enregistrement de performance dans Dev Tools pour un nouveau départ du rapport.

Idéalement, les résultats obtenus en laboratoire et sur le terrain ne diffèrent pas trop sans raison valable. Chaque fois que des modifications importantes sont apportées, les résultats de laboratoire seront en avance sur les données de terrain. Cela signifie que si nous affichons des tests ratés sur le terrain et que nous avons dépassé les résultats en laboratoire, nous devons attendre que les données sur le terrain soient reprises ou envoyer les données sur le terrain à Analytics de manière indépendante pour les vérifier.

Comment gérer l'analyse des trois indicateurs ?

On pourrait imaginer que le score de données de terrain le plus difficile à émuler localement est celui de CLS, mais selon Johnson, ce n'est pas nécessairement vrai : nous pouvons en fait définir une option pour appliquer une superposition de Web Vitals à l'aide de l'extension Chrome où, en interagissant avec la page, nous regardons les scores changer au fur et à mesure de notre navigation.

Cette technique fonctionne également pour le FID : le score de cette métrique commence vide ; à la première interaction sur la page (clic, défilement ou saisie au clavier), les temps des activités de blocage du fil sont ajoutés à ce moment, qui devient le score.

Enfin, les informations extrêmement détaillées de Chrome Dev Tools nous permettent de résoudre les problèmes de CLS en détail grâce à l'enregistrement et à la lecture des performances. Nous devons rechercher la section "Expérience" qui joue les changements CLS dans l'enregistrement, et il y a aussi un réglage pour mettre en évidence les changements sur l'écran en utilisant un flash bleu qui entoure les éléments pendant qu'ils se déplacent et ajoutent à la partition.

La mesure des signaux Web essentiels selon Google

Martin Splitt, Developer Advocate de Google, est également intervenu sur le sujet : depuis son profil officiel sur Twitter, il a consacré une dizaine de tweets (recueillis sur seroundtable) à répondre à certaines demandes et doutes soumis par différents utilisateurs, notamment sur la méthode d'analyse de Google pour mesurer les Web Vitals.

Plus précisément, M. Splitt a expliqué que Googlebot, comme Lighthouse ou PageSpeed Insights lui-même, mesure les données de laboratoire, c'est-à-dire les données de performance hypothétiques d'un environnement pratiquement idéal. Il ne s'agit donc pas de données représentatives de ce que voient les véritables utilisateurs du site et des pages. Mais dans le rapport Web Vitals de la Google Search Console, il est possible de voir des métriques limitées (parce que toutes les URLs n'en ont pas forcément assez) mais un suivi rUM, c'est-à-dire basé sur le terrain, des utilisateurs réels.

Cela signifie également que des scores faibles dans cet outil signifient que des personnes réelles ont des difficultés avec les pages du site et que l'UX peut être médiocre, ce qui doit être travaillé. En conclusion, le Googler nous informe d'une nouvelle importante : l'évaluation de l'expérience des pages n'utilisera pas de données de laboratoire pour mesurer les Core Web Vitals (ou du moins, cette question n'est pas à l'ordre du jour).

Comment optimiser les vitales Web de base des pages du site ?

L'adaptation des sites aux métriques Core Web Vitals a été lente, malgré la pression exercée par Google - qui, comme nous l'avons mentionné, a inclus Core Web Vitals dans la mise à jour plus large de l'expérience des pages, faisant ainsi de LCP, FID et CLS des facteurs de classement officiels - et une étude américaine de novembre 2020 a révélé que moins de 15 % de l'échantillon analysé répondait aux critères de référence et dépassait les critères d'évaluation de l'expérience fournie aux utilisateurs.

Ce qui ressort de l'étude, c'est qu'actuellement les domaines les plus critiques semblent être LCP et CLS, et donc la vitesse et la stabilité de la disposition sont les aspects sur lesquels il faut concentrer les efforts et l'optimisation du site.

Pour le référencement, cependant, il y a aussi d'autres aspects à évaluer : même "si votre site ne répond pas aux critères des web vitals aujourd'hui, cela ne veut pas dire qu'il ne sera pas classé du tout", souligne un article de Matt Southern dans Search Engine Journal, car "la recherche est complexe et les Core Web Vitals ne sont que trois des nombreux facteurs que Google prend en compte pour classer les pages".

Ce qui reste prioritaire aujourd'hui, c'est le contenu, sa qualité et sa pertinence par rapport à la requête et à l'intention de recherche, car "une page plus pertinente l'emportera généralement sur une page plus rapide, mais au contenu moins pertinent", a souligné Southern.

Dans tous les cas, il est utile de disposer d'un certain nombre de conseils et d'astuces pour améliorer les performances des pages et adapter le site aux nouveaux facteurs de classement de Google.

Travail sur les signaux Web essentiels et mise à jour de la vitesse des pages

Un autre article approfondi paru dans Search Engine Journal (d'où sont tirées les images suivantes), rédigé par Rachel Costello, donne plus de détails sur les conseils d'optimisation des sites en vue de ce changement. Cet article identifie sept aspects de l'expérience de la page pour l'utilisateur sur lesquels il convient de concentrer notre attention, comme les moyens d'assurer un chargement visuel plus rapide et plus fluide, d'améliorer la convivialité mobile et de fournir une plus grande sécurité du site.

Les nouveaux facteurs de classement Page Experience

Tout d'abord, il convient de rappeler quels sont les différents éléments qui, à partir de juin 2021, contribuent à déterminer et à évaluer l'expérience globale d'une page, en prenant en considération

• Signaux web essentiels. Les trois principaux indicateurs de performance qui mesurent le chargement visuel, l'interactivité et la stabilité visuelle d'une page lors de son chargement pour les utilisateurs.
• Compatibilité avec les appareils mobiles. La capacité d'un site à être convivial pour les mobiles, et donc sa facilité d'utilisation et de navigation sur les appareils mobiles, y compris la lisibilité du contenu et si les liens et les éléments de la page sont cliquables et accessibles.
• HTTPS. Il s'agit de savoir si la connexion d'un site web est sécurisée et si le site est servi via le protocole HTTPS recommandé.
• Interstitiel non intrusif. Veille à ce que le contenu essentiel de la page ne soit pas obstrué par des interstitiels gênants pour les utilisateurs pendant la navigation.

7 étapes pour optimiser votre site pour le Page Experience

Voici donc les conseils de Rachel Costello pour nous préparer à l'événement de mai prochain. Mais ce n'est pas tout : l'amélioration de l'expérience sur la page peut avoir des effets positifs à court et à long terme, car elle permettra de garantir que nos utilisateurs vivent une expérience de qualité sur nos pages.

En fait, ce travail ne consiste pas seulement à satisfaire certains critères pour les moteurs de recherche, mais à essayer d'offrir les meilleures expériences possibles aux utilisateurs réels, ce qui devrait être un objectif prioritaire pour tout site.

Préchargement des ressources clés pour accélérer les temps de chargement des visuels

L'un des premiers indicateurs pour un utilisateur qu'une page est en train de se charger est l'apparition du contenu au-dessus du pli. C'est là qu'intervient le Largest Contentful Paint (LCP), la première métrique Core Web Vitals à mesurer la vitesse de chargement de l'élément principal de la page.

Pour identifier l'élément LCP d'une page, il suffit d'inspecter la page dans Chrome DevTools et d'afficher le graphique en cascade dans l'onglet Performances. Après avoir identifié l'élément, le même outil permet de visualiser facilement la progression visuelle de la vitesse de chargement, en profilant la page au fur et à mesure de sa progression et en fournissant une capture d'écran de son chargement au fil du temps.

Fonction "Captures d'écran" de Chrome DevTools

Cela nous permettra de connaître la vitesse de chargement des différents éléments de la page.

Pour accélérer le chargement de l'élément LCP et du contenu au-dessus du pli, Costello suggère d'envisager l'utilisation de méthodes telles que le préchargement pour indiquer au navigateur de récupérer ces ressources en priorité.

2. Optimiser l'activité du fil principal en minimisant les tâches longues

Il existe de nombreux problèmes différents en coulisses qui peuvent amener un utilisateur à attendre que le navigateur réponde après avoir cliqué ou tapé sur une page : c'est ce que mesure la deuxième mesure des Core Web Vitals, le délai de première entrée (FID).

Cela peut être une expérience frustrante pour les utilisateurs, mais il y a des choses que nous pouvons faire pour résoudre le problème et réduire le temps d'attente entre les interactions humaines et les réponses du navigateur.

Les taks longs sont l'un des "coupables" les plus courants de ce problème : il s'agit essentiellement de morceaux de code JavaScript qui bloquent le fil principal pendant une longue période et font que la page se bloque et ne répond pas.

Les tâches longues dans Chrome DevTools se trouvent en haut du graphique en cascade dans l'onglet Principal et sont mises en évidence par un triangle rouge ; en cliquant sur une tâche longue et en allant dans l'onglet Bottom-Up, nous verrons les différentes tâches qui ont eu lieu dans la tâche, comme la compilation et l'analyse des scripts, décomposées.

La correction requise variera en fonction des tâches contribuant aux blocs de threads principaux, mais une solution courante pour résoudre les tâches longues consiste à diviser le code et les scripts de traitement en blocs plus petits.

3. Réservez un espace pour le chargement des images et des éléments intégrés

La troisième mesure des Core Web Vitals, le Cumulative Layout Shift (CLS), examine la quantité de changement de disposition visuelle d'une page lors de son chargement et mesure un aspect frustrant de l'UX que nous avons probablement tous expérimenté : nous avons l'intention de cliquer sur un lien particulier, mais la page se déplace et nous finissons par cliquer accidentellement sur une autre zone de la page.

L'une des causes les plus courantes d'un score CLS élevé, et donc d'une mauvaise ergonomie, est de ne pas réserver d'espace pour le chargement des images et des ressources intégrées.

Dans l'exemple fourni dans l'article, la fonction de capture d'écran de Chrome DevTools dans l'onglet Performances montre "que la bannière de consentement au cookie BBC Weather n'a pas d'espace alloué pour le chargement" ; par conséquent, une fois chargée, elle "repousse le contenu visible plus bas dans le viewport autour de la marque des 3 secondes". Il faut plutôt prévoir de l'espace dans la structure de la page, de sorte que sa disposition reste inchangée même après la fin du chargement de la ressource.

4. Veillez à ce que les principaux modèles de page soient adaptés aux mobiles

Le trafic mobile ayant dépassé le volume des ordinateurs de bureau en 2016, il est devenu essentiel de veiller à ce que les sites web soient optimisés pour les appareils mobiles avec lesquels un nombre croissant d'utilisateurs naviguent effectivement.

La mise en page et la convivialité d'un site web sur un appareil mobile peuvent décider du sort de l'expérience utilisateur : par exemple, dit M. Costello, "les utilisateurs doivent pouvoir voir le contenu important de manière claire et accessible, sans avoir à zoomer."

Il existe deux méthodes principales pour évaluer la convivialité d'un site Web sur les appareils mobiles : la première consiste à surveiller le rapport sur la convivialité mobile dans Google Search Console (qui signale les problèmes tels que le contenu qui ne s'adapte pas à l'écran et le texte qui est trop petit, et nous montre une liste d'URL affectées pour chaque problème) et à exécuter des modèles de pages clés dans le test d'optimisation mobile de Google, qui est un bon moyen de vérifier les pages individuelles.

5. Faire un audit pour la sécurité du site

Outre les performances de chargement et la facilité d'utilisation sur les appareils mobiles, la sécurité du site joue également un rôle dans la détermination de l'expérience de la page.

Google s'efforce de "veiller à ce que les sites web présentés dans les SERPs soient sûrs pour les utilisateurs, sans risque de problèmes de sécurité" tels que les logiciels malveillants, les logiciels indésirables, le phishing et les contenus trompeurs.

Un moyen simple de vérifier si notre site présente des problèmes susceptibles de mettre les utilisateurs en danger est le rapport sur les problèmes de sécurité dans Google Search Console.

6. Vérifiez que les formulaires et les ressources intégrées sont servis via HTTPS.

L'intégration de HTTPS comme signal d'expérience de page est un autre moyen pour Google de garantir la sécurité des utilisateurs lors de leur navigation.

La publication de contenu nécessitant une interaction et une saisie de l'utilisateur via une connexion HTTP non sécurisée présente un risque pour les utilisateurs et les rend (ainsi que leurs données) plus vulnérables.

Il est particulièrement utile de s'en souvenir pour les formulaires où les utilisateurs saisissent des informations personnelles, comme les caisses où les informations de paiement sont partagées.

Un audit de sécurité du référencement nous permet de vérifier ces problèmes. Il faut vérifier si le site a un "contenu mixte", c'est-à-dire un contenu contenant une combinaison de ressources de page servies à la fois par HTTP et HTTPS.

7. Vérifiez que les interstitiels n'entravent pas le contenu essentiel.

Si un site comporte des interstitiels intrusifs qui occupent beaucoup d'espace sur une page et empêchent les utilisateurs d'accéder au contenu important, cela peut créer des expériences négatives et frustrantes.

L'examen manuel des pages sur différents appareils ou encore l'utilisation de la fonction de capture d'écran de Chrome DevTools nous permettent de visualiser l'impact des interstitiels sur nos utilisateurs.

Notre objectif doit être d'éviter de perturber l'expérience de navigation des utilisateurs : nous pouvons envisager de revoir la conception des fenêtres pop-up et des interstitiels afin qu'ils n'entravent pas le contenu important de la page, ainsi que de prendre des mesures pour que les gens n'aient pas à fermer manuellement ces publicités afin de poursuivre leur parcours sur le site.

L'étude sur les Core Web Vitals et les sites : six mois après l'annonce peu d'attention

Revenant aux données de la première étude sur l'application des Core Web Vitals six mois après leur introduction, Southern révèle que seul "un pourcentage décidément faible de sites web est capable de passer une évaluation Core Web Vitals dans PageSpeed Insights".

Pour être précis, si l'on considère les critères de Google dans leur ensemble, seuls "12 % des résultats sur les appareils mobiles et 13 % sur les ordinateurs de bureau ont réussi l'évaluation", bien que les performances des sites soient un peu meilleures "lorsqu'il s'agit de respecter les critères pour un seul facteur".
Plus précisément, en ce qui concerne First Input delay, "99 % des URL pour ordinateurs de bureau et 89 % des URL pour téléphones mobiles respectent le critère des 100 millisecondes", ce qui "est bon signe pour les utilisateurs, car cela signifie qu'ils pourront interagir immédiatement avec presque toutes les pages sur lesquelles ils arrivent".

Les deux autres critères sont plus problématiques : pour Largest Contentful Paint, "43 % des URL mobiles et 44 % des URL de desktop passent l'évaluation" et chargent donc le contenu principal en moins de 2,5 secondes. Pour le Cumulative Layout Shift, "46 % des URL mobiles et 47 % des URL de bureau dépassent la note de 0,1".

Cela signifie donc que "la plupart des pages sur lesquelles les utilisateurs atterrissent mettent plus de 2,5 secondes à se charger et présentent des changements de mise en page inattendus", offrant ainsi une expérience sous-optimale aux utilisateurs, qui doivent "attendre qu'une page se charge pendant que le contenu se déplace de haut en bas de l'écran".

Core Web Vitals : toujours en 2022, seul 1 site sur 5 passe tous les seuils

La mise à jour ultérieure de l'analyse de Milestone Research sur les Core Web Vitals, qui, en août 2022, a fait le point sur le taux réel de dépassement des critères de référence, confirme que ce qui était censé être une "révolution algorithmique" - une mise à jour capable de bouleverser les classements et de mesurer, pour la première fois, les véritables performances des sites en les transformant en facteurs de classement - a pour l'instant eu un impact moins rugueux que prévu.

Le chiffre qui ressort immédiatement est que seuls 20 % des sites dépassent les seuils minimaux fixés par Google et garantissent une excellente expérience utilisateur selon des critères de qualité basés sur la mesure précise d'aspects essentiels des performances techniques d'un site.

En fait, la plupart des sites ne semblent pas travailler en priorité à l'amélioration de ces paramètres, et selon Milestone, il n'y a pas eu d'amélioration majeure dans les secteurs étudiés, ce qui conduit au chiffre (plutôt décourageant) selon lequel, en juin 2022, seuls 19 % des sites étudiés sont vraiment prêts pour les trois CWV.

En d'autres termes, seul un site sur cinq examiné par l'étude dépasse les seuils fixés par Google pour les trois mesures qui composent les Core Web Vitals, à savoir le Largest Contentful Paint (LCP), le First Input Delay (FID) et le Cumulative Layout Shift (CLS), qui examinent et mesurent respectivement les réponses des pages en matière de vitesse de chargement, d'interactivité et de stabilité visuelle.

Comme nous le savons, ces "Core Web Vitals" s'appliquent à toutes les pages Web, peuvent (et doivent) être mesurées par tous les propriétaires de sites et sont contrôlables par divers outils Google. Chacune d'entre elles représente un aspect distinct de l'expérience utilisateur, est mesurable sur le terrain et reflète l'expérience réelle d'un résultat essentiel centré sur l'utilisateur.

Recherche de Milestone sur les CWV : les sites sont encore loin d'être performants et conviviaux.

Pour faire le point sur l'application réelle des CWV, Milestone Inc. a exploré environ 1 000 sites et 331 000 pages de sites actifs dans des secteurs tels que les services financiers, les entreprises B2B, les soins de santé, les hôtels, les restaurants et l'industrie manufacturière, en recueillant des données de performance sur toutes les pages du site.

La moyenne a été calculée et mesurée par rapport à la norme de performance recommandée pour le LCP, le FID et le CLS, et les sites ont été classés en trois catégories : rapide, moyen et lent pour chacun des trois paramètres ; les résultats agrégés ont ensuite été calculés pour obtenir une classification globale, avec les notes possibles de Bon, Besoin d'amélioration ou Inférieur à l'objectif.

D'une manière générale, les experts américains ont été plutôt surpris de constater que la part des sites Core Web Vitals pleinement satisfaits avait en fait diminué depuis l'analyse d'octobre 2021 du même échantillon de sites web : cela signifie qu'en un peu plus de six mois, certains sites qui répondaient à la norme ne sont plus conformes à Core Web Vitals, signe d'un manque de mesure et de maintenance constantes des sites en question.

Toutefois, on constate une amélioration significative pour la plupart des sites web dans le premier tableau de contenu (qui n'est cependant pas un CVW).

Parmi les facteurs les plus fréquemment à l'origine de problèmes de performances figurent : l'ajout de nouveaux contenus non optimisés sur le site web, tels que des images et des vidéos, le javascript et les pixels de suivi de tiers, les messages pop-up ou les animations qui créent du mouvement, ou encore les processus back-end, tels que la personnalisation, qui réduisent la vitesse de chargement.

Plus précisément, le rapport révèle que 62 % des sites ont connu des changements de présentation du contenu cumulatif bons ou minimes sur 90 % ou plus de leurs pages, soit une baisse de cinq points par rapport à octobre 2021 ; en y regardant de plus près, nombre de ces sites semblent bénéficier de conceptions simples utilisant des images statiques, sans vidéos ni fenêtres contextuelles.

Le First Contentful Paint et le Largest Contentful Paint sont les paramètres pour lesquels l'examen a révélé les améliorations les plus significatives : moins de 1 % des sites ont chargé tout le contenu primaire en moins d'une seconde, et seulement 41 % ont commencé à charger le FCP sur 75 % des pages en moins d'une seconde ; par rapport au LCP, cependant, 28 % des sites ont chargé le contenu en moins de 2,5 secondes.

Enfin, les choses vont un peu mieux en ce qui concerne l'interactivité des pages, puisque 98 % des sites ont enregistré un délai acceptable de première saisie inférieur à 0,1 seconde.

Core Web Vitals, un facteur de classement atténué

Une analyse de la diffusion réelle des Core Web Vitals est également fournie par Advancedwebranking, qui a réalisé une étude sur un échantillon de sites beaucoup plus important qu'auparavant (3 millions de pages Web provenant des 20 premiers résultats de recherche de Google) afin de déterminer l'influence de la performance des pages sur le classement dans la recherche organique de Google, ainsi que la corrélation la plus forte entre les paramètres des Core Web Vitals et le classement en première page.

En résumé, le rapport constate que :

• Plus le classement sur Google est élevé, plus les métriques LCP sont faibles.
• Seules 39 % des pages web analysées ont satisfait aux critères de mesure de Core Web Vitals, tandis que les 61 % restants étaient en dessous du seuil.
• 80 % des pages qui ont passé le test Core Web Vitals sur le desktop l'ont également passé sur les appareils mobiles.
• Les Core Web Vitals sont un facteur de classement, mais pas aussi important que les liens, le contenu ou l'intention de recherche.

Si l'on part du principe que, comme c'est souvent le cas en matière de référencement, il n'est pas possible d'établir une corrélation entre certains facteurs et le classement réel dans Google et que "corrélation ne signifie pas causalité" (c'est-à-dire que ce n'est pas parce que deux choses sont corrélées que l'une cause l'autre), il y a néanmoins quelques éléments sur lesquels il faut s'attarder.

En ce qui concerne le LCP - qui, pour garantir une bonne expérience utilisateur, doit intervenir dans les 2,5 secondes suivant le début du chargement de la page - aucune des 3 millions de pages échantillonnées n'avait un LCP moyen inférieur à 2,5 secondes, mais (fait intéressant) les graphiques pour les mobiles et les ordinateurs de bureau montrent clairement que "plus la position sur Google est élevée, plus le LCP est faible".

Les choses s'améliorent, encore une fois, lorsqu'on analyse le FID (où le bien est de 100 millisecondes ou moins), car toutes les pages testées parviennent à atteindre l'objectif ; toutefois, notent les experts, la différence des valeurs du FID entre les 20 premières positions n'est pas si grande et il n'y a pas de corrélation claire entre le FID et le classement.

Il est difficile d'évaluer l'effet du CLS (qui doit être égal ou inférieur à 0,1 pour une bonne expérience utilisateur) sur le classement, car il semble y avoir une légère tendance visuelle montrant que les classements dans les premières positions ont un CLS inférieur, mais la différence entre les valeurs du CLS n'est pas assez importante pour justifier une corrélation claire.

Dans l'ensemble, selon l'étude d'Advancedwebranking, les Core Web Vitals ne constituent pas un facteur de classement clé sur Google, mais peuvent devenir importantes lorsque les pages concurrentes dans la recherche obtiennent de bons résultats pour tous les autres facteurs pertinents. Reprenant certaines des remarques de John Mueller, les experts expliquent donc que les CWV sont encore plus qu'un facteur de départage (un élément qui rompt la balance toutes choses égales par ailleurs) et qu'ils servent aussi à évaluer s'il y a des obstacles éventuels sur le chemin des utilisateurs, car ils considèrent l'utilisabilité de votre site après son classement (lorsque les gens le visitent effectivement) :

si nous obtenons plus de trafic grâce aux efforts de référencement mais que le taux de conversion est faible, ce trafic ne sera pas aussi utile qu'il pourrait l'être. En général, ce sont précisément des éléments de l'expérience utilisateur ou de la vitesse qui influent sur le taux de conversion, de sorte que l'analyse des CWV et la correction des zones à problème "constituent un excellent moyen de reconnaître et de quantifier les désagréments courants des utilisateurs".

Metadosi optimise votre site pour les Core Web Vitals

Si certains disent et tentent de démontrer que les Core Web Vitals ne sont pas un facteur de référencement, il est certain, et nous l'avons démontré plusieurs fois, qu'en optimisant vos Core Web Vitals pour le mobile, vous y gagnerez en classement.

Contactez-nous en ligne ou par téléphone au 09 73 88 45 37, afin d'optimiser votre site internet pour les Web Core Vitals, d'améliorer l'expérience utilisateur, et de gagner des classements en Top 3 et première page de Google.