Hvordan animasjon påvirker Core Web Vitals (LCP, INP og CLS)
Hvordan animasjoner og animasjonskjøringer påvirker LCP, INP og CLS, og praktiske måter å holde bevegelsesrik på uten å skade Core Web Vitals.
Kjerne takeaway
Animasjon kan skade alle tre Core Web Vitals: tunge animasjonsfiler og kjøretider kan forsinke LCP, JavaScript-drevet animasjon kan blokkere hovedtråden og forverre INP, og animering av layoutegenskaper eller lasting av animasjoner uten reservert plass forårsaker CLS. Hold helteinnhold uavhengig av animasjon, lazy-load kjøretider under den synlige delen av nettsiden, animer transformasjon og opasitet, og reserver plass for hvert animerte element.
De tre beregningene og deres mål
Googles Core Web Vitals, dokumentert på web.dev, måler lasting (Largest Contentful Paint, god på 2,5 sekunder eller mindre), respons (Interaction to Next Paint, god på 200 millisekunder eller mindre) og visuell stabilitet (Cumulative Layout Shift, god ved 0,1 eller mindre), målt ved reell sidebelastning på 75 prosent.
LCP: ikke få helten til å vente på animasjon
Hvis det største elementet på skjermen er en animasjon som trenger en kjøretid og en fil for å laste først, venter LCP på begge. Gjengi et statisk bilde eller ekte tekst først, forbedre det deretter, og last inn animasjonskjøringer kun for innhold nær eller under den synlige delen når det er nødvendig.
INP: hold hovedtråden fri
INP måler hvor raskt siden reagerer på trykk og klikk. Web.dev forklarer at lange oppgaver på hovedtråden forsinker responsen på innspill. Animasjon som kjører kompleks JavaScript på hver frame, eller mange animasjoner som starter på en gang, kan forårsake akkurat det. Foretrekk CSS-overganger på transformasjon og opasitet for enkle effekter, sett animasjoner utenfor skjermen på pause, og unngå å starte tungt arbeid som svar på en interaksjon.
CLS: reserver plass og animer transformasjon
Web.dev anbefaler å bruke CSS-transformeringsegenskapen for å animere uten å utløse layoutskift: skaler i stedet for å endre bredde og høyde, oversett i stedet for å endre topp eller venstre. Gi hvert animerte element, inkludert lerretsbaserte animasjoner, faste dimensjoner før det lastes, slik at siden ikke hopper når den vises.
Lerrets kjøretider
Canvas-baserte kjøretider som Lottie sin canvas renderer, Rive og ExodeUI tegner utenfor DOM, noe som unngår layoutarbeid per ramme, men legger til en kjøretid for nedlasting og kjøring. Mål avveiningen for siden din: lat inn kjøretiden, dimensjoner lerretet i CSS foran, og test på mellomstore telefoner.
Tast Principles å huske
- Mål: LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 ved 75. persentil
- Ikke gjør LCP-elementet avhengig av en animasjonskjøring
- Hold hovedtråden fri under interaksjoner
- Animer transformasjon og opasitet; reservere plass til animerte elementer
- Lazy-load kjøretider og test på mellomstore telefoner
Ofte stilte spørsmål
Kilder
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev