Découvrez les dernières informations de PageSpeed Insights pour vous aider à mieux mesurer et optimiser la qualité de vos pages et de votre site.
Au fil des ans, PageSpeed Insights (PSI) est devenu une source unique pour les données de terrain et les données de test. Elle intègre les informations des diagnostics de rapport d'expérience utilisateur Chrome (CrUX) et Lighthouse pour fournir des insights permettant d'améliorer les performances de votre site Web.
Aujourd'hui, nous sommes heureux de vous annoncer le lancement d'une nouvelle version de PSI. Bien qu'il s'agisse d'un élément essentiel de notre suite d'outils de vitesse, la base de code PSI avait 10 ans, contenait beaucoup de code ancien et devait être remaniée. Nous en avons profité pour résoudre les problèmes liés à l'interface dans PSI, qui empêchaient parfois les utilisateurs de parcourir le rapport. Nos principaux objectifs étaient les suivants:
- Rendez l'interface utilisateur plus intuitive en différenciant clairement les données issues d'un environnement synthétique et celles collectées auprès des utilisateurs sur le terrain.
- Indiquez clairement dans l'interface utilisateur comment l'évaluation Core Web Vitals est calculée.
- Modernisez l'interface de PSI à l'aide de Material Design.
Cet article présente les nouvelles fonctionnalités de PSI, qui seront lancées dans le courant de l'année.
Nouveautés
La refonte de l'interface utilisateur PSI vise à améliorer la présentation des données du rapport, et à ajouter de la clarté et de la précision aux données disponibles dans le rapport. La nouvelle interface utilisateur vise à être plus intuitive et aide les développeurs à découvrir rapidement des informations sur les performances de leurs pages en fonction des ateliers et des champs. Voici les principales modifications apportées à l'interface utilisateur:
Séparation claire des données de terrain et de test
Nous avons modifié l'interface utilisateur pour distinguer clairement les données réelles des données de test. Les libellés "Données réelles" et "Données de test" ont été remplacés par un texte indiquant leur signification et leur utilité. Nous avons également remonté la section "Données de champ". Le score de performance habituellement basé sur les ateliers, actuellement affiché en haut, a été déplacé dans la section des données de laboratoire pour éviter toute ambiguïté sur l'origine du score.
Évaluation Core Web Vitals
Le résultat de l'évaluation Core Web Vitals, qui apparaissait auparavant sous la forme d'un seul mot "réussi" ou "échoué" dans les données de champ, se présente désormais sous la forme d'une sous-section distincte avec une icône distincte.
Notez que le processus d'évaluation des métriques Core Web Vitals reste inchangé. Les métriques Core Web Vitals FID, LCP et CLS peuvent être agrégées au niveau de la page ou de l'origine. Pour les agrégations comportant suffisamment de données dans les trois métriques, l'agrégation réussit l'évaluation Core Web Vitals si les 75e centiles des trois métriques sont satisfaisants. Sinon, l'agrégation échoue à l'évaluation. Si les données FID de l'agrégation sont insuffisantes, elle réussira l'évaluation si les 75e centiles du LCP et du CLS sont satisfaisants. Si le LCP ou le CLS comporte des données insuffisantes, l'agrégation au niveau de la page ou de l'origine ne peut pas être évaluée.
Libellés pour les performances sur mobile et ordinateur
Nous avons modifié le menu de navigation situé en haut et inclus des liens pour les mobiles et les ordinateurs de manière centralisée sur la page du rapport. Les liens sont désormais facilement visibles et indiquent clairement la plate-forme pour laquelle les données sont affichées. Cela a également contribué à rendre la barre de navigation plus propre.
Résumé de l'origine
Le résumé de l'origine, qui fournit le score CrUX agrégé pour toutes les pages depuis l'origine, s'affiche actuellement en cliquant sur une case à cocher. Nous avons déplacé cette section du rapport vers un nouvel onglet, "Origine", sous la section "Données de champ".
Autres informations utiles
Le rapport comprend désormais une nouvelle section d'informations en bas de chaque champ, ainsi qu'une fiche d'atelier présentant les informations suivantes sur les échantillons de données:
- Période de collecte des données
- Durées des visites
- Appareils
- Connexions réseau
- Taille de l'échantillon
- Versions de Chrome
Ces informations doivent améliorer la distinction entre les données de test et réelles, et aider les utilisateurs qui ne savaient pas encore exactement quelles étaient les différences entre les deux sources de données (atelier et champ).
Développer la vue
Nous avons une nouvelle fonctionnalité "Développer la vue" qui ajoute une fonction d'analyse détaillée à la section des données de champ et vous permet d'afficher des détails précis sur les métriques Core Web Vitals.
Image de la page
Nous avons supprimé l'image de la page chargée, qui s'affiche juste à côté des données de champ. L'image et les vignettes de la page affichant la séquence de chargement seront toutes deux disponibles dans la section des données de l'atelier.
Pour accéder à la documentation produit à jour, consultez https://developers.google.com/speed/docs/insights/.
Mises à jour de web.dev/measure
Pour réduire les incohérences entre les différents outils de notre boîte à outils d'optimisation des performances, nous mettons également à jour web.dev/measure afin qu'il soit directement alimenté par l'API PageSpeed Insights.
Auparavant, les développeurs généraient des rapports à l'aide de l'outil PSI et de /measure, et voyaient des chiffres Lighthouse différents. L'une des principales raisons de ces différences était que tous les tests de /measure ont été effectués aux États-Unis (car elle disposait auparavant d'un backend cloud basé aux États-Unis).
En appelant directement la même API que l'UI PSI, les développeurs bénéficient d'une expérience plus cohérente lorsqu'ils utilisent PSI et /measure. Nous avons également apporté quelques ajustements à cette métrique en fonction de la façon dont les utilisateurs se servent de l'outil. Cela signifie que l'expérience de connexion pour /measure va disparaître, mais que la fonctionnalité la plus utilisée (qui voit plusieurs catégories) restera disponible.
PSI aujourd'hui
Prenons un peu de recul et examinons ce que propose le rapport PageSpeed Insights actuel. Le rapport PSI inclut des données sur les performances des appareils mobiles et des ordinateurs dans des onglets individuels, et suggère comment améliorer une page. Dans chaque cas, les principaux composants du rapport sont similaires et se composent des éléments suivants:
Score de performance:le score de performances apparaît en haut du rapport PSI et résume les performances globales de la page. Ce score est déterminé en exécutant Lighthouse pour collecter et analyser les données de test concernant la page. Un score de 90 ou plus est considéré comme bon, un score de 50 à 90 doit être amélioré, et un score inférieur à 50 est un résultat médiocre.
Données réelles:les données réelles issues de l'ensemble de données du rapport CrUX fournissent des informations sur l'expérience utilisateur réelle. Les données incluent des métriques telles que First Contentful Paint (FCP) et des métriques Core Web Vitals (First Input Delay (FID), Largest Contentful Paint (LCP) et Cumulative Layout Shift (CLS). Outre les valeurs des métriques, vous pouvez également voir la répartition des pages pour lesquelles la valeur d'une métrique spécifique était "Bonne", "Amélioration nécessaire" ou "Médiocre", indiquée par des barres vertes, orange et rouges, respectivement. La distribution et les scores sont affichés en fonction des chargements de page pour les utilisateurs de l'ensemble de données CrUX. Les scores sont calculés pour les 28 derniers jours et ne sont pas disponibles pour les nouvelles pages qui ne disposent pas de suffisamment de données utilisateur réelles.
Origin Summary (Résumé de l'origine) : les utilisateurs peuvent cocher la case Show Origin Summary (Afficher le résumé de l'origine) pour afficher le score cumulé des métriques de toutes les pages diffusées depuis la même origine au cours des 28 derniers jours.
Données d'atelier:le score de performance de l'atelier, calculé à l'aide de Lighthouse, permet de déboguer les problèmes de performances, car il est collecté dans un environnement contrôlé. Le rapport indique les performances à l'aide de métriques telles que First Contentful Paint, Largest Contentful Paint, Speed Index, Cumulative Layout Shift, Time to Interactive et Total Blocking Time. Chaque métrique est évaluée et libellée avec une icône indiquant "Bon", "Amélioration nécessaire" ou "Médiocre". Cette section fournit une bonne indication des goulots d'étranglement qui affectent les performances de la version préliminaire. Elle peut aider à diagnostiquer les problèmes, mais peut ne pas tenir compte de problèmes réels.
Audits:cette section liste tous les audits exécutés par Lighthouse ainsi que les audits réussis, ainsi que les possibilités d'amélioration et des informations de diagnostic supplémentaires.
Défis liés à la conception actuelle de l'infrastructure PSI
Comme le montre la capture d'écran ci-dessus, les différents points de données des données de test et de terrain ne sont pas clairement isolés, et les développeurs qui débutent avec PSI risquent de ne pas comprendre facilement le contexte des données ni la marche à suivre. Cette confusion a donné lieu à de nombreux articles de blog expliquant comment déchiffrer le rapport PSI.
Avec cette refonte, nous espérons faciliter l'interprétation du rapport pour les développeurs afin qu'ils passent rapidement de la génération du rapport PSI à l'action sur les informations qu'il contient.
En savoir plus
Pour en savoir plus sur les mises à jour des outils de gestion des performances, regardez le discours d'ouverture du Chrome Dev Summit 2021. Nous vous informerons de la date de sortie de PSI et des modifications apportées à web.dev/measure.
Nous remercions Milica Mihajlija, Philip Walton, Brendan Kenny et Ewa Gasperowicz pour leurs commentaires sur cet article.