Что такое LCP и как его оптимизировать для SEO

LCP это важнейшая метрика пользовательского опыта и фактор ранжирования Google. Когда пользователь переходит на вашу страницу, его не волнует общее время загрузки. Ему важно, когда он увидит основное содержимое и сможет начать читать или взаимодействовать со страницей. LCP измеряет именно этот момент: когда становится видимым самый крупный элемент контента. Если LCP в порядке, страница кажется быстрой. Если нет, она кажется медленной, даже при хороших остальных метриках.

Оптимизация LCP требует трёх направлений работы: сократить время ответа сервера (TTFB), убрать ресурсы, блокирующие отрисовку, и оптимизировать изображения. Каждое направление устраняет свои «узкие места» LCP. Вместе они дают значительное улучшение.

Что такое LCP и как его измеряют

Largest Contentful Paint (LCP) это время отрисовки самого крупного видимого элемента контента на странице. Это может быть большое изображение, видео, заголовок или текстовый блок. LCP отсчитывается от момента перехода пользователя на страницу до момента, когда этот элемент становится видимым. Документация Google по LCP содержит подробную техническую информацию и стратегии оптимизации.

LCP не бинарная метрика «пройдено или нет», а непрерывная оценка. Google определил, что LCP менее 2,5 секунды это «хорошо», LCP от 2,5 до 4 секунд нужно улучшать, а LCP более 4 секунд это плохо. Пользователи воспринимают страницы с LCP менее 2 секунд как очень быстрые. Страницы с LCP 3-4 секунды ощутимо медленнее. Страницы с LCP более 5 секунд часто бросают.

LCP меняется во время загрузки страницы, по мере появления более крупных элементов. Если огромное изображение загружается на третьей секунде, LCP перескакивает с 1 секунды на 3. Это важно: оптимизировать только время первой отрисовки недостаточно. Нужно, чтобы быстро загружались все крупные элементы контента.

Что такое Time to First Byte (TTFB)

Time to First Byte (TTFB) это время от начала перехода до момента, когда сервер возвращает первый байт HTML-документа. TTFB задаёт нижнюю границу LCP. Если TTFB равен 2 секундам, LCP не может быть лучше 2 секунд, потому что браузер ещё даже не получил HTML. Сокращение TTFB необходимо для сокращения LCP.

Хороший TTFB: менее 600 миллисекунд. TTFB от 600 до 1800 мс нужно улучшать. TTFB более 1800 мс это плохо. Если ваш TTFB медленный, сначала займитесь оптимизацией сервера. Никакая оптимизация клиентской части не компенсирует медленный сервер.

Частые причины медленного TTFB: неэффективный серверный код, запросы к базе данных или перегрузка сервера. Медленный хостинг также приводит к высокому TTFB. Виртуальный общий хостинг часто работает крайне медленно. Перейдите на VPS или облачный хостинг, чтобы повысить производительность. Используйте CDN, чтобы сократить TTFB, отдавая контент с серверов рядом с пользователями.

PageSpeed Insights показывает ваш TTFB в разделе «Время ответа сервера». Если TTFB является узким местом, он будет выделен как приоритет.

Как определить самый крупный элемент контента

LCP зависит от того, какой элемент на вашей странице самый крупный. В записи блога это может быть большое главное изображение. На странице товара это может быть фото товара. На новостном сайте это может быть заголовок статьи. Определить элемент LCP это первый шаг к его оптимизации.

Используйте Chrome DevTools, чтобы определить элемент LCP. Откройте DevTools, перейдите на вкладку Performance, начните запись и перезагрузите страницу. В записи найдите отметку «Largest Contentful Paint». Наведите на неё курсор, чтобы увидеть, какой элемент вызвал LCP. Когда вы знаете элемент, оптимизируйте его.

Элемент LCP чаще всего изображение. Изображения велики и загружаются после разбора HTML. Для большинства сайтов именно оптимизация загрузки изображений даёт самый большой эффект для LCP. Изображения ниже первого экрана можно загружать отложенно, что ускоряет LCP для содержимого первого экрана.

Предзагрузка критичных ресурсов

Предзагрузка сообщает браузеру, что нужно начать скачивание ресурса заранее, до того как он понадобится для отрисовки. Выполняйте предзагрузку изображения LCP и других критичных ресурсов с помощью тегов `` в head HTML. Так вы говорите браузеру: «начни скачивать этот ресурс немедленно».

Пример: `` сообщает браузеру, что нужно сразу начать скачивать главное изображение, не дожидаясь разбора CSS. Это может сократить LCP на 100-500 мс в зависимости от размера ресурса.

С предзагрузкой нужно быть осторожным. Слишком много предзагружаемых ресурсов впустую расходуют трафик. Предзагружайте только самые критичные ресурсы (главное изображение, критичные шрифты, необходимый CSS). Руководство Google по оптимизации Core Web Vitals объясняет лучшие практики предзагрузки.

Оптимизация изображений для LCP

Если элемент LCP это изображение, оптимизируйте размер файла и стратегию загрузки. Три приёма:

Сожмите изображение. Используйте такие инструменты, как TinyPNG, ImageOptim или Squoosh, чтобы сжимать без потери качества. Сжатие JPEG может уменьшить размер файла в 10-40 раз. Каждые 100 КБ размера изображения добавляют 100-200 мс к LCP в сетях 4G. Сжатие даёт высокую отдачу.

Используйте современные форматы. WebP на 25-35% меньше JPEG. AVIF ещё меньше. Используйте элемент HTML ``, чтобы отдавать WebP современным браузерам и JPEG старым для обратной совместимости. Один только выбор формата может улучшить LCP на 200-400 мс.

Указывайте размеры изображений. Атрибуты width и height предотвращают сдвиг макета и позволяют браузеру зарезервировать место до загрузки изображения. На LCP это напрямую не влияет, но улучшает Cumulative Layout Shift (CLS), ещё одну метрику Core Web Vitals.

CSS и JavaScript, блокирующие отрисовку

CSS, блокирующий отрисовку, не даёт браузеру показать страницу, пока CSS не будет скачан и разобран. Большие файлы CSS задерживают отрисовку. Минимизируйте CSS, блокирующий отрисовку: встройте критичный CSS в страницу, а остальной отложите.

Критичный CSS это CSS, нужный для содержимого первого экрана. Встройте этот CSS в `