Core Web Vitals и LCP: 5 узких мест, которые ломают скорость лендинга

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, затем уберите всё, что мешает ему появиться первым. Если после этого страница всё ещё медленная, проблема уже не в «оптимизации картинок», а в архитектуре загрузки. Вердикт для продакшена: сначала ускоряем первый экран, потом полируем остальное.