Optimisation pour INP, la nouvelle métrique Core Web Vitals

Google a remplacé First Input Delay (FID) par une nouvelle métrique Core Web Vitals appelée Interaction to Next Paint (INP). Ce changement vise à mieux mesurer la réactivité d'un site Web et l'expérience utilisateur globale.

Cet article explique ce qu'est l'INP, pourquoi il a remplacé le FID, comment vérifier le score INP de votre site et diverses techniques pour améliorer l'INP et améliorer la réactivité du site Web.

Qu’est-ce que l’interaction avec Next Paint (INP) ?

Google utilise INP pour évaluer la réactivité globale de votre site. Si vous cliquez sur un menu déroulant et qu'il y a un retard à son ouverture, cette latence montre une mauvaise réactivité et est liée à l'INP.

S'il y a des problèmes avec INP, l'expérience utilisateur en souffre car l'utilisateur peut continuer à cliquer sur le menu de votre site en attendant une réponse.

INP est le temps qu'il faut entre l'interaction initiale de l'utilisateur et le moment où l'image suivante sur le site est peinte.

Pourquoi l'INP a-t-il remplacé le FID ?

Google avait précédemment annoncé que l'INP remplacerait le FID car ce dernier était une mesure qui avait ses limites, que les référenceurs connaissaient. INP est la « nouvelle itération » du FID dans le sens où il mesurera la réactivité d'un site de manière plus complète.

Votre rapport Google Search Console n'affichera plus FID. Les propriétaires de sites devraient, comme ils le font depuis longtemps, se concentrer sur l’amélioration de l’expérience utilisateur.

Vos Core Web Vitals ne représentent qu'une petite partie du référencement d'un site, mais c'est l'un des domaines sur lesquels vous devriez consacrer du temps à l'optimisation, car cela peut faire une grande différence (par exemple, les conversions).

Un site qui fonctionne bien, qui se charge et répond rapidement, surpassera un site similaire où l'expérience utilisateur est médiocre.

Comment vérifier l'INP de votre site

Vous pouvez vérifier l'INP d'un site de deux manières :

Console de recherche Google
Informations sur la vitesse de page

Aller vers Search Console > Expérience > Éléments essentiels du Web. Si vous souhaitez exécuter PageSpeed Insights vous-même, accédez à PageSpeed Insights. Entrez l'URL ou le domaine que vous souhaitez vérifier et appuyez sur le bouton Analyser bouton.

Accédez au Bureau et vous verrez l'INP du site répertorié. L'INP est de 50 ms, il est donc toujours dans le vert et n'a pas besoin d'être optimisé.

Vous pouvez juger si l'INP a besoin d'être optimisé sur votre site en fonction de son score :

> 200 ms est « Bon ».
200 ms à 500 ms « à améliorer ».
< 500 ms est « médiocre ».

PageSpeed Insights vous permettra d'afficher des rapports que vous pouvez filtrer pour trouver des recommandations pour améliorer l'INP de votre site. Si vous vous êtes concentré sur le FID dans le passé, vous constaterez que bon nombre des améliorations que vous avez apportées aideront également l'INP du site.

Suivez les recommandations du rapport pour essayer d'améliorer l'INP de votre site.

Vous pouvez également mettre en œuvre certaines optimisations INP de base que tous les sites devraient intégrer pour vous concentrer davantage sur la réactivité et garantir que l'expérience utilisateur reste élevée.

Optimisation INP : comment commencer

Concentrez-vous sur ce qui manque à votre site dans le rapport et sur la résolution des problèmes connus avant d'adopter une approche « taille unique ». Si le JavaScript de votre site ne pose pas de problème pour le moment, concentrez-vous sur ce qui affecte vos utilisateurs.

JavaScript représente le nombre de sites qui passent du statique au interactif. Si votre site utilise intensément JavaScript, vous devriez commencer par l’optimiser. Vous souhaiterez peut-être travailler avec votre équipe de développement, car la correction des scripts peut devenir complexe.

Voici quelques tâches de base qui vous aideront certainement :

Utilisez un réseau de diffusion de contenu (CDN) pour améliorer les temps de chargement des fichiers et réduire votre INP de quelques millisecondes.
Réduisez également tous vos fichiers JavaScript et CSS. Les fichiers plus petits se chargent plus rapidement et contribueront à accélérer l'INP.

Tâches longues

Les tâches longues sont considérées comme celles dont le traitement prend plus de 50 ms. Votre navigateur dispose d'une « tâche principale » qui ne peut traiter qu'une seule tâche à un moment donné. Si le traitement de votre JavaScript prend plus de 50 ms, toutes les autres tâches sont mises en attente jusqu'à ce que le processus soit arrêté.

Que pouvez-vous faire?

Divisez ces longues tâches en exécutions beaucoup plus petites afin qu'elles prennent moins de temps à exécuter et à traiter.

Web.dev a un super guide sur ce long sujet, mais l'idée est simple :

Divisez les appels à plusieurs méthodes en plusieurs fonctions. JavaScript traite toutes les fonctions comme une seule tâche, donc si vous avez 10 sous-fonctions dans une fonction principale, la fonction principale se transformera rapidement en une longue tâche.
Différez l'exécution du code, ce qui nécessitera l'aide d'un développeur si vous ne savez pas déjà comment procéder.
Créez un planificateur d'API dédié, décrit dans le guide lié ci-dessus.

Si tu utilises setTimeout et requestIdleCallbackvous pouvez également diviser les tâches longues en tâches plus courtes.

Préparation à la saisie

Vous souhaitez que votre site soit prêt à recevoir les entrées des utilisateurs et qu'il réponde le plus rapidement possible. Une façon de procéder consiste à différer le code comme dans la section précédente ou à utiliser des écouteurs d'événements passifs.

Réduire la cause des problèmes INP

Les problèmes INP sont difficiles à identifier, mais il existe des outils que vous pouvez utiliser pour vous aider à diagnostiquer les problèmes. J'expérimente toujours de nouveaux outils pour identifier les problèmes avec INP, mais les suivants fonctionnent bien :

Surveillance des utilisateurs réels (RUM)

Le RUM est quelque chose que vous devriez utiliser à votre avantage, surtout si vous gérez des sites de commerce électronique. Les interactions lentes semblent être beaucoup plus fréquentes dans la sphère du commerce électronique que sur les sites de contenu.

Les outils qui peuvent vous aider avec RUM sont :

Outils de développement de Chrome

Si vous êtes un utilisateur de Chrome, les DevTools (appuyez sur F12 sur PC) peuvent vous aider. Vous aurez envie d'aller à Performance et Commencer l'enregistrement. À partir de là, accédez à un élément interactif sur le site et la performance sera enregistrée.

L'outil peut vous aider à mieux comprendre la cause d'un retard sur le site et à déterminer comment y remédier.

Surveillez périodiquement la Search Console ou PageSpeed Insights de votre site pour rester au courant de votre INP.

Étant donné qu'une optimisation JavaScript approfondie est requise, si le site sur lequel vous travaillez utilise du JavaScript étendu, travaillez avec un développeur pour l'optimiser.

Les opinions exprimées dans cet article sont celles de l’auteur invité et ne sont pas nécessairement celles de Search Engine Land. Les auteurs du personnel sont répertoriés ici.