Kuinka animaatio vaikuttaa Core Web Vitalsiin (LCP, INP ja CLS)
Kuinka animaatiot ja animaatioiden suoritusajat vaikuttavat LCP:hen, INP:hen ja CLS:ään, ja käytännöllisiä tapoja pitää liikkeen täyteläisenä vahingoittamatta Core Web Vitalsia.
Core Takeaway
Animaatio voi vahingoittaa kaikkia kolmea Web Vitalsia: raskaat animaatiotiedostot ja suoritusajat voivat viivyttää LCP:tä, JavaScript-ohjattu animaatio voi tukkia pääsäikeen ja huonontaa INP:tä, ja asetteluominaisuuksien animointi tai animaatioiden lataaminen ilman varattua tilaa aiheuttaa CLS:n. Pidä sankarisisältö animaatiosta riippumattomana, lataa laiska latausaika sivun alapuolella, animoi muunnos ja läpinäkyvyys ja varaa tilaa jokaiselle animoidulle elementille.
Kolme mittaria ja niiden tavoitteet
Googlen Core Web Vitals, dokumentoitu web.dev, mittaa latausta (suurin Contentful Paint, hyvä 2,5 sekuntia tai vähemmän), reagointikykyä (vuorovaikutus Next Paintiin, hyvä 200 millisekuntia tai vähemmän) ja visuaalista vakautta (kumulatiivinen asettelumuutos, hyvä 0,1 prosentilla tai vähemmän), mitattuna 5 prosentilla todellisesta sivulatauksesta.
LCP: älä pakota sankaria odottamaan animaatiota
Jos näytön suurin elementti on animaatio, joka tarvitsee ajonajan ja tiedoston latautuvaksi ensin, LCP odottaa molempia. Piirrä ensin staattinen kuva tai oikea teksti, paranna sitä ja lataa animaatioita vain sivun lähellä tai alapuolella olevalle sisällölle, kun sitä tarvitaan.
INP: pidä päälanka vapaana
INP mittaa kuinka nopeasti sivu reagoi napautuksiin ja napsautuksiin. Web.dev selittää, että pitkät tehtävät pääsäikeessä viivästyttävät vastausta syötteeseen. Animaatio, joka suorittaa monimutkaisen JavaScript:n jokaisessa kehyksessä, tai useita animaatioita, jotka alkavat kerralla, voivat aiheuttaa juuri sen. Suosi CSS-siirtymiä muunnokselle ja läpinäkyvyydelle yksinkertaisten tehosteiden saamiseksi, keskeytä näytön ulkopuoliset animaatiot ja vältä raskaan työn aloittamista vuorovaikutuksen vuoksi.
CLS: varaa tilaa ja animoi muunnos
Web.dev suosittelee CSS-muunnosominaisuuden käyttämistä animaatioon käynnistämättä asettelun muutoksia: skaalaa leveyden ja korkeuden muuttamisen sijaan, käännä ylä- tai vasemmanpuoleisen muuttamisen sijaan. Anna jokaiselle animoidulle elementille, mukaan lukien kankaalle pohjautuvat animaatiot, kiinteät mitat ennen latautumista, jotta sivu ei hyppää ilmestyessään.
Canvas-ajoajat
Canvas-pohjaiset suoritusajat, kuten Lottie:n piirtoalustan hahmonnus, Rive ja ExodeUI piirtävät DOM:n ulkopuolelle, mikä välttää asettelutyön kehystä kohti, mutta lisää ajonaikaa lataamiseen ja suorittamiseen. Mittaa sivusi kompromissi: lataa suoritusaika laiskasti, kokoa kankaalle CSS etukäteen ja testaa keskitason puhelimilla.
Avain Principles muistettavat
- Tavoitteet: LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 75. prosenttipisteessä
- Älä aseta LCP-elementtiä riippuvaiseksi animaation suoritusajasta
- Pidä päälanka vapaana vuorovaikutuksen aikana
- Animoi muunnos ja opasiteetti; varata tilaa animoiduille elementeille
- Laita latausaikaa ja testaa keskitason puhelimissa
Usein kysytyt kysymykset
Lähteet
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev