Améliorez l’Interaction to Next Paint en abandonnant le scrolling JavaScript

Remplacez le scrolling JavaScript par CSS dès aujourd’hui

Cet article de blog a une certaine histoire. Jusqu’en 2017, la seule façon d’ajouter un comportement de défilement fluide et cohérent était d’utiliser une bibliothèque JavaScript. Et c’est exactement ce que faisaient de nombreux développeurs. Les Core Web Vitals n’existaient pas encore et tout le monde utilisait jQuery comme bibliothèque JavaScript principale.

Avançons maintenant jusqu’à aujourd’hui. Il existe des alternatives bien meilleures, plus rapides et plus simples au scrolling d’ancre basé sur JavaScript. Cependant, en tant que consultant Core Web Vitals, je les vois encore tous les jours.

Dernière révision par Arjen Karel en février 2026

Pourquoi le scrolling basé sur JavaScript est « mauvais »

Le scrolling basé sur JavaScript est mauvais pour 2 raisons : il est compliqué et il est lent.

Compliqué : Le scrolling basé sur JavaScript est inutilement compliqué. Vous devez écrire et maintenir du code difficile à lire et même si la méthode Window.scrollTo() a rendu ce code beaucoup plus simple, il reste bien plus difficile à maintenir qu’une seule ligne de CSS.

Lent. JavaScript a tendance à bloquer le thread principal et est toujours plus lent que son équivalent CSS. Selon la façon dont la fonction de défilement a été implémentée, elle peut bloquer le thread principal pendant un temps considérable et causer un retard majeur dans la métrique Interaction to Next Paint ! Selon le Web Almanac 2025, le Total Blocking Time médian sur mobile se situe à 1 916 millisecondes. Chaque fonction JavaScript inutile qui entre en compétition pour le thread principal aggrave la situation.

Pourquoi le CSS Smooth Scrolling est « bon »

J’ai expliqué pourquoi le scrolling basé sur JavaScript est mauvais. L’inverse est vrai pour le défilement fluide basé sur CSS. C’est vraiment aussi simple que d’ajouter ce qui suit à votre feuille de style :

html{ scroll-behavior: smooth;}

Simple et efficace

Le one-liner CSS html { scroll-behavior: smooth; } est super simple à implémenter et plus efficace que les solutions basées sur JavaScript. Cette seule ligne de code active le défilement fluide pour toute la page sans aucune fonction JavaScript difficile à maintenir. Si vous voulez aller plus loin et différer ou supprimer le JavaScript inutile entièrement, votre temps de traitement INP vous en remerciera.

Meilleures performances

Le défilement fluide basé sur CSS est géré nativement par le navigateur et surpassera dans tous les cas les implémentations JavaScript. C’est particulièrement important pour l’optimisation de la métrique Interaction to Next Paint (INP), car cela pèse moins sur le thread principal du navigateur. Les gestionnaires de défilement JavaScript doivent s’exécuter sur le thread principal, et chaque milliseconde passée là est une milliseconde qui retarde la prochaine interaction utilisateur. Le comportement de défilement CSS s’exécute entièrement en dehors du thread principal. Si vous avez encore du JavaScript qui doit s’exécuter pendant les interactions, consultez comment céder le thread principal.

Le défilement fluide vers les ancres n’est que le début. CSS prend en charge de plus en plus de responsabilités liées au défilement qui nécessitaient auparavant JavaScript. Les animations pilotées par le défilement (Chrome 115+, Safari 26) vous permettent de lier la progression de l’animation à la position de défilement, remplaçant entièrement les gestionnaires de défilement requestAnimationFrame. Les animations déclenchées par le défilement (Chrome 145) lancent des animations temporelles lors du franchissement d’un offset de défilement, remplaçant IntersectionObserver pour les effets d’apparition. Et les requêtes de conteneur scroll-state (Chrome 133+) vous permettent de styler des éléments selon qu’ils sont fixés, accrochés ou défilables, sans JavaScript. La tendance est claire : déplacez la logique de défilement de JavaScript vers CSS partout où vous le pouvez.

Compatibilité des navigateurs

Le CSS smooth scrolling bénéficie d’un support global de 95 % des navigateurs selon CanIUse. Il est baseline dans tous les navigateurs majeurs depuis mars 2022. Les anciens navigateurs, où le défilement fluide n’est pas supporté, retournent simplement au saut direct par défaut vers l’ancre.

Personnalisation facile

CSS vous permet de personnaliser facilement le comportement de défilement. Par exemple, la propriété scroll-margin-top vous permet de définir la distance supérieure par rapport à l’élément défilé :

h1, h2, h3 {scroll-margin-top: 5rem;} 

Ou encore plus simplement avec la pseudo-classe ‘target’

:target {scroll-margin-top: 5rem;} 

Respecter les préférences de mouvement

Certains utilisateurs souffrent du mal des transports à cause des animations de défilement. Envelopper votre défilement fluide dans une media query prefers-reduced-motion garantit que ces utilisateurs obtiennent des sauts instantanés à la place :

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

Cela applique le défilement fluide uniquement pour les utilisateurs qui n’ont pas demandé une réduction du mouvement. Les utilisateurs souffrant de troubles vestibulaires ou de sensibilité au mouvement verront le défilement instantané par défaut.

Exemple complet

Pour voir ce code en action, cliquez simplement sur la table des matières en haut de cette page. Vous remarquerez un joli défilement fluide vers l’ancre cliquée.

Voici un exemple simplifié à copier et réutiliser

<html>

<head>
    <title>Smooth scroll to target</title>
    <style>
        html {
            scroll-behavior: smooth;
        }
        :target {
            scroll-margin-top: 5rem;
        }
        .largedivider {
            height: 1000px;
        }

    </style>

</head>

<body>
    <nav>
        <a href="#target">scroll to target</a>
    </nav>
    <div class="largedivider"> -- </div>
    <h2 id="target">scroll to me</h2>
    <div class="largedivider"> -- </div>
</body>

</html>