INP : le nouvel indicateur des Core Web Vitals expliqué et comment l'optimiser
Depuis le 12 mars 2024, l'INP (Interaction to Next Paint) remplace le FID dans les Core Web Vitals de Google. Ce qu'il mesure, les seuils à respecter et les actions concrètes pour rendre votre site plus réactif.
par Jérémie Elbaz, Développeur Fullstack SEO & visibilité
Depuis le 12 mars 2024, les Core Web Vitals de Google ont un nouveau membre : l'INP, pour Interaction to Next Paint. Il remplace officiellement le FID (First Input Delay), comme Google l'a confirmé sur le blog web.dev. Si vous avez récemment ouvert le rapport « Signaux Web essentiels » de la Search Console et vu apparaître des URLs à améliorer, c'est probablement lui. Voici ce qu'il mesure et comment l'améliorer concrètement.
Que sont les Core Web Vitals ?
Les Core Web Vitals sont trois indicateurs définis par Google pour mesurer l'expérience vécue par les internautes sur une page. Ils sont calculés à partir de données réelles de navigation dans Chrome, au 75e centile : pour être « bon », un indicateur doit être respecté pour au moins 75 % des visites.
| Indicateur | Ce qu'il mesure | Bon | Mauvais |
|---|---|---|---|
| LCP (Largest Contentful Paint) | Vitesse d'affichage du contenu principal | ≤ 2,5 s | > 4 s |
| CLS (Cumulative Layout Shift) | Stabilité visuelle de la page | ≤ 0,1 | > 0,25 |
| INP (Interaction to Next Paint) | Réactivité aux interactions | ≤ 200 ms | > 500 ms |
Entre les deux seuils, l'indicateur est jugé « à améliorer ».
Qu'est-ce que l'INP mesure exactement ?
L'INP mesure le délai entre une interaction de l'utilisateur (un clic, un appui sur l'écran, une touche du clavier) et le moment où le navigateur affiche le résultat visuel de cette interaction. Il observe les interactions pendant toute la durée de la visite et retient l'une des plus lentes.
Concrètement, c'est la sensation de « site qui rame » : un bouton « Ajouter au panier » qui ne réagit pas tout de suite, un menu qui s'ouvre avec un temps de retard, un filtre de catalogue qui fige la page.
Pourquoi l'INP remplace-t-il le FID ?
Le FID ne mesurait que le délai avant le traitement de la première interaction. Il ignorait le temps de traitement lui-même, l'affichage du résultat et toutes les interactions suivantes. Beaucoup de sites obtenaient un bon FID tout en étant peu réactifs à l'usage. L'INP est plus exigeant, et plus représentatif.
Google a aussi indiqué que le FID serait retiré de ses outils, avec une transition à achever d'ici le 9 septembre 2024 pour ceux qui l'exploitent via ses API.
Les trois phases d'une interaction
Google décompose chaque interaction en trois temps, utiles pour savoir où agir :
- Le délai d'entrée : le navigateur est occupé à autre chose (souvent un script) et ne peut pas traiter le clic immédiatement.
- Le temps de traitement : l'exécution du code JavaScript déclenché par l'interaction.
- Le délai de présentation : le temps nécessaire au navigateur pour recalculer la mise en page et afficher la nouvelle image.
L'INP a-t-il un impact sur le référencement ?
Les Core Web Vitals font partie des signaux d'expérience de page que Google prend en compte. Leur poids reste limité face à la pertinence du contenu : un site rapide mais peu utile ne passera pas devant une page qui répond mieux à la question. En revanche, à contenu comparable, et surtout pour la conversion, la réactivité compte. Un visiteur qui clique sur « Commander » et ne voit rien se passer risque d'abandonner.
Comment mesurer l'INP de votre site ?
- Search Console, rapport « Signaux Web essentiels » : vue d'ensemble par groupes d'URLs, à partir de données réelles.
- PageSpeed Insights : données réelles (si le trafic est suffisant) et diagnostic page par page.
- Chrome DevTools, onglet Performance : pour enregistrer une interaction et voir précisément quel script bloque.
- La bibliothèque JavaScript
web-vitals: pour collecter l'INP de vos propres visiteurs dans votre outil d'analyse.
Attention : un test de laboratoire (Lighthouse) ne simule pas d'interactions réelles. Il donne des pistes, notamment via le temps de blocage total, mais seules les données de terrain reflètent votre véritable INP.
Comment optimiser l'INP concrètement ?
1. Réduire le JavaScript chargé
C'est le premier levier. Chaque script exécuté au chargement occupe le fil principal du navigateur et retarde les réponses aux clics. Passez en revue :
- les extensions et modules installés mais peu utiles (fréquent sur WordPress ou les CMS e-commerce) ;
- les bibliothèques chargées sur toutes les pages alors qu'elles ne servent que sur une seule ;
- le code chargé trop tôt, qui peut être différé.
2. Faire le ménage dans les scripts tiers
Chat en ligne, balises publicitaires, outils d'A/B test, widgets d'avis, cartes, vidéos intégrées : ces scripts sont souvent les premiers responsables d'un mauvais INP. Chacun doit justifier sa présence. C'est aussi l'occasion de revoir vos balises à l'heure de la fin des cookies tiers dans Chrome.
3. Découper les tâches longues
Une tâche de plus de 50 ms bloque le fil principal. Les développeurs peuvent découper un traitement long en plusieurs morceaux et « rendre la main » au navigateur entre chacun (par exemple avec setTimeout), pour qu'il puisse afficher un retour visuel rapidement.
4. Faire le minimum dans les gestionnaires d'événements
Au clic, affichez d'abord le retour visuel (bouton en état « chargement », ouverture du menu), puis effectuez le reste du travail (envoi de statistiques, calculs secondaires) ensuite.
5. Alléger le DOM et le rendu
Une page avec un très grand nombre d'éléments HTML coûte cher à recalculer à chaque interaction. Paginer les longues listes, charger les contenus hors écran à la demande et utiliser la propriété CSS content-visibility aident à réduire le délai de présentation.
6. Éviter les recalculs de mise en page forcés
Lire une dimension d'élément juste après avoir modifié le style oblige le navigateur à recalculer la mise en page de façon synchrone. Regrouper les lectures et les écritures évite ce problème.
Quelles sont les causes fréquentes par type de site ?
| Type de site | Causes fréquentes d'un mauvais INP |
|---|---|
| Site vitrine WordPress | Constructeur de pages lourd, nombreuses extensions, sliders |
| Boutique en ligne | Filtres de catalogue, scripts de suivi, widgets d'avis, chat |
| Application web métier | Grands tableaux de données, formulaires complexes, rendu côté client |
Pour une boutique, le tunnel de commande est la priorité, comme nous le rappelions dans notre guide pour créer un site e-commerce. Côté applications, c'est aussi un bon moment pour faire le point sur votre socle technique, par exemple lors d'une migration vers Laravel 11.
FAQ
Un mauvais INP fait-il chuter mon site dans Google ?
Pas brutalement. Les Core Web Vitals sont un signal parmi beaucoup d'autres, et la pertinence du contenu reste déterminante. Mais un site peu réactif perd des conversions, ce qui justifie à lui seul de s'en occuper.
Pourquoi PageSpeed Insights n'affiche-t-il pas d'INP pour mon site ?
Les données de terrain nécessitent un volume de visites suffisant sur Chrome. Pour les sites à faible trafic, il faut s'appuyer sur les tests manuels dans Chrome DevTools et sur la collecte avec la bibliothèque web-vitals.
Le mobile est-il plus concerné ?
Souvent oui, car les processeurs des smartphones, surtout d'entrée de gamme, exécutent le JavaScript plus lentement. Testez toujours votre site sur un téléphone réel.
Changer d'hébergeur améliore-t-il l'INP ?
Rarement. L'INP dépend surtout de ce qui s'exécute dans le navigateur. L'hébergement influe davantage sur le LCP.
En conclusion
L'INP mesure enfin ce que vivent vos visiteurs quand ils cliquent. Pour l'améliorer : moins de JavaScript, des scripts tiers sous contrôle, des tâches découpées et un retour visuel immédiat. Vous voulez un diagnostic de la réactivité de votre site ? Contactez-nous.
