Cum afectează animația principalele elemente vitale web (LCP, INP și CLS)
Modul în care animațiile și timpul de execuție al animației afectează LCP, INP și CLS și modalități practice de a menține mișcarea bogată fără a afecta Core Web Vitals.
Core Takeaway
Animația poate afecta toate cele trei elemente vitale de bază ale web: fișierele de animație grele și timpii de execuție pot întârzia LCP, animația bazată pe JavaScript poate bloca firul principal și poate înrăutăți INP, iar animarea proprietăților de aspect sau încărcarea animațiilor fără spațiu rezervat cauzează CLS. Păstrați conținutul eroului independent de animație, timpii de execuție cu încărcare leneșă sub fold, animați transformarea și opacitatea și rezervați spațiu pentru fiecare element animat.
Cele trei valori și obiectivele lor
Core Web Vitals de la Google, documentat pe web.dev, măsoară încărcarea (Largest Contentful Paint, bună la 2,5 secunde sau mai puțin), receptivitatea (Interacțiune cu Next Paint, bună la 200 de milisecunde sau mai puțin) și stabilitatea vizuală (Cumulative Layout Shift, bună la 0,1 sau mai puțin de 0,1 procente reale de 75 de pagini), măsurate.
LCP: nu faceți eroul să aștepte animație
Dacă cel mai mare element de pe ecran este o animație care are nevoie de un timp de rulare și de un fișier pentru a încărca mai întâi, LCP le așteaptă pe ambele. Redați mai întâi o imagine statică sau un text real, apoi îmbunătățiți-l și încărcați timpii de execuție a animației numai pentru conținutul din apropierea sau sub pliul atunci când este necesar.
INP: păstrați firul principal liber
INP măsoară cât de repede răspunde pagina la atingeri și clicuri. Web.dev explică că sarcinile lungi pe firul principal întârzie răspunsul la intrare. Animația care rulează JavaScript complex pe fiecare cadru sau mai multe animații care încep odată, poate cauza exact asta. Preferați tranzițiile CSS la transformare și opacitate pentru efecte simple, întrerupeți animațiile offscreen și evitați să începeți munca grea ca răspuns la o interacțiune.
CLS: rezervă spațiu și transformă animată
Web.dev recomandă utilizarea proprietății de transformare CSS pentru a anima fără a declanșa schimbări de aspect: scalați în loc să schimbați lățimea și înălțimea, traduceți în loc să schimbați sus sau stânga. Dați fiecărui element animat, inclusiv animațiile bazate pe pânză, dimensiuni fixe înainte de a se încărca, astfel încât pagina să nu sară când apare.
Durate de execuție canvas
Timpurile de execuție bazate pe canvas, cum ar fi redarea canvasului Lottie, Rive și ExodeUI desenează în afara DOM, ceea ce evită lucrul de aspect pe cadru, dar adaugă un timp de rulare pentru descărcare și rulare. Măsurați compromisul pentru pagina dvs.: încărcați leneș timpul de execuție, măriți pânza în CSS în avans și testați pe telefoane de gamă medie.
Cheie Principles de reținut
- Ținte: LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 la percentila 75
- Nu faceți elementul LCP să depindă de un timp de execuție al animației
- Păstrați firul principal liber în timpul interacțiunilor
- Animați transformarea și opacitatea; rezerva spatiu pentru elemente animate
- Timp de execuție de încărcare leneră și testare pe telefoane de gamă medie
Întrebări frecvente
Surse
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev