Hogyan befolyásolja az animáció az alapvető webes vitalokat (LCP, INP és CLS)
Hogyan hatnak az animációk és az animációs futási környezetek az LCP-re, az INP-re és a CLS-re, és gyakorlati módszerek a mozgásgazdagság megőrzésére a Core Web Vitals károsítása nélkül.
Core Takeaway
Az animáció károsíthatja mindhárom alapvető webes vitát: a nehéz animációs fájlok és futási idők késleltethetik az LCP-t, a JavaScript-vezérelt animáció blokkolhatja a fő szálat és ronthatja az INP-t, az elrendezési tulajdonságok animálása vagy az animációk lefoglalt terület nélküli betöltése pedig CLS-t okoz. Tartsa a hőstartalmat az animációtól független, a hajtás alatti futásidőket lazán töltse be, animálja az átalakítást és az átlátszatlanságot, és hagyjon helyet minden animált elemnek.
A három mérőszám és azok céljai
A Google Core Web Vitals, amely a web.dev-en van dokumentálva, méri a betöltést (legnagyobb Contentful Paint, legfeljebb 2,5 másodpercig), a reakcióképességet (Interaction to Next Paint, jó legfeljebb 200 ezredmásodpercig) és a vizuális stabilitást (kumulatív elrendezési eltolás, jó a valós oldal betöltésének 0,1 százalékánál, vagy annál kevesebb).
LCP: ne várja meg a hőst az animációra
Ha a képernyő legnagyobb eleme egy animáció, amelynek először futási környezetre és fájlra van szüksége, akkor az LCP mindkettőre vár. Először egy statikus képet vagy valódi szöveget jelenítsen meg, majd javítsa ki, és csak a hajtás közelében vagy alatti tartalomhoz töltsön be animációs futásidőt, amikor szükséges.
INP: tartsa szabadon a főszálat
Az INP azt méri, hogy az oldal milyen gyorsan reagál a koppintásra és kattintásra. A Web.dev elmagyarázza, hogy a főszálon lévő hosszú feladatok késleltetik a bemeneti választ. Pontosan ezt okozhatja az az animáció, amely minden képkockán összetett JavaScript-et futtat, vagy sok animáció egyszerre kezdődik. Az egyszerű effektusok érdekében előnyben részesítse a CSS átmeneteket az átalakításon és az átlátszatlanságon, szüneteltesse a képernyőn kívüli animációkat, és kerülje el a nehéz munka megkezdését egy interakció hatására.
CLS: helyfoglalás és animált transzformáció
A Web.dev a CSS transzformációs tulajdonság használatát javasolja az elrendezés eltolása nélküli animációhoz: méretezés a szélesség és magasság módosítása helyett, fordítás a felső vagy bal oldali módosítás helyett. Minden animált elemnek, beleértve a vászon alapú animációkat is, adjon rögzített méreteket a betöltés előtt, hogy az oldal ne ugorjon, amikor megjelenik.
Vászonfutási idők
A vászonalapú futási környezetek, például a Lottie vászonmegjelenítője, a Rive és a ExodeUI a DOM-on kívül rajzolnak, ami elkerüli a képkockánkénti elrendezési munkát, de futási időt ad a letöltéshez és futtatáshoz. Mérje meg oldala kompromisszumát: töltse be lustán a futási időt, méretezze meg a vásznat a CSS méretben előre, és tesztelje a középkategóriás telefonokat.
Kulcs Principle, amit meg kell jegyezni
- Célok: LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 a 75. percentilisnél
- Ne tegye az LCP elemet animációs futási környezettől függővé
- Tartsa szabadon a főszálat az interakciók során
- Átalakítás és átlátszatlanság animálása; tartalék helyet az animált elemek számára
- Lazy-load futási idők és tesztelés középkategóriás telefonokon
Gyakran Ismételt Kérdések
Források
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev