Verbeter de Interaction to Next Paint door te stoppen met JavaScript scrolling
Creëer een mooie smooth scrolling experience die de Core Web Vitals niet beïnvloedt
Vervang JavaScript scrolling vandaag nog door CSS
Deze blog heeft een stukje geschiedenis. Tot 2017 was de enige manier om consistent smooth scrolling gedrag toe te voegen het gebruik van een JavaScript library. En dat is precies wat veel developers deden. De Core Web Vitals bestonden nog niet en iedereen gebruikte jQuery als hun belangrijkste JavaScript library.
Spoel door naar vandaag. Er zijn veel betere, snellere en eenvoudigere alternatieven voor op JavaScript gebaseerd anchor scrolling. Toch kom ik ze als Core Web Vitals consultant nog elke dag tegen.
Waarom op JavaScript gebaseerd scrollen 'slecht' is
Op JavaScript gebaseerd scrollen is om 2 redenen slecht: het is complex en het is traag.
Complex: Op JavaScript gebaseerd scrollen is onnodig complex. Je moet moeilijk leesbare code schrijven en onderhouden en hoewel de Window.scrollTo() methode deze code een stuk eenvoudiger heeft gemaakt, is het nog steeds veel moeilijker te onderhouden.
Traag. JavaScript blokkeert vaak de main thread en is altijd langzamer dan de CSS-tegenhanger. Afhankelijk van hoe de scroll-functie is geïmplementeerd, kan deze de main thread voor een aanzienlijke tijd blokkeren en een flinke vertraging veroorzaken in de Interaction to Next Paint metric!
Waarom CSS Smooth Scrolling 'goed' is
html{ scroll-behavior: smooth;}Eenvoudig en effectief
De CSS one-liner html { scroll-behavior: smooth; } is super eenvoudig te implementeren en efficiënter dan op JavaScript gebaseerde oplossingen. Deze ene regel code activeert smooth scrolling voor de hele pagina, zonder moeilijk te onderhouden JavaScript functies.
Betere Performance
Op CSS gebaseerd smooth scrolling wordt native door de browser afgehandeld en presteert in alle gevallen beter dan JavaScript implementaties. Dit is vooral belangrijk voor het optimaliseren van de Interaction to Next Paint (INP) metric, omdat het de main thread van de browser minder belast.
Browsercompatibiliteit
CSS smooth scrolling heeft een uitstekende browser support. Oude browsers, waar smooth scrolling niet wordt ondersteund, vallen simpelweg terug op de standaard directe sprong naar de anchor.
Eenvoudig aan te passen
Met CSS kun je het scrol-gedrag eenvoudig aanpassen. Met de property scroll-margin-top kun je bijvoorbeeld de afstand aan de bovenkant tot het gescrollde element instellen:
h1, h2, h3 {scroll-margin-top: 5rem;} Of nog eenvoudiger met de 'target' pseudo class
:target {scroll-margin-top: 5rem;} Volledig voorbeeld:
Om deze code in actie te zien, klik je simpelweg op de inhoudsopgave bovenaan deze pagina. Je zult een mooie smooth scroll naar de aangeklikte anchor opmerken.
Hier is een vereenvoudigd voorbeeld dat je kunt kopiëren en hergebruiken
<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>
Need your site lightning fast?
Join 500+ sites that now load faster and excel in Core Web Vitals.
- Fast on 1 or 2 sprints.
- 17+ years experience & over 500 fast sites
- Get fast and stay fast!
