Как анимацията влияе на основните уеб показатели (LCP, INP и CLS)
Как анимациите и времената на изпълнение на анимацията влияят на LCP, INP и CLS и практически начини да поддържате наситеност на движението, без да навредите на Core Web Vitals.
Ядро за вкъщи
Анимацията може да навреди и на трите основни уеб показателя: тежките анимационни файлове и времена за изпълнение могат да забавят LCP, анимацията, управлявана от JavaScript, може да блокира основната нишка и да влоши INP, а анимирането на свойствата на оформлението или зареждането на анимации без запазено пространство причинява CLS. Съхранявайте съдържанието на героите независимо от анимацията, времената за изпълнение с отложено зареждане под видимата на екрана част от екрана, анимирайте трансформацията и непрозрачността и резервирайте място за всеки анимиран елемент.
Трите показателя и техните цели
Основните уеб показатели на Google, документирани на web.dev, измерват зареждането (Най-голямото боядисване на съдържание, добро при 2,5 секунди или по-малко), отзивчивостта (Взаимодействие със следващото рисуване, добро при 200 милисекунди или по-малко) и визуалната стабилност (Кумулативно изместване на оформлението, добро при 0,1 или по-малко), измерено при 75-ия персентил на реалните зареждания на страницата.
LCP: не карайте героя да чака анимация
Ако най-големият елемент на екрана е анимация, която се нуждае от време за изпълнение и файл, за да се зареди първо, LCP чака и двете. Първо изобразете статично изображение или реален текст, след това го подобрете и заредете времена за изпълнение на анимация само за съдържание близо до или под видимата на екрана част от страницата, когато е необходимо.
INP: поддържайте основната нишка свободна
INP измерва колко бързо страницата реагира на докосвания и кликвания. Web.dev обяснява, че дългите задачи в основната нишка забавят отговора на входа. Анимация, която изпълнява комплекс JavaScript на всеки кадър или много анимации, започващи наведнъж, може да причини точно това. Предпочитайте CSS преходите при трансформиране и непрозрачност за прости ефекти, поставяйте на пауза анимациите извън екрана и избягвайте да започвате тежка работа в отговор на взаимодействие.
CLS: резервирайте място и анимирайте трансформацията
Web.dev препоръчва използването на свойството за трансформация CSS за анимиране, без да се задействат промени в оформлението: мащабиране вместо промяна на ширината и височината, транслиране вместо промяна на горната или лявата страна. Дайте на всеки анимиран елемент, включително анимации, базирани на платно, фиксирани размери, преди да се зареди, така че страницата да не прескача, когато се появи.
Работно време на Canvas
Среди за изпълнение, базирани на платно, като платното за изобразяване на Lottie, Rive и ExodeUI чертаят извън DOM, което избягва работата по оформлението на кадър, но добавя време за изпълнение за изтегляне и изпълнение. Измерете компромиса за вашата страница: заредете времето за изпълнение, оразмерете платното в CSS отпред и тествайте на телефони от среден клас.
Ключове Principle, които трябва да запомните
- Цели: LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 при 75-ия персентил
- Не поставяйте LCP елемента в зависимост от време за изпълнение на анимация
- Дръжте основната нишка свободна по време на взаимодействия
- Анимиране на трансформация и непрозрачност; резервирайте място за анимирани елементи
- Време за изпълнение с отложено зареждане и тестване на телефони от среден клас
Често задавани въпроси
Източници
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev