Améliorez l'Interaction to Next Paint en abandonnant le défilement JavaScript
Créez une belle expérience de défilement fluide qui n'affecte pas les Core Web Vitals
Remplacez le défilement JavaScript par CSS dès aujourd'hui
Ce blog a un peu d'histoire. Jusqu'en 2017, la seule façon d'ajouter un comportement de défilement fluide cohérent était d'utiliser une bibliothèque JavaScript. Et beaucoup de développeurs ont fait exactement cela. Les Core Web Vitals n'existaient pas encore et tout le monde utilisait jQuery comme bibliothèque JavaScript principale.
Faisons maintenant un saut dans le présent. Il existe de bien meilleures alternatives, plus rapides et plus faciles, au défilement par ancre basé sur JavaScript. Cependant, en tant que consultant Core Web Vitals, je les vois encore tous les jours.
Pourquoi le défilement basé sur JavaScript est 'mauvais'
Le défilement basé sur JavaScript est mauvais pour 2 raisons : il est compliqué et il est lent.
Compliqué : Le défilement 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 facile, il reste beaucoup plus difficile à maintenir.
Lent. JavaScript a tendance à bloquer le thread principal et est toujours plus lent que son homologue CSS. Selon la façon dont la fonction de défilement a été implémentée, elle peut bloquer le thread principal pendant un certain temps et causer un retard majeur dans la métrique Interaction to Next Paint !
Pourquoi le défilement fluide CSS est 'bon'
html{ scroll-behavior: smooth;}Simple et efficace
La ligne 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 permet un défilement fluide pour toute la page sans aucune fonction JavaScript difficile à maintenir.
Meilleure performance
Le défilement fluide basé sur CSS est géré nativement par le navigateur et surperformera 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 sera moins une charge pour le thread principal du navigateur.
Compatibilité des navigateurs
Le défilement fluide CSS a un très bon support des navigateurs. Les anciens navigateurs, où le défilement fluide n'est pas supporté, reviennent 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 facile avec la pseudo-classe 'target'
:target {scroll-margin-top: 5rem;} 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>Défilement fluide vers la cible</title>
<style>
html {
scroll-behavior: smooth;
}
:target {
scroll-margin-top: 5rem;
}
.largedivider {
height: 1000px;
}
</style>
</head>
<body>
<nav>
<a href="#target">défilement vers la cible</a>
</nav>
<div class="largedivider"> -- </div>
<h2 id="target">défilez vers moi</h2>
<div class="largedivider"> -- </div>
</body>
</html>Urgent Fix Required?
Google Search Console failing? I offer rapid-response auditing to identify the failure point within 48 hours.
- 48hr Turnaround
- Rapid Response
- Failure Identification
