Vos outils de développement préférés peuvent désormais mesurer les Core Web Vitals.
Récemment annoncé, le projet Signaux Web regroupe des indicateurs de qualité qui sont essentiels pour que tous les sites offrent une expérience utilisateur de qualité. Nous avons le plaisir d'annoncer que tous les outils populaires de Google pour les développeurs Web sont désormais compatibles avec la mesure des Core Web Vitals, ce qui vous permet de diagnostiquer et de résoudre plus facilement les problèmes liés à l'expérience utilisateur. Cela inclut Lighthouse, PageSpeed Insights, les outils pour les développeurs Chrome, la Search Console, l'outil de mesure de web.dev, l'extension Chrome Web Vitals et une nouvelle API (!) Chrome UX Report.
La recherche Google utilise désormais les métriques Core Web Vitals comme base pour évaluer l'expérience sur la page. Il est donc important que ces métriques soient aussi disponibles et exploitables que possible.
Pour commencer à optimiser l'expérience utilisateur avec les Core Web Vitals, essayez le workflow suivant:
- Utilisez le nouveau rapport Core Web Vitals de la Search Console pour identifier les groupes de pages qui requièrent votre attention (en fonction des données réelles).
- Une fois que vous avez identifié les pages à retravailler, utilisez PageSpeed Insights (fourni par Lighthouse et rapport d'expérience utilisateur Chrome) pour diagnostiquer les problèmes de laboratoire et de terrain sur une page. PageSpeed Insights (PSI) est disponible via la Search Console. Vous pouvez également saisir une URL directement sur PSI.
- Prêt à optimiser votre site en local lors de l'atelier ? Utilisez Lighthouse et Chrome DevTools pour mesurer les Core Web Vitals et obtenir des conseils pratiques sur les problèmes à corriger. L'extension Chrome Signaux Web peut vous fournir une vue en temps réel des métriques sur ordinateur.
- Vous avez besoin d'un tableau de bord personnalisé des métriques Core Web Vitals ? Utilisez le tableau de bord CrUX mis à jour ou la nouvelle API Chrome UX Report pour les données réelles, ou l'API PageSpeed Insights pour les données de laboratoire.
- Besoin d'aide ? web.dev/measure peut mesurer votre page et vous proposer un ensemble de guides et d'ateliers de programmation classés par ordre de priorité, pour l'optimisation, à l'aide des données PSI.
- Enfin, utilisez Lighthouse CI avec les demandes d'extraction pour vous assurer qu'il n'y a pas de régressions dans Core Web Vitals avant de déployer une modification en production.
Avec cette introduction, examinons les mises à jour spécifiques à chaque outil !
Phare
Lighthouse est un outil d'audit automatisé de site Web qui aide les développeurs à diagnostiquer les problèmes et à identifier les possibilités d'amélioration de l'expérience utilisateur sur leurs sites. Il mesure plusieurs dimensions de la qualité de l'expérience utilisateur dans un environnement de laboratoire, y compris les performances et l'accessibilité. La dernière version de Lighthouse (6.0, publiée mi-mai 2020) comprend des audits supplémentaires, de nouvelles métriques et un nouveau score de performances.
Lighthouse 6.0 introduit trois nouvelles métriques dans le rapport. Deux de ces nouvelles métriques, Largest Contentful Paint (LCP) et Cumulative Layout Shift (CLS), sont des implémentations expérimentales des Core Web Vitals et fournissent des informations de diagnostic importantes pour optimiser l'expérience utilisateur. Étant donné leur importance pour évaluer l'expérience utilisateur, les nouvelles métriques ne sont pas seulement mesurées et incluses dans le rapport, mais elles sont également prises en compte dans le calcul du score de performance.
La troisième nouvelle métrique incluse dans Lighthouse, le Total Blocking Time (TBT), fonctionne en adéquation avec la métrique de champ First Input Delay (FID), une autre métrique des métriques Core Web Vitals. En suivant les recommandations fournies dans le rapport Lighthouse et en optimisant vos scores en fonction de vos scores, vous pouvez offrir la meilleure expérience possible à vos utilisateurs.
Tous les produits de Lighthouse sont mis à jour pour refléter la dernière version, y compris Lighthouse CI, qui vous permet de mesurer facilement vos Core Web Vitals sur les demandes d'extraction avant de les fusionner et de les déployer.
Pour en savoir plus sur les dernières mises à jour de Lighthouse, consultez notre article de blog Nouveautés de Lighthouse 6.0.
PageSpeed Insights
PageSpeed Insights (PSI) génère des rapports sur les performances en laboratoire et sur le terrain d'une page sur les appareils mobiles et les ordinateurs. Cet outil fournit un aperçu de l'expérience des utilisateurs réels sur la page (en s'appuyant sur le rapport d'expérience utilisateur Chrome) et un ensemble de recommandations concrètes sur la façon dont le propriétaire d'un site peut améliorer l'expérience sur la page (fourni par Lighthouse).
PageSpeed Insights et l'API PageSpeed Insights ont également été mis à niveau pour utiliser Lighthouse 6.0 en arrière-plan. Ils permettent désormais de mesurer les métriques Core Web Vitals dans les sections "Lab" et "Field" du rapport. Les métriques Core Web Vitals sont annotées avec un ruban bleu, comme illustré ci-dessous.
Si la Search Console offre aux propriétaires de sites un aperçu complet des groupes de pages qui requièrent leur attention, l'outil PSI permet d'identifier les opportunités d'amélioration de l'expérience sur chaque page. Dans PSI, vous êtes en mesure de voir clairement en haut du rapport si votre page atteint ou non les seuils d'une bonne expérience pour l'ensemble des Core Web Vitals, indiquant qu'elle passe l'évaluation Core Web Vitals ou ne passe pas l'évaluation Core Web Vitals.
CrUX
Le rapport d'expérience utilisateur Chrome (CrUX) est un ensemble de données public rassemblant des données sur l'expérience utilisateur réelle sur des millions de sites Web. Il mesure les versions réelles de toutes les métriques Core Web Vitals. Contrairement aux données de test, les données CrUX proviennent d'utilisateurs qui ont accepté de participer sur le terrain. Ces données permettent aux développeurs de comprendre la répartition des expériences utilisateur réelles sur leurs propres sites Web ou même sur ceux de concurrents. Même si vous n'avez pas de RUM sur votre site, CrUX peut vous permettre d'évaluer rapidement et facilement vos Core Web Vitals. L'ensemble de données CrUX sur BigQuery comprend des données détaillées sur les performances de toutes les métriques Core Web Vitals et est disponible sous forme d'instantanés mensuels au niveau de l'origine.
La seule façon de connaître les performances réelles de votre site pour vos utilisateurs est de mesurer ses performances sur le terrain lorsque les utilisateurs le chargent et interagissent avec celui-ci. Ce type de mesure est communément appelé « Real User Monitoring » (ou RUM en abrégé). Même si vous n'avez pas de RUM sur votre site, CrUX peut vous permettre d'évaluer rapidement et facilement vos Core Web Vitals.
Présentation de l'API CrUX
Aujourd'hui, nous avons le plaisir d'annoncer le lancement de l'API CrUX, qui vous permet d'intégrer rapidement et sans frais vos workflows de développement avec des mesures de la qualité au niveau de l'origine et de l'URL pour les métriques de champ suivantes:
- Largest Contentful Paint
- Cumulative Layout Shift
- First Input Delay
- First Contentful Paint
Les développeurs peuvent effectuer une requête sur une origine ou une URL, et segmenter les résultats selon différents facteurs de forme. L'API est mise à jour quotidiennement et récapitule les données des 28 derniers jours (contrairement à l'ensemble de données BigQuery, qui est agrégé tous les mois). Les quotas d'API publiques assouplis sont également identiques à ceux de notre autre API, l'API PageSpeed Insights (25 000 requêtes par jour).
Vous trouverez ci-dessous une démonstration de l'utilisation de l'API CrUX pour visualiser les métriques Core Web Vitals, avec des répartitions pour les bonnes, les améliorations et les mauvaises:
Dans les prochaines versions, nous prévoyons de développer l'API pour permettre l'accès à d'autres dimensions et métriques d'ensembles de données CrUX.
Nouvelle version du tableau de bord CrUX
Le nouveau tableau de bord CrUX vous permet de suivre facilement les performances d'une origine au fil du temps. Vous pouvez désormais l'utiliser pour surveiller la distribution de toutes les métriques Core Web Vitals. Pour commencer à utiliser le tableau de bord, consultez notre tutoriel sur web.dev.
Nous avons lancé une nouvelle page de destination Core Web Vitals pour vous permettre de consulter plus facilement les performances de votre site en un coup d'œil. N'hésitez pas à nous faire part de vos commentaires sur l'ensemble des outils CrUX. Pour nous faire part de vos commentaires et de vos questions, contactez-nous via le compte Twitter @ChromeUXReport ou le groupe Google.
Panneau "Performances des outils pour les développeurs Chrome"
Déboguer les événements de décalage de mise en page dans la section "Expérience"
Le panneau Performances des outils pour les développeurs Chrome comporte une nouvelle section Expérience qui peut vous aider à détecter les décalages de mise en page inattendus. Cela vous permet de détecter et de résoudre les problèmes d'instabilité visuelle sur votre page qui contribuent au Cumulative Layout Shift.
Sélectionnez un décalage de mise en page pour afficher ses détails dans l'onglet Résumé. Pour voir à quel moment le décalage s'est produit, passez la souris sur les champs Déplacé vers et Déplacé vers.
Aptitude à interagir avec le débogage avec "Total Blocking Time" dans le pied de page
La métrique "Total Blocking Time" (TBT) peut être mesurée dans les outils d'atelier et constitue un excellent indicateur du First Input Delay. La fonctionnalité "TBT" mesure la durée totale entre le First Contentful Paint (FCP) et le Time to Interactive (TTI), pendant lesquelles le thread principal a été bloqué suffisamment longtemps pour empêcher la réactivité aux entrées. Les optimisations de performances visant à améliorer la conversion en temps réel en laboratoire devraient améliorer le FID sur le terrain.
La fonctionnalité est désormais affichée dans le pied de page du panneau Performances des outils pour les développeurs Chrome lorsque vous mesurez les performances d'une page:
- Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
- Cliquez sur l'onglet Performances.
- Cliquez sur Enregistrer.
- Actualisez manuellement la page.
- Attendez que la page se charge, puis arrêtez l'enregistrement.
Pour en savoir plus, consultez Nouveautés des outils de développement (Chrome 84).
Search Console
Le nouveau rapport Core Web Vitals de la Search Console vous aide à identifier les groupes de pages de votre site qui requièrent votre attention, d'après des données réelles (de terrain) issues de CrUX. Les performances des URL sont regroupées par état, type de métrique et groupe d'URL (groupes de pages Web similaires).
Il s'appuie sur les trois métriques Core Web Vitals: LCP, FID et CLS. Si une URL ne comporte pas un volume minimal de données de rapport pour ces métriques, elle est omise du rapport. Essayez le nouveau rapport afin d'obtenir une vue globale des performances pour votre origine.
Une fois que vous avez identifié un type de page présentant des problèmes liés aux métriques Core Web Vitals, vous pouvez utiliser PageSpeed Insights pour obtenir des suggestions d'optimisation spécifiques pour les pages représentatives.
web.dev
https://pagespeed.web.dev/ vous permet de mesurer les performances de votre page au fil du temps grâce à une liste de guides et d'ateliers de programmation classés par ordre de priorité. Ses mesures sont fournies par PageSpeed Insights. L'outil de mesure est désormais également compatible avec les métriques Core Web Vitals, comme indiqué ci-dessous:
Extension Signaux Web
L'extension Web Vitals mesure les trois métriques Core Web Vitals en temps réel pour Google Chrome (sur ordinateur). Cette approche est utile pour détecter les problèmes dès le début du workflow de développement et comme outil de diagnostic pour évaluer les performances des Core Web Vitals lorsque vous naviguez sur le Web.
Vous pouvez désormais installer l'extension depuis le Chrome Web Store. Nous espérons qu'il vous sera utile. N'hésitez pas à nous faire part de vos contributions pour l'améliorer, ainsi que de vos commentaires sur le dépôt GitHub du projet.
Sélection
C'est terminé ! Ce que vous pouvez faire ensuite :
- Utilisez Lighthouse dans les outils de développement pour optimiser votre expérience utilisateur et vous assurer que vous avez toutes les cartes en main pour utiliser efficacement les Core Web Vitals sur le terrain.
- Utilisez PageSpeed Insights pour comparer les performances des Core Web Vitals en laboratoire et sur le terrain.
- Essayez la nouvelle API Chrome User Experience Report pour connaître facilement les performances de votre origine et de votre URL par rapport aux métriques Core Web Vitals au cours des 28 derniers jours.
- Utilisez la section Experience et le pied de page du panneau Performances des outils de développement pour examiner en détail les métriques Core Web Vitals et effectuer des débogages.
- Utilisez le rapport Core Web Vitals de la Search Console pour obtenir un résumé des performances de vos origines sur le terrain.
- Utilisez l'extension Web Vitals pour suivre les performances d'une page par rapport aux Core Web Vitals en temps réel.
Nous aborderons plus en détail nos outils Core Web Vitals sur le site web.dev Live en juin. Inscrivez-vous pour recevoir des informations sur l'événement !
~ par Elizabeth et Addy, WebPerf Janitors