Что такое Largest Contentful Paint (LCP): Простое Пояснение

Разберем Largest Contentful Paint (LCP): что такое, как его измеряют, и как оптимизировать для улучшения показателей Core Web Vitals.

Largest Contentful Paint (LCP) – это один из показателей пользовательского опыта от Google, который стал частью алгоритмов ранжирования в 2021 году.

LCP входит в тройку ключевых метрик  Core Web Vitals (CWV), отслеживающие технические параметры, влияющие на взаимодействие пользователей с сайтом.

Core Web Vitals существует в своеобразном парадоксе: Google одновременно подчеркивает их важность, но и снижает их влияние на ранжирование.

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

Что такое Largest Contentful Paint (LCP)?

LCP измеряет, сколько времени требуется для загрузки основного контента страницы и его готовности к взаимодействию с пользователем.

В частности, время от начала загрузки страницы до момента отображения наибольшего изображения или блока текста в видимой части экрана. Все, что находится ниже линии изгиба, не учитывается.

Обычно измеряемые элементы включают изображения, видео, фоновые изображения и текстовые блоки, такие как абзацы.

LCP состоит из нескольких подметрик:

• Время до первого байта (TTFB)
• Задержка загрузки ресурсов
• Продолжительность загрузки ресурсов
• Задержка рендеринга элементов

Оптимизация LCP предполагает улучшение каждой из этих подметрик, чтобы страница загружалась и отображала необходимые ресурсы менее чем за 2,5 секунды.

Пороговые значения LCP:

Давайте подробнее рассмотрим эти подметрики и способы их улучшения.

Время до Первого Байта (TTFB)

TTFB – это время ответа сервера, которое измеряет, сколько времени требуется браузеру пользователя, чтобы получить первый байт данных с вашего сервера. Это включает в себя время на DNS-запрос, обработку запросов сервером и перенаправление.

Оптимизация TTFB может значительно снизить общее время загрузки и улучшить показатель LCP.

На время ответа сервера влияют следующие факторы:

1. Запросы в базу данных

Если ваше время ответа высоко, следует определить источник проблемы. Это может быть из-за плохо оптимизированных запросов или большого объема запросов, которые замедляют сервер. Если у вас MySQL-база данных, можно вести лог медленных запросов, чтобы найти занимающие наибольшее время.

Если ваш сайт на WordPress, вы можете воспользоваться плагином  Query Monitor , чтобы увидеть, сколько времени занимают SQL запросы.

2. Кэш-пропуски CDN

Пропуск кэша CDN происходит, когда запрошенный ресурс не найден в кэше CDN, и запрос перенаправляется на сервер-источник. Это занимает больше времени, что приводит к увеличению задержки и продолжительному времени загрузки для конечного пользователя.

Обычно ваш CDN-провайдер предоставляет отчет о количестве кэш-пропусков.

Если вы наблюдаете высокий процент (>10%) кэш-пропусков, возможно, следует обратиться к провайдеру CDN или поддержке хостинга, чтобы решить проблему.

Вот реальный пример из поисковой консоли высокого времени ответа сервера (TTFB), вызванного пробелами кэша:

3. Неэффективный серверный рендеринг

На вашем сайте могут быть компоненты, зависящие от API сторонних сервисов. Например, вы видите количество прочтений и разделов на статьях. Мы получаем эти данные из различных API, но вместо того, чтобы делать это при каждом запросе к серверу, мы заранее получаем их и храним в нашей базе данных для более быстрого отображения.

Представьте себе, что мы подключаемся к подсчету общих ресурсов и API GA4 при поступлении запроса на сервер. Выполнение каждого запроса занимает примерно 300-500 мс, и мы добавили бы примерно ~1000 мс задержки из-за неэффективного воспроизведения на стороне сервера. Итак, убедитесь, что ваш сервер оптимизирован.

4. Хостинг

Важно понимать, что хостинг имеет большое значение для понижения TTFB. Выбрав правильный хостинг, вы сможете снизить свой TTFB в два-три раза.

Выберите хостинг  с интегрированным CDN и кэшированием. Это поможет избежать необходимости покупать CDN отдельно и сэкономить время на его обслуживании.

Инвестирование в правильный хостинг окупится сполна.

Задержка Загрузка Ресурса

Задержка загрузки ресурса – это время, необходимое браузеру для нахождения и начала загрузки LCP-ресурса.

Например, если у вас есть фоновое изображение в главном блоке, которое требует загрузки CSS-файлов для идентификации, возникает задержка, равная времени, необходимому для загрузки CSS-файла, чтобы начать загрузку LCP-изображения.

В случае когда LCP-элементом является текстовый блок, эта задержка равна нулю.

Оптимизируя скорость нахождения и загрузки этих ресурсов можно ускорить отображение важного контента. Один из способов сделать это – предварительно загрузить CSS-файлы и LCP-изображения, установив для изображения fetchpriority="high", чтобы CSS-файл загружался в первую очередь.

Однако лучший подход — если у вас достаточно контроля над сайтом — это встроить критический CSS для контента, находящегося в верхней части страницы, чтобы браузер не тратил время на загрузку CSS-файла. Это позволяет сэкономить трафик и предварительно загружать только изображения.

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

Еще одним фактором, способствующим задержке загрузки, является перенаправление .

Если у вас есть внешние ссылки с перенаправлениями, изменить это трудно. Но вы имеете контроль над внутренними ссылками, поэтому найдите внутренние ссылки с перенаправлениями, которые часто возникают из-за отсутствующих слешей, неправильных версий (WWW или без WWW) или измененных URL, и замените их на правильные адреса.

Существует множество инструментов для технического SEO, которые помогут просканировать сайт и найти перенаправления, требующие замены.

Продолжительность Загрузка Ресурса

Продолжительность загрузки ресурса – это фактическое время, затраченное на загрузку LCP-ресурса.

Даже если браузер быстро находит и начинает загрузку ресурса, низкая скорость загрузки может негативно повлиять на LCP. Это зависит от размера ресурса, скорости подключения сервера к сети и условий пользовательского подключения.

Чтобы уменьшить время загрузки, можно применить:

• Формат WebP.
• Правильный размер изображений (установить соответствие внутреннему и видимому размеру).
• Приоритизация загрузки.
• Использование CDN.

Задержка Отображение элемента

Задержка отображения элемента — это время, необходимое браузеру для обработки и рендеринга LCP-элемента.

На эту метрику оказывает влияние сложность HTML, CSS и JavaScript.

Уменьшение блокирующих ресурсов рендеринга и оптимизация кода помогут сократить эту задержку. Однако, если на странице работают тяжелые JavaScript-скрипты, блокирующие главный поток, отображение LCP-элемента может быть отложено, пока эти задачи не завершатся.

Здесь важны низкие значения метрики Общее Время Блокировки (TBT), которая измеряет время, в течение которого главный поток блокируется долгими задачами при загрузке страницы, что указывает на наличие тяжелых скриптов, которые могут задерживать рендеринг и реагирование.

Один из способов улучшить не только продолжительность и задержку загрузки, но и все показатели CWV во время навигации пользователей по вашему сайту – реализовать  API спекулятивных правил для будущих переходов. Благодаря предварительному рендерингу страниц, на которые пользователи, вероятно, перейдут при наведении курсора на ссылку, вы сможете сделать загрузку страниц мгновенным.

Избегайте ошибок при оценке LCP

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

С другой стороны, элементы, изначально находящиеся в видимой части экрана, но впоследствии смещенные за его пределы, могут быть учтены при вычислении LCP.

Как измерить Показатель LCP

Существуют два вида инструментов для оценки LCP: полевые ( Field Tools ) и лабораторные ( Lab Tools ).

Полевые инструменты предоставляют реальные измерения сайта при использовании.

Лабораторные инструменты дают виртуальный показатель, основываясь на смоделированном анализе с использованием алгоритмов, имитирующих условия Интернета, с которыми может сталкиваться типичный пользователь мобильного устройства.

Чтобы найти ресурсы LCP и измерить время их отображения, вы можете использовать DevTools > Performance report.

Оптимизация LCP — Более сложный Вопрос

Улучшение LCP является важным шагом к улучшению CWV, но это может быть самой сложной метрикой для оптимизации.

LCP состоит из многих подметрик, каждая из которых нуждается в глубоком понимании для эффективной оптимизации.

Этот гид дал вам базовое представление об улучшении LCP, а полученные знания помогут сделать значительные улучшения.

Но есть еще многое, что нужно узнать. Оптимизация каждой подметрики – это сложный и детальный процесс. Следите за новостями, ведь мы готовим к публикации развернутые гиды, посвященные оптимизации каждой подметрики.