Paranna Interaction to Next Paint -arvoa luopumalla JavaScript-vierityksestä
Luo kaunis ja sulava vierityskokemus, joka ei vaikuta Core Web Vitals -arvoihin
Korvaa JavaScript-vieritys CSS:llä jo tänään
Tällä blogilla on hieman historiaa takanaan. Vuoteen 2017 asti ainoa tapa lisätä yhtenäinen sulava vierityskäyttäytyminen oli käyttää JavaScript-kirjastoa. Ja monet kehittäjät tekivätkin juuri niin. Core Web Vitals -arvoja ei ollut vielä olemassa ja kaikki käyttivät jQuerya pääasiallisena JavaScript-kirjastonaan.
Hypätään nyt nykyhetkeen. JavaScript-pohjaiselle ankkurivieritykselle on olemassa paljon parempia, nopeampia ja helpompia vaihtoehtoja. Core Web Vitals -konsulttina näen niitä kuitenkin edelleen joka päivä.
Miksi JavaScript-pohjainen vieritys on 'huono'
JavaScript-pohjainen vieritys on huono kahdesta syystä: se on monimutkaista ja se on hidasta.
Monimutkaista: JavaScript-pohjainen vieritys on tarpeettoman monimutkaista. Sinun täytyy kirjoittaa ja ylläpitää vaikeasti luettavaa koodia, ja vaikka Window.scrollTo()-metodi on helpottanut tätä huomattavasti, se on silti paljon vaikeampi ylläpitää.
Hidasta. JavaScript pyrkii estämään pääsäikeen ja on aina hitaampi kuin CSS-vastineensa. Riippuen siitä, miten vieritysfunktio on toteutettu, se voi estää pääsäikeen melko pitkäksi aikaa ja aiheuttaa merkittävän viiveen Interaction to Next Paint -mittarissa!
Miksi CSS:n sulava vieritys on 'hyvä'
html{ scroll-behavior: smooth;}Yksinkertainen ja tehokas
CSS-yksirivinen html { scroll-behavior: smooth; } on erittäin yksinkertainen toteuttaa ja tehokkaampi kuin JavaScript-pohjaiset ratkaisut. Tämä yksi koodirivi mahdollistaa sulavan vierityksen koko sivulle ilman vaikeasti ylläpidettäviä JavaScript-funktioita.
Parempi suorituskyky
CSS-pohjainen sulava vieritys käsitellään selaimen natiivisti ja se päihittää kaikissa tapauksissa JavaScript-toteutukset. Tämä on erityisen tärkeää Interaction to Next Paint (INP) -mittarin optimoinnissa, sillä se kuormittaa selaimen pääsäiettä vähemmän.
Selainyhteensopivuus
CSS:n sulavalla vierityksellä on melko erinomainen selaintuki. Vanhat selaimet, joissa sulavaa vieritystä ei tueta, palaavat yksinkertaisesti oletusarvoiseen suoraan hyppyyn ankkuriin.
Helppo mukauttaminen
CSS:n avulla voit helposti mukauttaa vierityskäyttäytymistä. Esimerkiksi scroll-margin-top-ominaisuuden avulla voit asettaa yläetäisyyden vieritettyyn elementtiin:
h1, h2, h3 {scroll-margin-top: 5rem;} Tai vielä helpommin 'target'-pseudoluokan avulla
:target {scroll-margin-top: 5rem;} Täydellinen esimerkki:
Nähdäksesi tämän koodin toiminnassa klikkaa yksinkertaisesti sivun yläosassa olevaa sisällysluetteloa. Huomaat mukavan sulavan vierityksen klikattuun ankkuriin.
Tässä on yksinkertaistettu esimerkki, jonka voit kopioida ja käyttää uudelleen
<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
