Core Web Vitals affiche les trois indicateurs sur lesquels Google se classe – LCP, CLS et INP – mesurés en direct sur la page que vous consultez, évalués par rapport aux seuils de Google et remontés à l'élément exact derrière chaque chiffre.
Core Web Vitals décide en partie du classement de vos pages, mais les méthodes habituelles pour les mesurer sont délicates. Les outils de laboratoire enregistrent une charge synthétique que personne ne subit. La Search Console signale les utilisateurs réels, avec quatre semaines de retard, regroupés dans des compartiments d'URL. Ni l’un ni l’autre ne vous indique quel élément de la page devant vous pose problème.
Cet outil mesure la page que vous consultez réellement, au fur et à mesure que vous l'utilisez. LCP, CLS et INP reçoivent chacun une vignette avec sa valeur, une note Bon, Nécessite du travail ou Mauvais par rapport aux seuils publiés par Google, et une barre indiquant où vous vous situez. FCP et TTFB sont à leurs côtés pour le contexte, car un LCP lent provoqué par un serveur lent est un problème différent de celui provoqué par une image lourde.
Les définitions correspondent à ce que Chrome rapporte à CrUX, ce qui est important si vous avez l'intention de comparer les chiffres avec la Search Console. CLS utilise des fenêtres de session (une fenêtre se termine après un intervalle d'une seconde ou après cinq secondes, et la pire fenêtre l'emporte) plutôt que d'additionner naïvement chaque équipe. INP est le 98e percentile de vos latences d'interaction, ce qui, pour une visite normale, est tout simplement l'interaction la plus lente. LCP cesse de changer dès votre première interaction, exactement comme le fait Chrome.
Plus utilement, chaque numéro est attribué. Le panneau nomme l'élément de peinture le plus grand, les éléments qui se sont déplacés et les interactions les plus lentes, et un bouton Afficher fait défiler jusqu'à l'un d'entre eux et le décrit sur la page. Au lieu de savoir que CLS est de 0,31, vous voyez la bannière qui pousse votre contenu vers le bas. Le rapport de copie vous remet le tout sous forme de texte pour un ticket.
Les trois mesures de classement se mettent à jour au fur et à mesure que vous utilisez la page : faites défiler les mouvements CLS, cliquez et tapez move INP. Chacun est noté Bon, Nécessite du travail ou Mauvais par rapport aux seuils de Google.
Nomme l'élément de peinture le plus grand, les éléments qui se sont déplacés et les interactions les plus lentes. Appuyez sur Afficher pour faire défiler jusqu'à l'un d'entre eux et le décrire directement sur la page.
CLS utilise des fenêtres de session avec un écart de 1 s et une limite de 5 s, INP est le 98e centile des latences d'interaction et LCP se fige à la première interaction – de sorte que vos chiffres s'alignent sur ceux de la Search Console.
First Contentful Paint et Time To First Byte se situent à côté des trois grands, vous pouvez donc distinguer un serveur lent d'une image de héros lourde avant de commencer à optimiser la mauvaise chose.
Répertorie vos interactions les plus lentes avec le type d'événement et l'élément impliqué, de sorte qu'une liste déroulante ou un filtre lent puisse être trouvé au lieu de deviner.
Un clic copie chaque métrique, note et sélecteur incriminé sous forme de texte brut, prêt à être collé dans un ticket, une pull request ou un e-mail client.
Confirmez que LCP, CLS et INP sont dans le vert sur un nouveau modèle avant sa mise en ligne, plutôt que de le découvrir depuis la Search Console un mois plus tard.
La Search Console vous indique qu'un groupe d'URL échoue au CLS ; ouvrez-en un avec cet outil et voyez exactement quel élément effectue le déplacement.
Faites défiler la page et regardez CLS grimper, puis appuyez sur Afficher pour décrire l'annonce, la bannière ou la police Web à chargement tardif qui déplace votre contenu.
Cliquez sur les filtres, les menus et les modaux, puis lisez la liste des interactions les plus lentes pour trouver quel contrôle coûte des centaines de millisecondes.
Enregistrez les chiffres, déployez le correctif, puis mesurez à nouveau la même page et comparez les deux rapports côte à côte.
Cliquez sur l'icône Core Web Vitals dans le dock DevSuite Pro. Les tuiles métriques apparaissent immédiatement en utilisant tout ce que la page a déjà enregistré.
LCP n'a de sens qu'à partir du début du chargement d'une page, alors rechargez avec le panneau ouvert lorsque vous souhaitez une lecture fiable.
Faites défiler toute la page pour exercer CLS, puis cliquez, appuyez et tapez pour générer des mesures INP. Les tuiles se mettent à jour au fur et à mesure.
Appuyez sur Afficher à côté de l'élément LCP, d'une source de changement de disposition ou d'une interaction lente. La page y défile et le décrit afin qu'il n'y ait aucune ambiguïté quant à l'élément responsable.
Cliquez sur Copier le rapport pour obtenir un résumé en texte brut de chaque mesure, note et sélecteur. Appuyez sur Réinitialiser pour redémarrer CLS et INP à partir de zéro.
Installez DevSuite Pro gratuitement et débloquez plus de 71 outils de développement pour votre navigateur.
