Замедляет ли анимация сайт? Сама по себе - нет. Грамотно сделанное плавное появление или раскрытие элемента при прокрутке почти не требует ресурсов. Сайт тормозит из-за того, как реализовано движение: заголовок скрыт до загрузки JavaScript, без загрузки 3D-кода страница не может отобразиться, обработчики прокрутки занимают основной поток, а анимация меняет расположение элементов. Каждая из этих ошибок ухудшает свой показатель Core Web Vitals.
Разберём, как анимация ухудшает LCP, INP и CLS и что сделать, чтобы показатели оставались в зелёной зоне.
Три показателя, которые измеряет Google
Google оценивает Core Web Vitals по 75-му процентилю реальных загрузок страниц, отдельно для мобильных устройств и компьютеров.
| Показатель | Хорошо | Плохо | Что измеряет |
|---|---|---|---|
| LCP (Largest Contentful Paint) | ≤ 2,5 с | > 4 с | Когда появляется основной контент |
| INP (Interaction to Next Paint) | ≤ 200 мс | > 500 мс | Как быстро страница реагирует на касания, клики и нажатия клавиш |
| CLS (Cumulative Layout Shift) | ≤ 0.1 | > 0.25 | Насколько сильно скачет расположение элементов |
Пороги взяты со страниц web.dev о LCP, INP и CLS. В марте 2024 года INP заменил First Input Delay в составе Core Web Vitals.
Как анимация ухудшает каждый показатель
LCP: невидимый заголовок
Типичная ошибка: заголовок на первом экране сначала имеет opacity: 0 и плавно появляется после загрузки GSAP. Chrome не учитывает элементы с opacity 0 как кандидатов на LCP, поэтому показатель фиксируется только после завершения появления. Вступительная анимация длительностью 1,2 секунды может добавить к LCP до 1,2 секунды сверх времени загрузки скрипта.
Первый экран с 3D требует ещё больше ресурсов. Utsubo отмечает, что в сцене на Three.js элементом LCP обычно становится canvas, а одно ядро Three.js занимает около 600 KB после минификации. С вспомогательными библиотеками и моделью .glb объём превышает 3 MB.
INP: занятый основной поток
INP учитывает только клики, касания и нажатия клавиш. Прокрутка и наведение не измеряются. Поэтому анимация при прокрутке не ухудшает INP напрямую, но это делает JavaScript, который ею управляет. Если обработчики прокрутки, библиотека плавного скролла и цикл WebGL одновременно претендуют на основной поток, нажатие «В корзину» ждёт своей очереди. Hon Tran называет INP показателем, по которому сайты с активной анимацией чаще всего не проходят проверку.
CLS: анимация неподходящего свойства
Анимация height, width, top или margin сдвигает соседние элементы и учитывается как изменение макета. По руководству web.dev по CLS, изменения через CSS transform так не учитываются. Есть нюанс: сдвиги в течение 500 мс после касания или клика исключаются из расчёта, а прокрутка таким действием не считается. Сдвиг от раскрывающегося при прокрутке блока-аккордеона, который толкает контент вниз, полностью учитывается в CLS.
Семь правил: как сохранить скорость сайта с анимацией
- Анимируйте только
transformиopacity. Используйтеtranslateвместоtop/left,scaleвместоwidth/height, а для раскрытия -clip-path. Параметры GSAPxиyпреобразуются в transform. - Сначала отдавайте первый экран в HTML. Заголовок должен быть полностью видимым уже в серверном HTML. Анимируйте второстепенные элементы либо начинайте анимацию из видимого состояния.
- Загружайте тяжёлую анимацию отложенно. Подключайте Three.js и сложные последовательности после события
loadлибо при появлении в области просмотра. До этого показывайте статичную заставку. - Заранее выделяйте место. Задавайте
width/heightилиaspect-ratioдля изображений, видео и canvas. Не анимируйте переход отheight: 0кauto; резервируйте место черезmin-height. - Используйте один цикл анимации. Запускайте обновления Lenis и ScrollTrigger из одного вызова
requestAnimationFrameи выполняйте операции чтения DOM одной группой перед операциями записи. - Ставьте на паузу то, чего посетитель не видит. Останавливайте циклы WebGL за пределами экрана через IntersectionObserver. Применяйте
will-changeлишь непосредственно перед анимацией, затем сбрасывайте его. - Проверяйте на Android среднего класса. Как минимум включите в DevTools замедление CPU в 4 раза и проверьте настоящий телефон. Ноутбук на чипе серии M создаст ложное впечатление о скорости.
Правила 2 и 3 важны и для позиций в поиске: подробнее - в статье «SEO для анимированных сайтов». Для сцен с 3D в реальном времени есть руководство по производительности 3D-сайтов, где разбираем текстуры, сжатие Draco и вызовы отрисовки.
Как выглядит аудит анимации
При аудите сайта мы проверяем влияние каждой анимации на все три показателя. Одной общей оценкой Lighthouse дело не ограничивается.
Два замечания об измерениях:
- Лабораторные и реальные данные. Как отмечает Hon Tran, Lighthouse показывает Total Blocking Time, а не реальный INP. На панели Performance ищите длительные задачи более 50 мс, затем сверяйте результат с данными реальных посещений.
- Реальные данные обновляются с задержкой. CrUX от Google использует 75-й процентиль данных реальных пользователей за 28 дней, поэтому исправление будет видно в Search Console через несколько недель. Собирайте собственные измерения библиотекой
web-vitals(onLCP,onINP,onCLS).
Скорость и доступность связаны
Исправления, ускоряющие анимацию, обычно делают её комфортнее. Если учитывать prefers-reduced-motion и вместо движения показывать конечное состояние, для этих пользователей уменьшится нагрузка на основной поток. Дизайн таких вариантов разбираем в руководстве по доступной анимации на сайте.
