Core Web Vitals и LCP: где лендинги теряют скорость и конверсию

Core Web Vitals и LCP: где лендинги теряют скорость и конверсию

LCP почти всегда ломают не «тяжёлые страницы», а несколько типовых ошибок:
— главный баннер в JPG/PNG вместо сжатого WebP или AVIF;
— фон и первый экран тянутся из CSS, а не подгружаются заранее;
— шрифты блокируют рендер и заставляют текст ждать;
— на первом экране лежат лишние скрипты, виджеты и анимации.

Давайте разберем под капотом. Для LCP важны четыре вещи: размер и формат hero-изображения, приоритет загрузки, серверный ответ и отсутствие блокирующих ресурсов. Если картинка выше фолда, ей нужен preload; если это фон — лучше вынести в обычный с object-fit. Так браузер раньше поймёт, что именно рисовать первым.

По Core Web Vitals чаще всего проседает не только LCP, но и CLS с INP. Чтобы не ловить «прыжки» макета, заранее задавайте размеры медиа-блокам и рекламе. Чтобы не тормозить интерактив, откладывайте всё, что не влияет на первый экран: чаты, аналитические теги, карусели, тяжёлые анимации. Один лишний SDK на лендинге часто дороже, чем кажется.

Вердикт для продакшена: сначала оптимизируйте hero-блок, потом шрифты, потом скрипты. Если после этого метрики всё ещё плохие, смотрите сервер, кеш и TTFB. На практике именно этот порядок даёт самый быстрый прирост без переписывания всей страницы.