Jak animace ovlivňuje Core Web Vitals (LCP, INP a CLS)
Jak animace a běhové časy animací ovlivňují LCP, INP a CLS, a praktické způsoby, jak zachovat bohatý pohyb bez poškození Core Web Vitals.
Core Takeaway
Animace může poškodit všechny tři Core Web Vitals: těžké soubory animací a běhové moduly mohou zpozdit LCP, animace řízená JavaScript může zablokovat hlavní vlákno a zhoršit INP a animace vlastností rozvržení nebo načítání animací bez vyhrazeného prostoru způsobuje CLS. Udržujte obsah hrdiny nezávislý na animaci, líné načítání běhových modulů pod okrajem, animujte transformaci a neprůhlednost a rezervujte prostor pro každý animovaný prvek.
Tři metriky a jejich cíle
Core Web Vitals společnosti Google, zdokumentované na web.dev, měří načítání (největší obsahové vybarvení, dobré 2,5 sekundy nebo méně), odezvu (interakce s dalším vykreslováním, dobré 200 milisekund nebo méně) a vizuální stabilitu (kumulativní posun rozvržení, dobrý 0,1 nebo méně), měřeno při skutečném načtení 75 procent.
LCP: Nenechte hrdinu čekat na animaci
Pokud je největším prvkem na obrazovce animace, která nejprve potřebuje runtime a soubor, LCP počká na obojí. Nejprve vykreslete statický obrázek nebo skutečný text, poté jej vylepšete a načtěte běhové moduly animace pouze pro obsah blízko nebo pod přehybem, když je to potřeba.
INP: Udržujte hlavní vlákno volné
INP měří, jak rychle stránka reaguje na klepnutí a kliknutí. Web.dev vysvětluje, že dlouhé úlohy v hlavním vláknu zpožďují odezvu na vstup. Přesně to může způsobit animace, která spouští komplexní JavaScript na každém snímku, nebo mnoho animací začínajících najednou. Upřednostněte přechody CSS na transformaci a neprůhlednosti pro jednoduché efekty, pozastavte animace mimo obrazovku a vyhněte se zahájení těžké práce v reakci na interakci.
CLS: rezervujte prostor a animujte transformaci
Web.dev doporučuje použít vlastnost transformace CSS k animaci bez spouštění posunů rozvržení: měřítko místo změny šířky a výšky, překládejte místo změny nahoře nebo vlevo. Každému animovanému prvku, včetně animací na plátně, dejte před načtením pevné rozměry, aby stránka při zobrazení neskákala.
Běhové moduly plátna
Běhové moduly založené na plátně, jako je canvas renderer Lottie, Rive a ExodeUI se kreslí mimo DOM, což zabraňuje práci s rozložením na snímek, ale přidává běhové prostředí ke stažení a spuštění. Změřte kompromis pro svou stránku: líně načtěte běhové prostředí, nastavte velikost plátna v CSS dopředu a otestujte na telefonech střední třídy.
Klíč Principle k zapamatování
- Cíle: LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 na 75. percentilu
- Nedělejte prvek LCP závislý na běhovém prostředí animace
- Během interakcí udržujte hlavní vlákno volné
- Animovat transformaci a neprůhlednost; rezervujte prostor pro animované prvky
- Lazy-load runtimes a test na telefonech střední třídy
Často kladené otázky
Zdroje
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev