Як анімація впливає на основні веб-показники (LCP, INP і CLS)
Як анімація та час виконання анімації впливають на LCP, INP і CLS, а також практичні способи підтримувати насиченість рухом без шкоди для основних веб-показників.
Основний винос
Анімація може завдати шкоди всім трьом основним веб-важливостям: важкі файли анімації та середовища виконання можуть затримувати 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 с, INP ≤ 200 мс, CLS ≤ 0,1 на 75-му процентилі
- Не робіть елемент LCP залежним від середовища виконання анімації
- Тримайте основний потік вільним під час взаємодії
- Анімація трансформації та непрозорості; резервувати місце для анімованих елементів
- Відкладене завантаження та тестування на телефонах середнього класу
Часті запитання
Джерела
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev