LCP почти всегда ломают одни и те же вещи: тяжёлый hero-блок, фоновые видео, большие картинки без сжатия и CSS, который блокирует первый рендер. Если главный экран собирается из 5–7 медиафайлов, браузер сначала ждёт их, а потом уже показывает смысл страницы.
Проверяйте по порядку:
— hero-изображение должно быть в WebP/AVIF и без лишнего запаса по размеру;
— не грузите слайдеры и видео в первый экран, если они не несут продажи;
— критический CSS выносите отдельно, остальное — с отложенной загрузкой;
— шрифты подключайте без лишних начертаний и с разумным fallback.
Частая ошибка — оптимизировать “всё подряд”, но оставить один тяжёлый баннер, который и держит LCP.
По INP и CLS правило простое: меньше JS в первом экране, меньше внезапных подмен блоков, меньше анимаций на старте. Скрипты виджетов, чатов и аналитики не должны мешать отрисовке основного CTA. Если кнопка уезжает вниз из-за поздней подгрузки блока, вы теряете не только метрику, но и клики.
Вердикт для продакшена: сначала убирайте вес и блокировки из первого экрана, потом уже тюнингите остальную страницу. Если LCP не укладывается, проблема почти всегда видна в hero-блоке и цепочке загрузки.
Технологии сборки лендингов
@landing_page_tech_arb
Core Web Vitals и LCP: где лендинги теряют скорость и конверсию
Этот пост опубликован в Telegram-канале Технологии сборки лендингов. Подписаться можно по ссылке: @landing_page_tech_arb.