Jak animacja wpływa na podstawowe wskaźniki internetowe (LCP, INP i CLS)
Jak animacje i czas ich wykonywania wpływają na LCP, INP i CLS oraz praktyczne sposoby na utrzymanie bogactwa ruchu bez szkody dla podstawowych wskaźników sieciowych.
Rdzeń na wynos
Animacja może zaszkodzić wszystkim trzem podstawowym parametrom sieciowym: duże pliki animacji i środowiska wykonawcze mogą opóźnić LCP, animacja oparta na JavaScript może zablokować główny wątek i pogorszyć INP, a animowanie właściwości układu lub ładowanie animacji bez zarezerwowanego miejsca powoduje CLS. Utrzymuj zawartość bohatera niezależną od animacji, leniwe ładowanie w dolnej części strony, animuj transformację i krycie oraz rezerwuj miejsce dla każdego animowanego elementu.
Trzy metryki i ich cele
Podstawowe wskaźniki internetowe Google, udokumentowane w web.dev, mierzą ładowanie (największe malowanie treści, dobre 2,5 sekundy lub mniej), responsywność (interakcja z następną farbą, dobre 200 milisekund lub mniej) i stabilność wizualną (skumulowane przesunięcie układu, dobre 0,1 lub mniej), mierzone na 75. percentylu rzeczywistych wczytań strony.
LCP: nie każ bohaterowi czekać na animację
Jeśli największym elementem na ekranie jest animacja, która wymaga najpierw czasu wykonania i pliku do załadowania, LCP czeka na oba. Najpierw wyrenderuj statyczny obraz lub prawdziwy tekst, a następnie ulepsz go i wczytaj środowiska wykonawcze animacji tylko dla treści znajdujących się w pobliżu części strony widocznej na ekranie lub poniżej, jeśli jest taka potrzeba.
INP: zachowaj główny wątek wolny
INP mierzy, jak szybko strona reaguje na kliknięcia. Web.dev wyjaśnia, że długie zadania w głównym wątku opóźniają reakcję na dane wejściowe. Animacja uruchamiająca złożone JavaScript w każdej klatce lub wiele animacji rozpoczynających się jednocześnie może właśnie to spowodować. Preferuj przejścia CSS w zakresie transformacji i krycia, aby uzyskać proste efekty, wstrzymuj animacje poza ekranem i unikaj rozpoczynania ciężkiej pracy w odpowiedzi na interakcję.
CLS: rezerwuj miejsce i animuj transformację
Web.dev zaleca używanie właściwości transform CSS do animacji bez powodowania przesunięć układu: skaluj zamiast zmieniać szerokość i wysokość, tłumacz zamiast zmieniać górną lub lewą stronę. Nadaj każdemu animowanemu elementowi, w tym animacjom opartym na płótnie, stałe wymiary przed załadowaniem, aby strona nie przeskakiwała, gdy się pojawi.
Środowisko wykonawcze kanwy
Środowiska wykonawcze oparte na kanwie, takie jak renderer kanwy Lottie, Rive i ExodeUI rysują poza DOM, co pozwala uniknąć pracy nad układem na klatkę, ale dodaje środowisko wykonawcze do pobrania i uruchomienia. Zmierz kompromis dla swojej strony: leniwie ładuj środowisko wykonawcze, zmień rozmiar płótna w CSS od początku i przetestuj na telefonach średniej klasy.
Klucz Principles do zapamiętania
- Cele: LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 na 75. percentylu
- Nie uzależniaj elementu LCP od środowiska wykonawczego animacji
- Podczas interakcji główny wątek powinien być wolny
- Animuj transformację i krycie; zarezerwować miejsce na elementy animowane
- Leniwie ładuj środowiska wykonawcze i testuj na telefonach średniej klasy
Często zadawane pytania
Źródła
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev