Как анимация влияет на основные веб-показатели (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 для анимации без изменения макета: масштабировать вместо изменения ширины и высоты, перемещать вместо изменения верха или левого края. Присвойте каждому анимированному элементу, включая анимацию на основе холста, фиксированные размеры перед его загрузкой, чтобы страница не прыгала при появлении.
Среды выполнения холста
Среды выполнения на основе холста, такие как средство рендеринга холста Lottie, Rive и ExodeUI, рисуют за пределами DOM, что позволяет избежать работы с макетом для каждого кадра, но добавляет среду выполнения для загрузки и запуска. Измерьте компромисс для своей страницы: отложенная загрузка среды выполнения, заранее установите размер холста в CSS и протестируйте на телефонах среднего класса.
Ключевые принципы
- Целевые значения: 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