Forbedre Interaction to Next Paint ved å droppe JavaScript-scrolling
Skap en vakker og jevn scrolleopplevelse som ikke påvirker Core Web Vitals
Erstatt JavaScript-scrolling med CSS i dag
Denne bloggposten har litt historikk. Frem til 2017 var den eneste måten å legge til konsekvent jevn scrolleadferd på å bruke et JavaScript-bibliotek. Og mange utviklere gjorde nettopp det. Core Web Vitals eksisterte ikke ennå, og alle brukte jQuery som sitt viktigste JavaScript-bibliotek.
Spol frem til i dag. Det finnes mye bedre, raskere og enklere alternativer til JavaScript-basert ankerscrolling. Men som Core Web Vitals-konsulent ser jeg dem fortsatt hver dag.
Hvorfor JavaScript-basert scrolling er ‘dårlig’
JavaScript-basert scrolling er dårlig av 2 grunner: det er komplisert og det er tregt.
Komplisert: JavaScript-basert scrolling er unødvendig komplisert. Du må skrive og vedlikeholde vanskelig lesbar kode, og selv om Window.scrollTo()-metoden har gjort denne koden mye enklere, er den fortsatt mye vanskeligere å vedlikeholde.
Tregt. JavaScript har en tendens til å blokkere hovedtråden og er alltid tregere enn sin CSS-motpart. Avhengig av hvordan scrollefunksjonen er implementert, kan den blokkere hovedtråden i ganske lang tid og forårsake en betydelig forsinkelse i Interaction to Next Paint-metrikken!
Hvorfor CSS Smooth Scrolling er ‘bra’
html{ scroll-behavior: smooth;}Enkelt og effektivt
CSS-enlinjen html { scroll-behavior: smooth; } er superenkel å implementere og mer effektiv enn JavaScript-baserte løsninger. Denne enkle kodelinjen aktiverer jevn scrolling for hele siden uten noen vanskelige JavaScript-funksjoner å vedlikeholde.
Bedre ytelse
CSS-basert smooth scrolling håndteres naturlig av nettleseren og vil i alle tilfeller utkonkurrere JavaScript-implementasjoner. Dette er spesielt viktig for å optimalisere Interaction to Next Paint (INP)-metrikken, siden det vil være mindre belastning på nettleserens hovedtråd.
Nettleserkompatibilitet
CSS smooth scrolling har ganske god nettleserstøtte. Eldre nettlesere, der smooth scrolling ikke støttes, faller ganske enkelt tilbake til standard direktehopp til ankeret.
Enkel tilpasning
CSS lar deg enkelt tilpasse scrolleadferden. For eksempel lar scroll-margin-top-egenskapen deg angi toppavstanden til det scrollede elementet:
h1, h2, h3 {scroll-margin-top: 5rem;} Eller enda enklere med 'target'-pseudoklassen
:target {scroll-margin-top: 5rem;} Komplett eksempel:
For å se denne koden i aksjon, klikk på innholdsfortegnelsen øverst på denne siden. Du vil legge merke til en fin, jevn scrolling til det klikkede ankeret.
Her er et forenklet eksempel du kan kopiere og gjenbruke
<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>Secure your Q3 Metrics.
Do not let technical debt derail your Core Web Vitals. I provide the strategy, the code, and the verification to pass Google's assessment.
- Strategic Planning
- Code Implementation
- Verification & Testing
