Анимации появления и LCP: «задержка отрисовки» при загруженной картинке

Анимации появления — блоки плавно выезжают, баннер «проявляется», заголовок «печатается» — делают сайт живым. И почти незаметно портят оценку. PageSpeed не скажет «у вас анимация мешает»: в отчёте будет загадочная «задержка отрисовки элемента» на пару секунд при уже загруженной картинке. Если не знать, куда смотреть, её можно искать неделями.

Это тринадцатая часть цикла «PageSpeed без мифов».

Как анимация попадает в LCP

LCP — момент, когда крупнейший элемент первого экрана стал виден. Не загружен — виден. Элемент под visibility: hidden или opacity: 0 браузер не засчитывает как отрисованный. Если анимация появления начинается с невидимого состояния, LCP наступит только когда она его проявит.

На одном сайте главный баннер «разгорался» две секунды: эффект включающихся фар. Картинка баннера загружалась за 180 мс, а отчёт показывал «задержку отрисовки элемента» 2040 мс — ровно длину анимации плюс старт скриптов. На другом сайте — 1930 мс по той же причине.

Как найти

1. Фазы LCP в отчёте. Большая «задержка отрисовки» при маленькой «загрузке ресурса» — элемент загружен, но не показан.
2. Какой элемент — LCP. Lighthouse пишет его селектор. Посмотрите его стили и классы: нет ли там opacity: 0, visibility: hidden, классов библиотек анимации появления.
3. Когда он становится видимым. В DevTools во вкладке «Производительность» видно, на каком кадре элемент проявляется.

Как лечить, не убивая дизайн

• Первый экран — без анимации появления. Крупнейший элемент должен быть виден в первом же кадре. Анимации появления оставляйте для блоков ниже сгиба: там они никому не мешают.
• Анимируйте не появление, а движение. Небольшой сдвиг (transform) уже видимого элемента не задерживает LCP, а выглядит почти так же живо.
• Не прячьте контент в CSS до старта скриптов. Частый шаблон «скрыть всё с классом .animate, а скрипт потом покажет» означает: пока скрипты не загрузились и не выполнились, первый экран пуст. Если скрипты задержались — пуст и для посетителя.

Родственная ловушка: стили видимого элемента в ленивом файле

Разделять стили на «нужные сразу» и «потом» — правильно. Но если в «потом» попали стили элемента, который виден на первом экране, он будет выглядеть сломанным или пустым, пока файл не приедет. У нас так вышло с плашкой про cookie: её стили лежали в ленивом файле, и на мобильном, где плашка занимала заметную часть экрана, LCP задерживался на 1,4 секунды.

Правило простое: стили всего, что видно в первом кадре, — в основном CSS.

Может, просто сделать анимацию быстрее?

Короче — лучше, но элемент всё равно будет невидимым до старта скриптов, а это время PageSpeed растягивает моделью медленного процессора. Надёжнее, чтобы крупнейший элемент был виден сразу.

Это касается и prefers-reduced-motion?

Уважать эту настройку стоит в любом случае — для людей, которым анимации мешают. Но PageSpeed её не включает, так что на оценку она не влияет.