Les Core Web Vitals ont été introduits il y a quelques semaines. Et auparavant, ils ne pouvaient être mesurés qu’à l’aide du rapport Chrome UX.
Avec l’annonce que Core Web Vitals sera incorporé dans l’algorithme de classement de Google après avoir fait de l’expérience utilisateur un facteur de ranking, Google ajoute des capacités de mesure à plusieurs de ses outils existants.
Pour commencer votre parcours d'optimisation de l’expérience utilisateur (UX) avec Core Web Vitals, essayez le flux de travail suivant :
- Utilisez le nouveau rapport “Signaux Web Essentiels” de la Search Console pour identifier les groupes de pages qui nécessitent une attention (basé sur les données sur le terrain).
- Une fois que vous avez identifié des pages qui ont besoin de travail, utilisez PageSpeed Insights (alimenté par Lighthouse et Chrome UX Report) pour diagnostiquer les problèmes de laboratoire et de terrain sur une page. PageSpeed Insights (PSI) est disponible via Search Console ou vous pouvez entrer une URL sur PSI directement.
- Prêt à optimiser votre site localement en laboratoire ? Utilisez Lighthouse et Chrome DevTools pour mesurer les “Core Web Vitals” et obtenir des conseils exploitables sur exactement ce qu’il faut corriger. L’extension Web Vitals Chrome peut vous donner une vue en temps réel des mesures sur ordinateur.
- Besoin d’un tableau de bord personnalisé des Signaux Web Essentiels (Core Web Vitals) ? Utilisez le tableau de bord CrUX (Chrome User Experience) mis à jour ou le nouvel API Chrome UX Report pour les données sur le terrain ou l’API PageSpeed Insights pour les données de laboratoire.
- Vous cherchez des conseils ? web.dev/measure peut mesurer votre page et vous montrer un ensemble de guides et de codes prioritaires pour l’optimisation, à l’aide des données PSI.
- Enfin, utilisez Lighthouse CI sur les demandes de traction pour vous assurer qu’il n’y a pas de régressions dans Core Web Vitals avant de déployer un changement à la production.
Avec Google Search maintenant inclus à Core Web Vitals comme la base pour évaluer l’expérience de page, il est important que ces mesures soient aussi disponibles et exploitables que possibles.
Voici plus d’informations sur chacun de ces 6 outils SEO de Google pour mesurer les signaux web essentiels dont se servira Google pour classer les sites dans ses résultats de recherche.
1. Google Search Console
Le nouveau rapport Signaux Web essentiels dans la Search Console vous aide à identifier des groupes de pages sur votre site qui nécessitent une attention, en fonction des données réelles (champ) de CrUX (Chrome User Experience).
Les performances de l’URL sont regroupées par groupe d’état, de type de métriques et d’URL (groupes de pages Web similaires).
Il y a donc un nouveau rapport "Signaux Web Essentiels" dans Google Search Console pour aider les propriétaires de sites à évaluer les pages sur un site entier.
Le rapport est basé sur les 3 mesures Core Web Vitals : LCP, FID et CLS.
Si une URL n’a pas une quantité minimale de données de déclaration pour ces mesures, elle est omise du rapport. Ce nouveau rapport permet donc d’obtenir une vue holistique des performances pour votre origine.
Une fois que vous identifiez un type de page qui a des problèmes connexes de “signaux web essentiels”, vous pouvez utiliser PageSpeed Insights pour en apprendre davantage sur les suggestions d’optimisation spécifiques pour les pages représentatives.
2. PageSpeed Insights
PageSpeed Insights (PSI) rend compte des performances en laboratoire et sur le terrain d’une page sur les appareils mobiles et de bureau.
L’outil de Google fournit un aperçu de la façon dont les utilisateurs du monde réel vivent la page (alimenté par le rapport Chrome UX) et un ensemble de recommandations exploitables sur la façon dont un propriétaire de site peut améliorer l’expérience de la page (fournie par Lighthouse).
PageSpeed Insights et l’API PageSpeed Insights ont également été mis à niveau pour utiliser Lighthouse 6.0 en arrière-plan et maintenant prendre en charge le rapport de la mesure de Core Web Vitals dans les sections laboratoire et sur le terrain !
Les Signaux Web essentiels sont annotés avec une bande bleue comme indiqué ci-dessous.
Bien que la Search Console offre aux propriétaires de sites un aperçu des groupes de pages qui ont besoin d’attention, PageSpeed Insights (PSI) aide à identifier les possibilités par page d’améliorer l’expérience de page.
Dans PSI, vous êtes en mesure de voir clairement si votre page atteint ou non les seuils pour une bonne expérience dans tous les Core Web Vitals en haut du rapport, indiqués par “passe l’évaluation” Core Web Vitals ou “ne passe pas l’évaluation” Core Web Vitals.
3. Lighthouse
Lighthouse est un outil automatisé d’audit de site Web qui aide les développeurs à diagnostiquer les problèmes et à identifier les possibilités d’améliorer l’expérience utilisateur de leurs sites.
Cet outil mesure plusieurs dimensions de la qualité de l’expérience utilisateur dans un environnement de laboratoire, y compris la performance et l’accessibilité.
La dernière version de Lighthouse (6.0, publiée mi-mai 2020) comprend des audits supplémentaires, de nouvelles mesures et une nouvelle partition de performance.
Deux de ces nouvelles mesures ajoutées sont Largest Contentful Paint (LCP) et Cumulative Layout Shift (CLS).
Ces mesures sont des implémentations en laboratoire des Signaux Web Essentiels et fournissent des informations diagnostiques pour optimiser l’expérience utilisateur.
La troisième nouvelle mesure — le temps de blocage total (TBT pour “Total Blocking Time”) — est dit être bien corrélée avec First Input Delay (FID), qui est une autre mesure de Core Vitals Web.
Tous les produits que Lighthouse alimente sont mis à jour pour refléter la dernière version 6.0.
4. Le rapport Chrome UX
Le Rapport Chrome UX (CrUX pour Chrome User Experience) est un ensemble de données publiques de données réelles sur l’expérience utilisateur sur des millions de sites Web. Il mesure les versions de terrain de tous les Signaux Web Essentiels.
Contrairement aux données de laboratoire, les données CrUX proviennent d’utilisateurs opt-in (volontaires parce qu’ayant activé) sur le terrain.
Grâce à ces données, les développeurs sont en mesure de comprendre la distribution d’expériences utilisateur du monde réel sur leurs propres sites Web ou même les sites Web de leurs concurrents.
Même si vous n’avez pas “RUM” (Real User Monitoring) sur votre site, le CrUX peut fournir un moyen rapide et facile d’évaluer vos signaux web essentiels.
L’ensemble de données CrUX sur BigQuery comprend des données granulaires de performance pour tous les Core Web Vitals et est disponible dans des instantanés mensuels au niveau de l’origine.
La seule façon de vraiment savoir comment votre site performe pour vos utilisateurs est de mesurer réellement ses performances sur le terrain au moment où ces utilisateurs chargent ou interagissent avec lui.
Ce type de mesure est communément appelé surveillance réelle des utilisateurs, ou RUM (Real User Monitoring) pour faire court. Même si vous n’avez pas de RUM sur votre site, CrUX peut fournir un moyen rapide et facile d’évaluer vos Core Web Vitals.
Également appelé CrUX, ce rapport est un ensemble de données publiques de données réelles d’expérience utilisateur sur des millions de sites Web. Le rapport Chrome UX mesure les versions de terrain de tous les Core Web Vitals, ce qui signifie qu’il rend compte des données réelles plutôt que des données de laboratoire.
Aujourd’hui, Google annonce aussi l’API CrUX, un moyen rapide et gratuit d’intégrer facilement vos flux de travail de développement avec l’origine et la mesure de qualité au niveau de l’URL pour les mesures des champ suivantes :
- Largest Contentful Paint (LCP)
- Cumulative Layout Shift (CLS)
- First Input Delay (FID)
- First Contentful Paint (FCP)
Voici une démo utilisant l’API CrUX pour visualiser les mesures des signaux web essentiels (Core Web Vitals) avec des distributions pour “Bon”, “Besoin d’amélioration”, et “Pauvres” :
Dans les versions futures, Google prévoit d’étendre l’API pour permettre l’accès à des dimensions et des mesures supplémentaires à l’ensemble de données CrUX.
Tableau de bord CrUX remanié
Le tableau de bord CrUX nouvellement redessiné vous permet de suivre facilement les performances d’une origine au fil du temps, et maintenant vous pouvez l’utiliser pour surveiller les distributions de toutes les mesures Core Web Vitals.
Pour commencer avec le tableau de bord, consultez le tutoriel sur web.dev.
Google a introduit une nouvelle page de destination de Core Web Vitals pour rendre encore plus facile de voir comment votre site performe en un coup d’œil.
5. Chrome DevTools
Le panneau Chrome DevTools Performance dispose d’une nouvelle section “Expérience” qui peut vous aider à détecter les changements de mise en page inattendus.
Ceci est utile pour trouver et résoudre les problèmes d’instabilité visuelle sur votre page qui contribuent à “Cumulative Layout Shift”.
L’outil web.dev/measure est un outil de mesure qui vous permet de mesurer les performances de votre page au fil du temps, en fournissant une liste priorisée de guides et de codes sur la façon de vous améliorer.
Sa mesure est alimentée par PageSpeed Insights. L’outil de mesure prend désormais en charge les mesures des “Signaux Web Essentiels”, comme indiqué ci-dessous :
Chrome DevTools a été mis à jour pour aider les propriétaires de sites à trouver et à résoudre les problèmes d’instabilité visuelle sur une page qui peut contribuer au Cumulative Layout Shift (CLS).
Sélectionnez un changement de mise en page pour afficher ses détails dans l’onglet “Résumé”. Pour visualiser où le changement lui-même s’est produit, survolez “Moved from” et “Moved Field”.
Chrome DevTools mesure également le temps de blocage total (TBT : Total Blocking Time), qui est utile lorsqu’il s’agit d’améliorer le FID.
TBT est maintenant montré dans le pied du panneau Chrome DevTools Performance lorsque vous mesurez les performances de la page.
Les optimisations de performance qui améliorent le TBT en laboratoire devraient également améliorer le First Input Delay (FID).
6. L’Extension Web Vitals
L’extension Web Vitals mesure les 3 mesures Core Web Vitals en temps réel pour (ordinateur) Google Chrome.
Ceci est utile pour connaître les problèmes dès le début de votre flux de travail de développement et comme un outil de diagnostic pour évaluer les performances de Core Web Vitals pendant que vous naviguez sur le Web.
L’extension est maintenant disponible pour installation à partir du Chrome Web Store !
Le rapport est basé sur les trois mesures Core Web Vitals : LCP, FID et CLS.
Les signaux web essentiels sont des signaux de qualité essentiels pour fournir de grandes UX sur le web (https://web.dev/vitals).
Cette extension mesure les Core Web Vitals, fournissant une rétroaction instantanée sur le chargement, l’interactivité et les mesures de changement de mise en page.
Elle est compatible avec la façon dont ces mesures sont mesurées par Chrome et signalées à d’autres outils Google (p. ex. Chrome User Experience Report, Page Speed Insights, Search Console).
Si une URL n’a pas une quantité minimale de données de déclaration pour ces mesures, elle est omise du rapport. Essayez le nouveau rapport pour obtenir une vue holistique des performances pour votre origine.
Une fois installée, l’extension affichera un “Badge” d’état désactivé jusqu’à ce que vous naviguiez vers une URL. À ce stade, elle mettra à jour le badge en “Vert” ou en “Rouge” selon que l’URL passe les seuils de mesures des signaux web essentiels.
Ce que vous avez à faire pour améliorer l’expérience utilisateur
- Utilisez Lighthouse dans DevTools pour optimiser votre expérience utilisateur et vous assurer que vous vous préparez pour réussir avec les Signaux Web Essentiels sur le terrain.
- Utilisez PageSpeed Insights pour comparer vos performances Core Web Vitals en laboratoire et sur le terrain.
- Essayez la nouvelle “API Chrome User Experience Report” pour accéder facilement à la performance de votre origine et de votre URL contre les “Core Web Vitals” au cours des 28 derniers jours.
- Utilisez la section “Expérience “et le footer dans le panneau “DevTools Performance” pour plonger en profondeur et déboquer des signaux web essentiels spécifiques.
- Utilisez le rapport “Signaux Web Essentiels” de la Search Console pour un résumé de la performance de vos origines sur le terrain.
- Utilisez l’extension “Web Vitals” pour suivre les performances d’une page par rapport à Core Web Vitals en temps réel.
Sources : Web.dev et Searchenginejournal
