Optimiser l’INP : rendre votre page plus réactive
Réduisez la latence de vos interactions en agissant sur les trois sous-parties de l'INP, pour une page sous les 200 ms qui répond instantanément.
L’Interaction to Next Paint (INP) est une métrique Core Web Vitals qui évalue la réactivité globale d’une page aux interactions de l’utilisateur. Elle observe la latence de toutes les interactions éligibles au fil de la visite, puis retient l’interaction la plus longue. Google recommande de ne pas dépasser 200 millisecondes, mesurées au 75e centile des chargements, en distinguant mobile et ordinateur.
Pour le SEO, l’INP traduit la sensation de fluidité : une page qui répond instantanément aux clics, aux pressions de touche et aux appuis offre une expérience de qualité. Pour savoir comment cette latence est calculée et observée, il est utile de comprendre et mesurer l’INP. Selon le site, les interactions peuvent être rares ou se compter par centaines, mais dans tous les cas une latence élevée frustre l’utilisateur et nuit à l’engagement.
Mon expérience est claire : sur l’INP, le coupable est presque toujours un thread principal saturé par du JavaScript. La bonne réflexe à adopter, c’est de céder la main régulièrement pour laisser le navigateur afficher le rendu plus tôt, au lieu de bloquer tout pendant une longue tâche. Beaucoup d’équipes ajoutent du code sans jamais se demander ce qu’il coûte en réactivité.
Les seuils et les trois sous-parties de l'INP
Pour optimiser l’INP, il faut comprendre comment se décompose une interaction. La somme de ces trois sous-parties forme la latence totale : chacune doit donc être réduite autant que possible. Le tableau ci-dessous rassemble les seuils de référence de la métrique et les sous-parties sur lesquelles agir.
| Élément | Description |
|---|---|
Seuil bon |
INP de 200 millisecondes ou moins |
Seuil à améliorer |
INP entre 200 et 500 millisecondes |
Seuil médiocre |
INP supérieur à 500 millisecondes |
Délai d’entrée |
Temps entre le déclenchement de l’interaction et le début des rappels d’événement |
Durée de traitement |
Temps d’exécution des rappels d’événement |
Délai de présentation |
Temps nécessaire au navigateur pour afficher le frame suivant |
Causes fréquentes et leviers d'optimisation
Une INP médiocre vient le plus souvent d’un thread principal trop occupé : scripts longs à évaluer au démarrage, rappels d’événement trop lourds, DOM volumineux ou rendu HTML coûteux côté client. À chaque cause correspond un levier concret, à prioriser selon les données réelles de votre site. Quand le coupable est un script trop long, notre guide pour optimiser les longues tâches détaille comment le découper sans bloquer l’interface.
| Cause d'une INP lente | Levier d'optimisation |
|---|---|
Délai d’entrée élevé pendant le chargement |
Réduire l’évaluation des scripts et les tâches longues au démarrage |
Rappels d’événement trop lourds |
En faire le moins possible, découper le travail en tâches distinctes |
Mises à jour visuelles bloquées |
Céder la main juste après la mise à jour de l’interface |
Thrashing de mise en page |
Éviter de lire les styles juste après les avoir modifiés en JavaScript |
DOM volumineux |
Aplatir le DOM, limiter sa taille, utiliser content-visibility |
Gros volumes de HTML rendus par JavaScript |
Limiter le HTML généré côté client, privilégier le streaming serveur |
Céder la main pour afficher le rendu plus tôt
Une technique efficace consiste à limiter ce qui s’exécute avant le prochain frame à la seule mise à jour visuelle indispensable, puis à reporter le reste (calculs, vérifications, sauvegarde) à une tâche ultérieure. Dans l’exemple ci-dessous, seule la mise à jour de la zone de texte est immédiate ; le nombre de mots, la correction orthographique et l’enregistrement sont différés, ce qui réduit la durée de traitement et donc la latence perçue. Lorsque la latence se concentre au démarrage, pensez aussi à réduire le délai d’entrée en allégeant le thread principal pendant le chargement.
textBox.addEventListener('input', (inputEvent) => {
// Mettre à jour l'interface immédiatement.
updateTextBox(inputEvent);
// Reporter le reste du travail après le prochain frame.
requestAnimationFrame(() => {
setTimeout(() => {
const text = textBox.textContent;
updateWordCount(text);
checkSpelling(text);
saveChanges(text);
}, 0);
});
});Un utilisateur peut tenter d’interagir alors que la page finit encore de charger ses scripts. C’est souvent le pire moment pour l’INP, car le thread principal est saturé. Pensez à réduire les tâches longues pendant le chargement pour que la page reste réactive dès les premières secondes.
À faire
- réduire le travail des rappels d’événement
- découper les tâches longues
- céder la main au thread principal après les mises à jour visuelles
- limiter la taille du DOM
- mesurer sur le terrain avec un outil RUM
À éviter
- exécuter de longues tâches synchrones
- provoquer du thrashing de mise en page
- rendre de gros volumes de HTML côté client sans nécessité
- négliger les interactions pendant le chargement
Points clés à retenir
- Visez une INP de 200 millisecondes ou moins au 75e centile
- Réduisez le délai d'entrée en limitant les tâches longues
- Allégez et découpez les rappels d'événement
- Cédez la main pour laisser le rendu se faire plus tôt
- Maîtrisez la taille du DOM et le HTML rendu côté client
L’INP s’améliore en allégeant chaque phase de l’interaction et en libérant le thread principal.
Quiz : testez vos connaissances
Quiz : testez vos connaissances
-
Quelle est la cause la plus fréquente d'une INP médiocre ?
- Un thread principal trop occupé : scripts longs, rappels lourds ou DOM volumineux
- Des images sans dimensions déclarées sur la page
- Un serveur trop lent à renvoyer le premier octet de la réponse
L’INP se dégrade surtout quand le thread principal est saturé : scripts longs à évaluer, rappels d’événement lourds, DOM volumineux ou rendu HTML coûteux côté client.
-
En quoi consiste la technique du "céder la main" pour améliorer l'INP ?
- Exécuter tout le traitement d'un coup avant d'afficher le moindre retour visuel
- Limiter ce qui s'exécute avant le prochain frame à la mise à jour visuelle indispensable, puis reporter le reste
- Supprimer toute mise à jour visuelle pour gagner du temps
On n’exécute avant le prochain frame que la mise à jour visuelle indispensable, puis on reporte les calculs et sauvegardes à une tâche ultérieure, ce qui affiche le rendu plus tôt.
-
Quel est le bon seuil recommandé par Google pour l'INP ?
- 200 millisecondes ou moins, mesurées au 75e centile, en distinguant mobile et ordinateur
- 500 millisecondes ou moins, mesurées en moyenne
- 2,5 secondes ou moins au 75e centile
Google recommande une INP de 200 millisecondes ou moins, mesurée au 75e centile des chargements, en séparant les sessions mobile et ordinateur.
À propos de l'auteur
Besoin d'un accompagnement SEO ?
Vos boutons et formulaires répondent avec un temps de retard ? Identifions les interactions qui pèsent sur votre INP.