INP : la métrique de réactivité des Core Web Vitals

INP (Interaction to Next Paint) mesure la réactivité d’une page : le délai entre un clic, un toucher ou une frappe au clavier et l’affichage du résultat. Il a remplacé FID dans les Core Web Vitals en mars 2024. Voici comment il se calcule, comment le mesurer et d’où viennent les mauvais scores.

INP en bref

Selon web.dev, INP observe toutes les interactions d’une visite et retient la plus lente, en écartant les valeurs aberrantes sur les pages très interactives (une interaction sur 50 est ignorée). La valeur publiée correspond au 75e centile des visites réelles. Les seuils :

• 200 ms ou moins : bon ;
• entre 200 et 500 ms : à améliorer ;
• plus de 500 ms : mauvais.

Quel poids pour le référencement ?

Les Core Web Vitals font partie des signaux d’expérience de page que Google prend en compte, mais ils ne remplacent pas la pertinence du contenu. Un bon INP est d’abord une question d’expérience utilisateur : une page qui se fige après un clic fait partir les visiteurs, quel que soit son classement.

Comment le mesurer

• PageSpeed Insights : les données de terrain (si votre site a assez de trafic) et un diagnostic de laboratoire ;
• Search Console, rapport « Signaux Web essentiels », pour repérer les groupes de pages concernés ;
• Chrome DevTools, onglet Performance, pour voir quelles tâches bloquent le fil principal au moment d’un clic.

Les 5 causes les plus fréquentes

1. Des scripts tiers chargés de façon synchrone

Tag Manager, pixels publicitaires, cartes de chaleur, pop-ups, widgets de chat. Passez en async ou defer tout ce qui n’est pas indispensable, et supprimez ce qui ne sert plus.

2. De longues tâches JavaScript

Toute tâche de plus de 50 ms bloque la réponse aux interactions. Découpez les gros scripts et différez le travail non urgent.

3. Des gestionnaires d’événements trop lourds

Un menu qui recalcule de nombreux éléments à chaque clic, par exemple. Préférez le CSS quand c’est possible.

4. Le « layout thrashing »

Alterner rapidement lectures et écritures du DOM force le navigateur à recalculer la mise en page à chaque fois. Groupez les lectures, puis les écritures.

5. L’hydratation des frameworks JavaScript

Sur les sites Next.js, Nuxt ou Astro, l’hydratation côté client peut rendre la page peu réactive pendant les premières secondes ; l’hydratation partielle limite le problème.

Sur WordPress

Les corrections pas à pas, dans l’ordre où les appliquer, sont détaillées dans les 7 corrections INP pour WordPress.