Core Web Vitals и LCP: где лендинги теряют скорость без видимой причины

Core Web Vitals и LCP: где лендинги теряют скорость без видимой причины

Давайте разберем под капотом. LCP почти всегда ломают не «тяжёлые» страницы, а несколько типовых ошибок:
— большой hero-баннер в JPG/PNG вместо сжатого WebP или AVIF;
— фоновые изображения через CSS, которые не получают приоритет;
— блокирующий CSS и JS в head;
— шрифты без preload и с лишними начертаниями;
— первый экран, который собирается из 5–7 запросов вместо 1–2.

Что проверять первым: размер LCP-элемента, время ответа сервера, критический CSS и порядок загрузки ресурсов. Если герой — картинка, задайте ей явный width/height, preload и правильный srcset. Если герой — текст, уберите лишние webfonts и не делайте тяжелые анимации на первом экране. Самая частая ошибка — оптимизировать «всё подряд», не тронув именно тот элемент, который и является LCP.

По CLS правила простые: фиксируйте размеры медиа, резервируйте место под баннеры и не вставляйте контент выше уже отрисованного блока. Для INP убирайте длинные задачи в main thread, режьте сторонние виджеты и откладывайте то, что не нужно для первого взаимодействия.

Вердикт для продакшена: сначала находите конкретный LCP-элемент и чините его путь загрузки, а не «ускоряйте сайт» целиком. Именно так получают заметный эффект без лишнего рефакторинга.