Les animations au défilement nuisent-elles aux performances ?
Analysez l'impact du défilement animé : écouteurs de scroll vs IntersectionObserver et API Scroll-Driven Animations sur les Core Web Vitals (INP).
À retenir
Les animations traditionnelles utilisant window.addEventListener('scroll') dégradent sévèrement les performances en exécutant du JavaScript synchrone à chaque pixel et en bloquant la réactivité du navigateur. À l'opposé, les approches modernes comme CSS Scroll-Driven Animations et IntersectionObserver tournent hors du thread principal, garantissant 60 FPS sans altérer le score Interaction to Next Paint (INP).
Le goulet d'étranglement des écouteurs de scroll
Interroger getBoundingClientRect() ou pageYOffset au sein d'un écouteur de défilement force des recalculs synchrones de mise en page à chaque instant. Lors d'un défilement rapide sur smartphone, le thread principal se fige, produisant des saccades et pénalisant la métrique INP de Google.
IntersectionObserver pour les révélations à l'écran
Pour les éléments qui s'animent lorsqu'ils pénètrent dans la zone visible, IntersectionObserver constitue la solution idéale. Il calcule les intersections de manière asynchrone dans le compositeur sans exécuter de fonction synchrone à chaque pixel défilé.
- Ne lisez jamais getBoundingClientRect() dans un écouteur de défilement brut
- Utilisez IntersectionObserver avec rootMargin pour anticiper les apparitions
- Adoptez les CSS Scroll-Driven Animations (@scroll-timeline) pour un suivi fluide
- Déclarez toujours passive: true sur les écouteurs de scroll résiduels
Les animations CSS pilotées par le défilement (@scroll-timeline)
Les navigateurs modernes prennent en charge les fonctions CSS scroll() et view(). Cela permet de corréler l'avancement d'une animation à la progression du défilement directement sur le thread de composition, sans la moindre ligne de JavaScript.
Accessibilité et confort vestibulaire
Les arrière-plans à parallaxe marquée ou les zooms continus au défilement provoquent des nausées chez les personnes souffrant de troubles vestibulaires. Neutralisez systématiquement le parallaxe sous prefers-reduced-motion.
Principes clés à retenir
- Ne reliez jamais de lectures de mise en page synchrones aux événements de scroll
- Employez IntersectionObserver pour déclencher les apparitions proprement
- Exploitez les animations CSS pilotées par le défilement hors du thread principal
- Supprimez les effets de parallaxe dès qu'un mouvement réduit est demandé
Questions fréquentes
Sources
- Scroll-driven animations specification — W3C
- Optimize Interaction to Next Paint (INP) — Google Web.dev