Hvordan animation påvirker Core Web Vitals (LCP, INP og CLS)
Hvordan animationer og animationskørselstider påvirker LCP, INP og CLS, og praktiske måder at holde bevægelse rig på uden at skade Core Web Vitals.
Core Takeaway
Animation kan skade alle tre Core Web Vitals: tunge animationsfiler og kørselstider kan forsinke LCP, JavaScript-drevet animation kan blokere hovedtråden og forværre INP, og animering af layoutegenskaber eller indlæsning af animationer uden reserveret plads forårsager CLS. Hold helteindhold uafhængigt af animation, lazy-load runtimes under skillelinjen, animer transformation og opacitet, og reserver plads til hvert animeret element.
De tre målinger og deres mål
Googles Core Web Vitals, dokumenteret på web.dev, måler belastning (Largest Contentful Paint, god ved 2,5 sekunder eller mindre), reaktionsevne (Interaction to Next Paint, god ved 200 millisekunder eller mindre) og visuel stabilitet (Cumulative Layout Shift, god ved 0,1 eller mindre), målt ved den reelle sidebelastning på 75 procent.
LCP: lad ikke helten vente på animation
Hvis det største element på skærmen er en animation, der skal have en runtime og en fil for at indlæse først, venter LCP på begge. Gengiv først et statisk billede eller ægte tekst, forbedr det derefter, og indlæs kun animationskørselstider for indhold tæt på eller under skillelinjen, når det er nødvendigt.
INP: hold hovedtråden fri
INP måler, hvor hurtigt siden reagerer på tryk og klik. Web.dev forklarer, at lange opgaver på hovedtråden forsinker svaret på input. Animation, der kører kompleks JavaScript på hver frame, eller mange animationer, der starter på én gang, kan forårsage præcis det. Foretrække CSS overgange på transformation og uigennemsigtighed for simple effekter, sæt animationer uden for skærmen på pause, og undgå at starte tungt arbejde som reaktion på en interaktion.
CLS: reserver plads og animer transformation
Web.dev anbefaler at bruge CSS-transformationsegenskaben til at animere uden at udløse layoutskift: skaler i stedet for at ændre bredde og højde, oversæt i stedet for at ændre top eller venstre. Giv hvert animeret element, inklusive lærredsbaserede animationer, faste dimensioner, før det indlæses, så siden ikke hopper, når den vises.
Kanvas køretider
Lærredsbaserede runtimes såsom Lottie's canvas renderer, Rive og ExodeUI tegner uden for DOM, hvilket undgår layoutarbejde pr. frame, men tilføjer en runtime til download og kørsel. Mål afvejningen for din side: doven-indlæs kørselstiden, størrelse lærredet i CSS foran, og test på mellemtelefoner.
Tast Principles for at huske
- Mål: LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 ved den 75. percentil
- Gør ikke LCP-elementet afhængigt af en animationskørselstid
- Hold hovedtråden fri under interaktioner
- Animer transformation og opacitet; reservere plads til animerede elementer
- Lazy-load runtimes og test på mellemklassetelefoner
Ofte stillede spørgsmål
Kilder
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev