La métrique "Interaction to Next Paint" est désormais une métrique Core Web Vitals stable qui remplace le First Input Delay.
C'est le jour J ! Après des années de travail, nous sommes enfin prêts à faire de l'Interaction to Next Paint (INP) une métrique Core Web Vitals stable. Cela représente une avancée significative dans la façon dont nous mesurons la réactivité des interactions et comble de nombreuses lacunes du FID (First Input Delay).
Dans ce post, nous allons récapituler rapidement ce qui change aujourd'hui, définir un calendrier plus précis pour l'abandon et la suppression du FID des outils Chrome, et partager quelques ressources pour vous aider à détecter et à résoudre les problèmes INP.
Ce qui change aujourd'hui
Du côté de Chrome, tous nos outils Core Web Vitals refléteront désormais l'état stable d'INP, le cas échéant. Par exemple, des outils tels que PageSpeed Insights, le tableau de bord CrUX et l'extension Web Vitals afficheront plus clairement INP dans le trio de métriques Core Web Vitals. Dans PageSpeed Insights, la logique d'évaluation Core Web Vitals évalue les performances INP plutôt que le FID. Pour en savoir plus sur les modifications correspondantes apportées à la Search Console, consultez cet article de blog de l'équipe Search Console.
De plus, à compter d'aujourd'hui, certains outils peuvent afficher un avis d'abandon concernant le FID, indiquant que cette métrique ne constitue plus une métrique Core Web Vitals et qu'elle sera supprimée. La section Calendrier d'abandon du FID ci-dessous décrit les dates à prendre en compte pour vous assurer que vous n'avez plus besoin de FID.
Calendrier d'abandon de FID
Maintenant que INP a remplacé FID en tant que métrique Core Web Vitals, Chrome abandonne officiellement la prise en charge du FID. Cela signifie que les outils Chrome ne garantiront plus la disponibilité de FID et les développeurs auront jusqu'au 9 septembre 2024 pour effectuer la transition vers INP.
Ce point est particulièrement important pour les utilisateurs des API Chrome User Experience Report (CrUX) ou PageSpeed Insights. Les applications qui traitent les données FID à partir de l'une de ces API doivent être transférées vers INP d'ici le 9 septembre pour éviter toute interruption ou interruption de service. Nous tenons à préciser qu'il s'agira d'une modification destructive des dernières versions des API et que les numéros de versions majeures n'augmenteront pas.
Ressources pour optimiser INP
Que vous consultiez INP pour la première fois ou que vous soyez un pro de la réactivité, la collection de ressources d'optimisation INP est un excellent point de départ pour trouver ce que vous cherchez. Cette collection de documents permanents couvre tous les sujets : la définition de la métrique elle-même, les techniques permettant de la mesurer localement et avec des utilisateurs réels, des conseils pratiques pour optimiser divers cas d'utilisation, ainsi qu'une liste d'études de cas concrets illustrant les conseils en action.
À l'aide de ces documents, voici un workflow général que vous pouvez suivre pour trouver et résoudre les problèmes INP sur votre site:
Familiarisez-vous avec la façon dont INP mesure la réactivité aux interactions des utilisateurs dans la documentation canonique d'INP.
Examinez les données utilisateur réelles pour évaluer les performances INP de votre site. Pour être considérées comme satisfaisantes, au moins 75% des expériences INP doivent répondre à une entrée utilisateur en moins de 200 millisecondes. Si votre site dispose déjà d'un bon INP, pas de panique !
Connectez votre URL à PageSpeed Insights ou consultez le rapport Core Web Vitals dans la Search Console, si votre site Web fait partie de l'ensemble de données CrUX.
Vérifiez auprès de votre fournisseur de solution d'analyse s'il prend en charge la surveillance INP.
Déployer votre propre solution INP à l'aide de web-vitals.js
Si nécessaire, instrumentez votre site de façon à recueillir des informations de diagnostic sur l'expérience utilisateur. Il s'agit de métadonnées importantes telles que l'élément de la page avec lequel l'utilisateur a interagi et la raison de sa lenteur, ainsi que d'autres données utiles. Ensemble, ces informations vous aideront à comprendre les principales possibilités d'amélioration.
Reproduire en local les interactions lentes à l'aide des outils pour les développeurs Chrome Cela vous aidera à voir exactement ce qui se passe sous le capot et quel est le code incriminé.
Optimisez votre code pour qu'il effectue le moins de travail possible tout en gérant une interaction utilisateur:
Mesurez vos modifications localement et surveillez vos expériences utilisateur réelles pour vous assurer que vos performances INP gagnent (et restent !) rapidement.
Nous espérons que ces conseils vous permettront d'optimiser l'INP. Si vous rencontrez des problèmes, vous pouvez toujours obtenir de l'aide en publiant une question associée au tag interaction-to-next-paint sur Stack Overflow.
Le lancement d'INP en tant que métrique Core Web Vitals remonte à longtemps, si l'on reprend notre premier article sur l'amélioration de la métrique de réactivité en 2021. Depuis, nous avons pris en compte tous les incroyables commentaires de la communauté et développé une métrique qui, selon nous, aidera les développeurs à améliorer l'expérience utilisateur dans une zone sous-représentée, et ainsi à améliorer le Web. Merci à tous pour votre aide dans l'élaboration de cette métrique, et tous vos efforts pour améliorer l'état de réactivité.