INP, c’est quoi exactement ?
Depuis mars 2024, l’INP (Interaction to Next Paint) a officiellement remplacé le FID (First Input Delay) comme troisième métrique du trio Core Web Vitals de Google. Ce changement n’est pas anodin : là où le FID se contentait de mesurer le délai avant qu’un navigateur commence à traiter une interaction utilisateur, l’INP va beaucoup plus loin. Il évalue la latence totale de toutes les interactions survenues durant la session d’un visiteur — clics, touches clavier, tapotements sur mobile — et retient la valeur la plus haute (en ignorant quelques valeurs aberrantes). Pour qu’un site obtienne un score Good, son INP doit rester sous les 200 millisecondes. Au-delà de 500 ms, on entre dans la zone rouge. Pour les agences SEO françaises qui accompagnent leurs clients sur la performance technique, maîtriser l’INP est devenu un passage obligé, d’autant que Google l’intègre dans ses signaux de classement via l’expérience page.
Le rôle méconnu des animations CSS dans la dégradation de l’INP
On pourrait croire que les animations CSS sont inoffensives pour l’INP : après tout, elles tournent côté navigateur, souvent sur le thread GPU, non ? La réalité est plus nuancée. Certaines propriétés CSS, lorsqu’elles sont animées, déclenchent ce qu’on appelle un reflow (ou layout recalculation), une opération coûteuse qui force le navigateur à recalculer les dimensions et positions de nombreux éléments du DOM. C’est là que naissent les fameux jank — ces saccades visuelles perceptibles qui trahissent un rendu irrégulier — et les freezes, ces gels momentanés de l’interface qui font exploser le score INP. Les propriétés les plus problématiques sont celles qui affectent le flux de mise en page : width, height, margin, padding, top, left. Animer ces valeurs contraint le navigateur à recalculer l’ensemble du layout à chaque frame, soit jusqu’à 60 fois par seconde. Le résultat ? Un thread principal saturé, incapable de traiter les interactions utilisateur dans les temps impartis, et un INP qui s’effondre.
Les bonnes pratiques pour des animations CSS qui respectent l’INP
La règle d’or pour animer sans pénaliser l’INP consiste à s’en tenir aux propriétés compositor-only, c’est-à-dire celles que le navigateur peut déléguer entièrement au compositeur graphique, sans toucher au thread principal. Deux propriétés se distinguent ici : transform et opacity. Animer un déplacement via transform: translateX() plutôt que via la propriété left fait toute la différence : dans le premier cas, le thread principal n’est pas sollicité pendant l’animation. De même, une transition de visibilité via opacity ne déclenche ni reflow ni repaint lourd. La propriété CSS will-change peut également aider en signalant au navigateur quels éléments vont être animés, lui permettant de les promouvoir sur leur propre couche graphique à l’avance. Cependant, elle doit être utilisée avec parcimonie : will-change: transform sur des centaines d’éléments simultanément peut au contraire dégrader les performances en surchargeant la mémoire GPU. En pratique, les équipes techniques des agences françaises gagnent à auditer leurs feuilles de style avec Chrome DevTools, en activant le panneau Rendering pour visualiser en temps réel les zones de repaint et identifier les animations fautives.
JavaScript, animations et long tasks : le combo explosif
Les animations CSS mal conçues deviennent encore plus problématiques lorsqu’elles coexistent avec du JavaScript intensif. Les Long Tasks — des tâches JavaScript qui monopolisent le thread principal pendant plus de 50 ms — sont l’ennemi juré d’un bon score INP. Quand une animation CSS provoque un reflow au moment précis où une Long Task s’exécute, le navigateur se retrouve dans l’impossibilité de rendre la frame suivante et de traiter l’interaction de l’utilisateur. Le résultat est brutal : un freeze perceptible et un INP qui peut dépasser plusieurs centaines de millisecondes d’un coup. Pour éviter cela, plusieurs stratégies complémentaires existent. L’utilisation de requestAnimationFrame permet de synchroniser les manipulations DOM avec le cycle de rendu du navigateur. Le découpage des tâches longues avec scheduler.yield() ou setTimeout(fn, 0) libère régulièrement le thread principal. Enfin, les CSS animations natives restent généralement préférables aux animations pilotées par JavaScript via setInterval ou des bibliothèques qui manipulent directement le style inline à chaque frame. En 2025, les frameworks JavaScript modernes comme React 19 ou Vue 3 offrent des primitives de transition intégrées qui respectent mieux ce pipeline de rendu, mais la vigilance reste de mise dès qu’on s’écarte des patterns balisés.
Mesurer, diagnostiquer et corriger : la démarche pratique pour les agences
Pour les agences SEO qui intègrent la performance dans leurs audits techniques, la mesure de l’INP en conditions réelles reste le point de départ incontournable. Les données de terrain provenant du Chrome User Experience Report (CrUX) constituent la référence, car elles reflètent l’expérience réelle des utilisateurs sur des appareils et connexions variés. Des outils comme PageSpeed Insights, Search Console (rapport Expérience de la page) ou web-vitals.js permettent d’obtenir ces métriques de terrain. Pour diagnostiquer précisément les animations responsables d’une dégradation de l’INP, le Profiler de Chrome DevTools est l’outil le plus puissant : il permet d’enregistrer une session d’interaction et d’identifier visuellement les Long Tasks, les reflows et les frames manquées. Une fois les coupables identifiés, la correction passe souvent par un refactoring ciblé des animations : remplacement des transitions sur des propriétés de layout par des animations transform-only, suppression des will-change superflus, et révision des keyframes qui animent trop d’éléments simultanément. Pour les sites e-commerce ou les landing pages à fort trafic, même un gain de 100 ms sur l’INP peut se traduire par une amélioration mesurable du taux d’engagement et, indirectement, du positionnement dans les SERPs françaises.
L’INP et les animations CSS : un chantier permanent
La combinaison INP + animations CSS illustre parfaitement la complexité croissante du SEO technique en 2025. Ce n’est plus simplement une question de balises et de backlinks : la qualité de l’expérience utilisateur, mesurée avec une précision milliseconde, est désormais un critère de ranking explicite. Pour les agences françaises qui souhaitent se différencier, la maîtrise de ces problématiques de rendu est un véritable argument compétitif. Former les développeurs intégrateurs aux bonnes pratiques d’animation, inclure des tests INP dans les workflows de recette et mettre en place une surveillance continue des Core Web Vitals en conditions réelles : voilà les trois piliers d’une stratégie performance robuste. L’objectif n’est pas la perfection théorique d’un score Lighthouse en laboratoire, mais l’expérience fluide, réactive et sans accroc que les vrais utilisateurs — sur leurs smartphones Android d’entrée de gamme comme sur leurs MacBooks — doivent pouvoir vivre à chaque visite.
