Förbättra Interaction to Next Paint genom att överge JavaScript-scrollning
Skapa en vacker mjuk scrollningsupplevelse som inte påverkar Core Web Vitals
Ersätt JavaScript-scrollning med CSS idag
Det här blogginlägget har lite historia bakom sig. Fram till 2017 var det enda sättet att lägga till konsekvent mjuk scrollning att använda ett JavaScript-bibliotek. Och många utvecklare gjorde just det. Core Web Vitals existerade ännu inte och alla använde jQuery som sitt huvudsakliga JavaScript-bibliotek.
Spola nu fram till idag. Det finns mycket bättre, snabbare och enklare alternativ till JavaScript-baserad ankarscrollning. Men som Core Web Vitals-konsult ser jag dem fortfarande varje dag.
Varför JavaScript-baserad scrollning är 'dålig'
JavaScript-baserad scrollning är dålig av 2 anledningar: det är komplicerat och det är långsamt.
Komplicerat: JavaScript-baserad scrollning är onödigt komplicerat. Du måste skriva och underhålla svårläst kod och även om Window.scrollTo()-metoden har gjort koden mycket enklare är den fortfarande mycket svårare att underhålla.
Långsamt. JavaScript tenderar att blockera huvudtråden och är alltid långsammare än sin CSS-motsvarighet. Beroende på hur scrollfunktionen implementerades kan den blockera huvudtråden under ganska lång tid och orsaka en betydande fördröjning i Interaction to Next Paint-mätvärdet!
Varför CSS Smooth Scrolling är 'bra'
html{ scroll-behavior: smooth;}Enkelt och effektivt
CSS-enradaren html { scroll-behavior: smooth; } är superenkel att implementera och effektivare än JavaScript-baserade lösningar. Denna enda kodrad aktiverar smooth scrolling för hela sidan utan några svårunderhållna JavaScript-funktioner.
Bättre prestanda
CSS-baserad smooth scrolling hanteras inbyggt av webbläsaren och kommer i alla fall att överträffa JavaScript-implementationer. Detta är särskilt viktigt för att optimera Interaction to Next Paint (INP)-mätvärdet, eftersom det belastar webbläsarens huvudtråd mindre.
Webbläsarkompatibilitet
CSS smooth scrolling har ganska bra webbläsarstöd. Äldre webbläsare, där smooth scrolling inte stöds, faller helt enkelt tillbaka till standardbeteendet med direkt hopp till ankaret.
Enkel anpassning
CSS låter dig enkelt anpassa scrollbeteendet. Till exempel låter egenskapen scroll-margin-top dig ställa in det övre avståndet till det scrollade elementet:
h1, h2, h3 {scroll-margin-top: 5rem;} Eller ännu enklare med 'target' pseudoklassen
:target {scroll-margin-top: 5rem;} Komplett exempel:
För att se denna kod i aktion, klicka helt enkelt på innehållsförteckningen högst upp på denna sida. Du kommer att märka en fin mjuk scrollning till det klickade ankaret.
Här är ett förenklat exempel som du kan kopiera och återanvända
<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>Lab data is not enough.
I analyze your field data to find the edge cases failing your user experience.
- Real User Data
- Edge Case Detection
- UX Focused
