[object Object]

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

Поскольку пользователи оценивают скорость веб-страницы по тому, насколько быстро основной контент становится видимым и читаемым, LCP широко считается наиболее важным показателем производительности загрузки.Следовательно, Google включает LCP в свои официальные сигналы ранжирования страниц для органического поиска.

Резюме «Ответ в первую очередь»

Largest Contentful Paint (LCP) — это показатель Core Web Vital, который измеряет воспринимаемую скорость загрузки страницы по времени, когда самый большой видимый текстовый блок или элемент изображения в области просмотра завершает рендеринг.Проходной балл LCP составляет 2,5 секунды или меньше как минимум для 75 % посещений страниц в данных полей реальных пользователей (CrUX).Задержка LCP состоит из четырех отдельных частей: время до первого байта (TTFB), задержка загрузки ресурса, продолжительность загрузки ресурса и задержка рендеринга элемента.Оптимизация LCP требует предварительной загрузки главных ресурсов, развертывания пограничного кэширования, сжатия изображений в форматы WebP/AVIF и исключения CSS и JavaScript, блокирующих рендеринг.

Шкала оценки LCP и пороговые значения основных веб-жизненных показателей

Чтобы обеспечить быстрый и привлекательный опыт для пользователей, веб-страницы должны соответствовать установленным Google пороговым значениям Core Web Vitals для наибольшего содержания:

Время рендеринга LCP	Рейтинг производительности	Влияние пользователей и сигнал ранжирования в поиске Google
$\le 2.5\text{секунды}$	Хорошо (Зеленый)	Быстрая воспринимаемая загрузка;полностью соответствует оценке Google Core Web Vitals.
$> 2.5\text {s} $ и $\le 4.0\text {s} $	Требует улучшения (Желтый)	Заметная задержка загрузки;потенциальное снижение показателей мобильной конверсии и рейтинга в поисковых системах.
$> 4.0\text{секунды}$	Плохо (Красный)	Сильная задержка визуальной загрузки;высокие показатели отказов пользователей и штрафы за рейтинг в поиске.

Чтобы получить проходной балл для оценки Core Web Vitals, веб-сайт должен получить оценку LCP в категории Хорошо ($\le 2,5\text{ секунд}$) как минимум для 75 % посещений страниц, оцененных по группам настольных компьютеров и мобильных устройств на основе реальных полевых данных.

Какие элементы DOM подлежат оценке LCP?

Согласно официальной спецификации W3C Largest Contentful Paint, браузер отслеживает определенные видимые элементы DOM, расположенные в исходном окне просмотра:

Стандартные элементы <img> (включая изображения, отображаемые внутри адаптивных тегов <picture>).
Элементы <image>, встроенные в векторный контейнер <svg>.
Изображения видеопостеров (атрибут poster элемента <video>).
Элементы с фоновым изображением CSS, загруженные с помощью функции url().
HTML-контейнеры блочного уровня, содержащие текстовые узлы или дочерние элементы встроенного текста (например, заголовки от <h1> до <h6>, абзацы <p> или блоки <div>).

Деконструкция LCP: четыре части

Чтобы эффективно диагностировать и оптимизировать медленные показатели Largest Contentful Paint, инженеры по производительности разбивают задержку LCP на четыре отдельные части:

Время до первого байта (TTFB): время, прошедшее с момента запроса пользователем страницы до получения браузером первого байта ответа HTML-документа от сервера.Цель: $< 800\text {ms} $ (40$%$ бюджета LCP).
Задержка загрузки ресурса: задержка между моментом завершения получения HTML-документом байтов ответа и моментом, когда браузер обнаруживает и начинает получать ресурс LCP (например, главное изображение).Цель: $< 200\text {ms} $ (10%$ бюджета LCP).
Продолжительность загрузки ресурса: продолжительность, необходимая браузеру для загрузки изображения LCP или ресурса шрифта по сети.Цель: $< 800\text {ms} $ (40$%$ бюджета LCP).
Задержка рендеринга элемента: время между завершением загрузки ресурса LCP и моментом, когда браузер завершает расчеты макета и отображает элемент на экране.Цель: $< 200\text {ms} $ (10%$ бюджета LCP).

Математически общая задержка LCP представляет собой сумму этих четырех частей:

$$\text {LCP} = \text {TTFB} + \text{Задержка загрузки ресурса} + \text{Продолжительность загрузки ресурса} + \text{Задержка отрисовки элемента}$$

Проверенные методы оптимизации LCP

Устраните задержку загрузки ресурсов. Добавьте <link rel="preload" as="image" href="..."> или fetchpriority="high" в тег главного изображения, чтобы браузер сразу инициировал загрузку изображения во время анализа HTML.
Оптимизация ответа сервера (TTFB). Разверните пограничное кэширование через CDN, оптимизируйте производительность запросов к базе данных и используйте принудительное мультиплексирование сервера HTTP/2 или HTTP/3.
Сжимайте и модернизируйте изображения. Подавайте главные изображения в современных форматах WebP или AVIF с адаптивными размерами srcset, адаптированными к размерам экранов мобильных устройств и настольных компьютеров.
Уменьшите количество ресурсов, блокирующих рендеринг. Встройте критический CSS в тег <head> и отложите некритичный JavaScript с помощью атрибутов скрипта defer или async.
Оптимизация загрузки веб-шрифтов. Используйте font-display: swap или font-display: optional в правилах CSS @font-face, чтобы текстовые блоки оставались видимыми сразу же, пока веб-шрифты завершают загрузку по сети.

LCP против первой контентной отрисовки (FCP) против индекса скорости

Хотя LCP, FCP и Speed Index измеряют производительность загрузки, они фиксируют различные аспекты прогресса загрузки страницы:

Первая отрисовка содержимого (FCP): измеряет момент завершения рендеринга на экране самого первого элемента DOM (например, цвета фона, счетчика или текста заголовка).
Наибольшая отрисовка контента (LCP): измеряет момент завершения рендеринга основного элемента визуального контента (главного баннера или блока основного абзаца).
Индекс скорости: измеряет, насколько быстро визуальный контент заполняет область просмотра с течением времени во время записи визуального прогресса.

LCP имеет самый высокий вес среди показателей загрузки в алгоритме оценки Google Lighthouse (в настоящее время 25% от общего показателя производительности), поскольку он наиболее точно соответствует восприятию реальных пользователей завершения загрузки страницы.

Непрерывный мониторинг LCP с помощью SimpleOps

SimpleOps автоматизирует отслеживание Largest Contentful Paint, собирая результаты синтетического лабораторного аудита Lighthouse и показатели набора полевых данных Chrome UX Report (CrUX) на единой унифицированной панели мониторинга.SimpleOps отправляет мгновенные упреждающие оповещения всякий раз, когда 75-й процентиль LCP вашего сайта превышает ваш 2,5-секундный бюджет производительности, что дает вашей команде возможность защитить конверсии и рейтинг в поисковых системах.