Interaction avec la peinture suivante (INP)

Interaction to Next Paint (INP) est une métrique qui mesure la rapidité avec laquelle un site internet répond aux interactions de l'utilisateur telles que les clics, les tapotements et les frappes au clavier. Le score indique le nombre de millisecondes qui s'écoulent entre le moment où un visiteur effectue une action et celui où le navigateur affiche un retour visuel. Depuis mars 2024, Google utilise l'INP comme mesure officielle de Core Web Vitals, en remplacement du First Input Delay (délai de première saisie). Un score INP faible signifie que votre site internet semble rapide, un score élevé provoque de la frustration et augmente la probabilité que les visiteurs abandonnent.

Comment fonctionne Interaction to Next Paint et ce qu'il mesure

INP mesure le délai d'interaction le plus long pendant toute la durée de la visite d'une page. Chaque fois qu'un visiteur clique, tape ou appuie sur une touche, le navigateur lance une série d'actions : traitement de l'événement, exécution de JavaScript, ajustement du DOM et redessin de l'écran. INP prend en compte le temps écoulé entre l'action de l'utilisateur et le moment où l'image suivante devient visible. Google ne prend pas en compte le délai moyen, mais le 75e centile de toutes les interactions : le score obtenu par 75 % de vos visiteurs. Un score inférieur à 200 millisecondes est bon, un score compris entre 200 et 500 millisecondes devrait être meilleur, un score supérieur à 500 millisecondes est mauvais. Dans la pratique, pour les sites web de PME, nous observons souvent des scores compris entre 300 et 800 millisecondes, en particulier sur mobile et pour les pages contenant beaucoup de JavaScript.

Pourquoi Google a introduit INP et remplacé First Input Delay

Le délai de première entrée ne mesurait que la toute première interaction sur une page et ne tenait compte que du temps de traitement, et non du retour d'information visuel. Cela donne une image incomplète : un visiteur peut cliquer 10 fois et obtenir une réponse lente neuf fois, mais le score FID reste vert. INP mesure toutes les interactions au cours de la visite et prend en compte le cycle complet jusqu'à ce que le navigateur affiche quelque chose. Cette mesure est donc beaucoup plus représentative de la vitesse perçue. Google a annoncé ce changement en 2022 et a officiellement intégré l'INP dans le Core Web Vitals en mars 2024. Les sites web qui obtiennent de bons résultats à l'INP bénéficient d'une légère amélioration de leur classement ; les mauvais résultats peuvent coûter des visiteurs et des conversions.

Qu'est-ce qui fait un bon score INP pour les sites web des PME ?

Un faible score INP garantit que votre site internet est intuitif. Les visiteurs cliquent sur un bouton et obtiennent immédiatement un retour, ce qui leur permet de garder confiance et de passer à l’étape suivante. Pour les boutiques en ligne, nous constatons qu’une amélioration de 400 à 180 millisecondes peut réduire le taux d’abandon dans le processus de commande de 8 à 12 %. Pour les sites internet B2B comportant des formulaires ou des configurateurs, un bon INP est essentiel : si un visiteur sélectionne une option et qu’aucune réaction visible ne se produit, il pense que le site internet est en panne. Une stratégie SEO bien pensée tient toujours compte des Core Web Vitals, car Google intègre la vitesse et l’expérience utilisateur dans son classement. Vous pouvez surveiller votre score INP via Google Search Console et PageSpeed Insights, qui vous fournissent également des suggestions concrètes d’amélioration pour chaque page.

L’INP est particulièrement utile pour les pages où les visiteurs effectuent activement des actions : remplir des formulaires, filtrer des produits, ouvrir des menus ou faire défiler du contenu. Voici quatre situations concrètes dans lesquelles l’INP fait la différence entre une expérience fluide et un site internet lent et frustrant.

Boutiques en ligne avec filtres et configuration des produits

Dans une boutique en ligne, les visiteurs utilisent des filtres pour sélectionner des produits par taille, couleur, prix ou stock. Chaque clic sur une option de filtre déclenche un JavaScript qui met à jour la liste des produits. Si cette mise à jour prend 600 millisecondes, la boutique en ligne semble lente et les visiteurs abandonnent. Un bon score INP inférieur à 200 millisecondes garantit que la nouvelle liste de produits s'affiche presque immédiatement. Pour les boutiques en ligne de 500 à 2 000 produits, nous constatons souvent que des bibliothèques JavaScript lourdes ou des requêtes de base de données non optimisées font grimper l'INP. En traitant les filtres côté serveur ou en appliquant un chargement paresseux, vous pouvez améliorer le score de 40 à 60 %. Cela se traduit directement par un plus grand nombre de visites sur les pages de produits et une meilleure conversion, car les visiteurs trouvent plus rapidement ce qu'ils recherchent.

Formulaires et pages de génération de leads

Sur les formulaires de contact, les demandes de devis ou les pages d'enregistrement, chaque entrée doit donner lieu à un retour d'information instantané : une coche pour un champ correctement rempli, un message d'erreur pour une adresse électronique incorrecte ou une infobulle pour un champ obligatoire. Si ce retour d'information n'apparaît qu'au bout de 400 millisecondes, le visiteur ne sait pas si sa saisie a été enregistrée et remplit le formulaire deux fois ou clique ailleurs. Un faible INP permet une validation instantanée et donne un sentiment de contrôle. Pour les sites web B2B dotés de formulaires en plusieurs étapes, nous constatons que l'amélioration du score INP de 500 à 180 millisecondes augmente le nombre de formulaires remplis de 15 à 20 %. Techniquement, vous y parvenez en effectuant la validation côté client à l'aide de scripts légers et en ne chargeant le tracking tiers lourd qu'après la soumission.

Sites internet mobiles avec menus hamburger et accordéons

Sur mobile, les visiteurs tapent sur un menu hamburger, un menu déroulant ou un accordéon pour voir plus de contenu. Si le menu ne s'ouvre qu'au bout de 500 millisecondes, ils tapent à nouveau et s'irritent. Un bon score INP inférieur à 200 millisecondes garantit l'ouverture immédiate du menu. Les navigateurs mobiles ont souvent une puissance de calcul inférieure à celle des ordinateurs de bureau, de sorte que les interactions nécessitant l'utilisation de JavaScript prennent plus de temps. En utilisant des animations CSS au lieu d'animations JavaScript et en ralentissant les scripts tiers avec async ou defer, vous pouvez réduire l'INP sur mobile de 30 à 50 %. Cet aspect est crucial, car plus de 60 % des visiteurs de sites web de PME viennent par le biais de mobiles et Google indexe les sites en priorité sur les mobiles.

Tableaux de bord et applications avec données en temps réel

Dans les tableaux de bord ou les applications web, les utilisateurs cliquent sur des onglets, des graphiques ou des filtres de date pour visualiser les données. Si le graphique n'est actualisé qu'au bout de 700 millisecondes, l'application semble peu maniable et les utilisateurs ont moins confiance dans les données. Un INP faible garantit que l'interface est instantanément réactive, même pour des calculs complexes. Dans la pratique, nous constatons que les tableaux de bord avec beaucoup de données à récupérer et à rendre ont souvent des scores INP supérieurs à 600 millisecondes. En préchargeant les données, en appliquant un défilement virtuel et en transférant les calculs lourds vers une API, vous pouvez faire baisser ce score. Cela améliore l'expérience de l'utilisateur et augmente la probabilité qu'il revienne chaque jour.

Quand Interaction to Next Paint est la bonne approche et quand elle ne l'est pas ?

L'INP s'applique à tout site internet sur lequel les visiteurs interagissent activement : en cliquant, en tapotant, en tapant ou en faisant défiler la page. Si votre site internet a un contenu essentiellement statique et peu d'éléments interactifs, le plus grand tableau de contenu ou le décalage cumulatif de la mise en page sont plus importants. Mais dès que vous avez des formulaires, des filtres, des menus ou des configurateurs, vous devez donner la priorité à l'INP. Vous améliorez votre score INP en optimisant JavaScript, en reportant les scripts tiers et en gérant les interactions côté serveur ou avec un code léger côté client. Commencez par les pages qui génèrent le plus de trafic et de conversions, car c'est là qu'une amélioration aura le plus d'impact.