Ako animácia ovplyvňuje Core Web Vitals (LCP, INP a CLS)
Ako animácie a spustenia animácií ovplyvňujú LCP, INP a CLS a praktické spôsoby, ako zachovať bohatý pohyb bez poškodenia Core Web Vitals.
Core Takeaway
Animácia môže poškodiť všetky tri Core Web Vitals: ťažké animačné súbory a runtime môžu oneskoriť LCP, animácia riadená JavaScript môže zablokovať hlavné vlákno a zhoršiť INP a animácia vlastností rozloženia alebo načítanie animácií bez vyhradeného priestoru spôsobuje CLS. Udržujte obsah hrdinu nezávislý od animácie, pomalé načítavanie runtime pod záhybom, animujte transformáciu a nepriehľadnosť a rezervujte priestor pre každý animovaný prvok.
Tri metriky a ich ciele
Core Web Vitals od Googlu, zdokumentované na web.dev, merajú načítanie (najväčšie vyfarbenie obsahu, dobré 2,5 sekundy alebo menej), odozvu (interakcia s ďalším maľovaním, dobré 200 milisekúnd alebo menej) a vizuálnu stabilitu (kumulatívny posun rozloženia, dobrý 0,1 alebo menej), merané pri reálnom načítaní 75 percent.
LCP: nenechajte hrdinu čakať na animáciu
Ak je najväčším prvkom na obrazovke animácia, ktorá potrebuje najskôr runtime a súbor, LCP počká na oboje. Najprv vykreslite statický obrázok alebo skutočný text, potom ho vylepšite a načítajte spustenia animácie len pre obsah blízko alebo pod záhybom, keď je to potrebné.
INP: ponechajte hlavné vlákno voľné
INP meria, ako rýchlo stránka reaguje na klepnutia a kliknutia. Web.dev vysvetľuje, že dlhé úlohy v hlavnom vlákne oneskorujú odpoveď na vstup. Presne to môže spôsobiť animácia, ktorá spúšťa komplexné JavaScript na každom snímku, alebo veľa animácií začínajúcich naraz. Uprednostňujte prechody CSS na transformáciu a nepriehľadnosť pre jednoduché efekty, pozastavte animácie mimo obrazovky a vyhnite sa začínaniu ťažkej práce v reakcii na interakciu.
CLS: rezervovať priestor a animovať transformáciu
Web.dev odporúča použiť vlastnosť transformácie CSS na animáciu bez spúšťania posunov rozloženia: mierka namiesto zmeny šírky a výšky, preloženie namiesto zmeny hornej alebo ľavej strany. Každému animovanému prvku vrátane animácií na plátne dajte pred načítaním pevné rozmery, aby stránka pri zobrazení neskákala.
Spustenia plátna
Runtime založené na plátne, ako je canvas renderer Lottie, Rive a ExodeUI sa kreslia mimo DOM, čo zabraňuje práci s rozložením na snímku, ale pridáva runtime na stiahnutie a spustenie. Zmerajte kompromis pre svoju stránku: lenivo načítajte runtime, nastavte veľkosť plátna v CSS dopredu a testujte na telefónoch strednej triedy.
Kľúč Principle na zapamätanie
- Ciele: LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 na 75. percentile
- Nenechajte prvok LCP závisieť od spustenia animácie
- Počas interakcií ponechajte hlavné vlákno voľné
- Animovať transformáciu a nepriehľadnosť; rezervovať priestor pre animované prvky
- Lenivé načítavanie a testovanie na telefónoch strednej triedy
Často kladené otázky
Zdroje
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev