Core Web Vitals и LCP: 5 узких мест, которые ломают скорость лендинга
LCP почти всегда упирается не в «тяжёлый сайт», а в один конкретный элемент above the fold: большой hero, фон, заголовок или кнопка с лишней обвязкой. Давайте разберем под капотом.
• Уберите тяжёлый фон из первого экрана: лучше img с явным размером, чем CSS-растяжка без контроля.
• Не грузите hero через lazyload: браузер должен увидеть LCP-элемент сразу, без ожидания скрипта.
• Сожмите и отдавайте изображения в адекватном размере; 2x-арт для мобильного — частая причина лишних сотен килобайт.
• Шрифты и CSS не должны блокировать первый рендер: критический CSS — в голове, остальное — позже.
Что обычно ухудшает Core Web Vitals сильнее всего: тяжёлые виджеты, сторонние скрипты, анимации на старте и пересчёт вёрстки после загрузки. Если на первом экране есть карусель, видео или несколько трекеров, LCP почти всегда растёт вместе с CLS и INP.
Проверка проста: откройте страницу, найдите элемент LCP, затем уберите всё, что мешает ему появиться первым. Если после этого страница всё ещё медленная, проблема уже не в «оптимизации картинок», а в архитектуре загрузки. Вердикт для продакшена: сначала ускоряем первый экран, потом полируем остальное.
Технологии сборки лендингов
@landing_page_tech_arb
Core Web Vitals и LCP: 5 узких мест, которые ломают скорость лендинга
Этот пост опубликован в Telegram-канале Технологии сборки лендингов. Подписаться можно по ссылке: @landing_page_tech_arb.