Popraw Interaction to Next Paint rezygnując z JavaScript scrolling
Stwórz piękne, płynne przewijanie, które nie wpływa na Core Web Vitals
Zastąp JavaScript scrolling przez CSS już dziś
Ten blog ma pewną historię. Do 2017 roku jedynym sposobem na dodanie spójnego płynnego przewijania było użycie biblioteki JavaScript. I wielu deweloperów właśnie to robiło. Core Web Vitals jeszcze nie istniały, a wszyscy używali jQuery jako swojej głównej biblioteki JavaScript.
Teraz przejdźmy do dnia dzisiejszego. Istnieją znacznie lepsze, szybsze i łatwiejsze alternatywy dla przewijania do kotwic opartego na JavaScript. Jednak jako konsultant Core Web Vitals nadal widzę je każdego dnia.
Dlaczego przewijanie oparte na JavaScript jest „złe”
Przewijanie oparte na JavaScript jest złe z 2 powodów: jest skomplikowane i jest wolne.
Skomplikowane: Przewijanie oparte na JavaScript jest niepotrzebnie skomplikowane. Musisz pisać i utrzymywać trudny do odczytania kod i mimo że metoda Window.scrollTo() znacznie ułatwiła ten kod, nadal jest o wiele trudniejszy w utrzymaniu.
Wolne. JavaScript ma tendencję do blokowania głównego wątku i jest zawsze wolniejszy niż jego odpowiednik w CSS. W zależności od tego, jak funkcja przewijania została zaimplementowana, może blokować główny wątek przez dłuższy czas i powodować znaczne opóźnienie metryki Interaction to Next Paint!
Dlaczego płynne przewijanie CSS jest „dobre”
html{ scroll-behavior: smooth;}Proste i skuteczne
Jednoliniowy CSS html { scroll-behavior: smooth; } jest bardzo prosty do zaimplementowania i bardziej wydajny niż rozwiązania oparte na JavaScript. Ta pojedyncza linia kodu włącza płynne przewijanie dla całej strony bez żadnych trudnych do utrzymania funkcji JavaScript.
Lepsza wydajność
Płynne przewijanie oparte na CSS jest obsługiwane natywnie przez przeglądarkę i we wszystkich przypadkach przewyższy implementacje JavaScript. Jest to szczególnie ważne dla optymalizacji metryki Interaction to Next Paint (INP), ponieważ będzie mniejszym obciążeniem dla głównego wątku przeglądarki.
Kompatybilność z przeglądarkami
Płynne przewijanie CSS ma świetne wsparcie przeglądarek. Starsze przeglądarki, w których płynne przewijanie nie jest obsługiwane, po prostu wracają do domyślnego bezpośredniego skoku do kotwicy.
Łatwa personalizacja
CSS pozwala łatwo dostosować zachowanie przewijania. Na przykład właściwość scroll-margin-top pozwala ustawić górną odległość do przewijanego elementu:
h1, h2, h3 {scroll-margin-top: 5rem;} Lub jeszcze łatwiej z pseudoklasą „target”
:target {scroll-margin-top: 5rem;} Kompletny przykład:
Aby zobaczyć ten kod w akcji, po prostu kliknij na Spis treści na górze tej strony. Zauważysz ładne, płynne przewijanie do klikniętej kotwicy.
Oto uproszczony przykład do skopiowania i ponownego użycia
<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>Stop debating in Jira.
Get a definitive answer on your performance issues. I deliver a granular breakdown of your critical rendering path.
- Definitive Answers
- Granular Breakdown
- Critical Path Analysis
