Что такое LCP? Крупнейший контентный отрисовщик (LCP)

Максимально допустимый контент (ЛКП) — важная метрика, ориентированная на пользователя, для измерения воспринимаемой скорости загрузки, поскольку она отмечает момент на шкале загрузки страницы, когда её основное содержимое практически загружено. Быстрый LCP помогает пользователям быть уверенными в корректности страницы.

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

Такой какнагрузкаилиDOMContentLoaded (содержимое DOM загружено)Эти старые показатели не очень хороши, поскольку они не обязательно соответствуют тому, что пользователь видит на экране.Первая контентная отрисовка (FCP)Эти новые, ориентированные на пользователя показатели производительности отражают только самый начальный этап загрузки. Если на странице отображается заставка или индикатор загрузки, эти моменты не так важны для пользователя.

В прошлом мы рекомендовали некоторые показатели эффективности, такие какПервая значимая краска (FMP)иИндекс скорости (СИ) (Обе метрики включены в инструмент Lighthouse) Эти метрики помогают лучше охватить опыт загрузки после первоначальной отрисовки, но они сложны, трудны для интерпретации и часто неточны, то есть они по-прежнему не могут определить, когда основное содержимое страницы завершило загрузку.

Иногда меньше значит лучше.Рабочая группа W3C по веб-производительностиНа основе обсуждений и исследований, проведенных Google, мы пришли к выводу, что более точный способ измерения времени загрузки основного содержимого страницы — это проверка момента завершения отрисовки самого большого элемента.

Что такое ЛКП?

Метрика «Отрисовка самого большого контента» (LCP) основана на страницеПервая загрузка стартаМаксимальная видимая область в зоне просмотра сообщается в момент времениИзображение или текстовый блокОтносительное время завершения рендеринга.

Что представляет собой хороший результат LCP?

Чтобы обеспечить хороший пользовательский опыт, веб-сайты должны стремиться сохранить максимальное количество контента внутри2,5 секундыЧтобы гарантировать достижение рекомендуемого целевого значения во время большинства посещений ваших пользователей, хороший порог измерения75-й процентиль, и этот порог применяется как к мобильным, так и к настольным устройствам

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

Какие элементы принимаются во внимание?

Согласно текущемуAPI для максимально содержательной отрисовкиСогласно положениям, типы элементов, рассматриваемые для максимального содержания картины, следующие:

изображениеэлемент
ВстроенныйSVG-файлВнутри элементаизображениеэлемент
видеоэлемент (использующий изображение обложки)
проходитьURL()функция (вместо использованияCSS-градиенты) загружен с элементом фонового изображения
Содержит текстовые узлы или другие дочерние элементы текстового уровня.Блочные элементы.

Обратите внимание, что мы намеренно ограничили элементы этими несколькими типами для упрощения на начальном этапе. Мы можем добавить другие элементы в будущем, по мере углубления исследования (например,SVG-файл 、 видео).

Как определить размер элемента?

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

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

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

Для всех элементов любые поля, отступы и границы, установленные с помощью CSS, не учитываются.

Определение принадлежности текстовых узлов к тем или иным элементам иногда может быть сложной задачей, особенно для элементов, дочерние элементы которых включают как строчные элементы, так и обычные текстовые узлы, а также являются частью блочного элемента. Ключевой момент заключается в том, что каждый текстовый узел принадлежит своему ближайшему предку на блочном уровне (и только ему).Стандартизированная терминологияОбъяснение: Каждый текстовый узел принадлежитСодержащий блокСоответствующий элемент.

Когда сообщается о наибольшей отрисовке содержимого?

Веб-страницы часто загружаются поэтапно, поэтому самый большой элемент на странице может измениться.

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

Например, на странице с текстом и изображением заголовка браузер может сначала отобразить только текстовую часть и отправитьсамая большая-содержательная-краскаЭлемент, атрибут элемента которого обычно относится кпилиh1 Затем, как только первое изображение загрузится, браузер отправит второесамая большая-содержательная-краскаАтрибут элемента будет ссылаться наизображение .

Важно отметить, что элемент считается самым крупным элементом контента только после завершения его отрисовки и появления на экране. Изображения, которые ещё не загружены, не считаются отрисованными.Период блокировки шрифтовТо же самое справедливо и для текстовых узлов, использующих веб-шрифты. В этом случае меньший элемент может быть указан как самый большой элемент содержимого, но после завершения отрисовки большего элемента он будет указан как самый большой элемент содержимого.PerformanceEntryСубъект сообщает.

Помимо ленивой загрузки изображений и шрифтов, страница может добавлять новые элементы в DOM по мере появления нового контента. Если какой-либо из новых элементов больше предыдущего самого большого элемента контента, браузер также сообщит о новомPerformanceEntry.

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

До Chrome 88 удаленный элемент не считался самым большим элементом контента, и удаление текущего кандидата приводило к отправке браузером нового.самая большая-содержательная-краскаОднако эта метрика была обновлена, чтобы более точно отражать пользовательский опыт при использовании популярных шаблонов пользовательского интерфейса (например, каруселей изображений, из которых часто удаляются элементы DOM). См.Журнал изменений для более подробной информации.

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

Для аналитических целей следует сообщать только о самых последних распространенныхPerformanceEntry.

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

Время загрузки и время рендеринга

Из соображений безопасности,Время-Разрешить-ИсточникВ заголовке метка времени рендеринга изображения не отображается. Вместо этого отображается только время загрузки изображения (поскольку время загрузки уже отображается многими другими веб-API).

НижеПримеры использованияКак обрабатывать элементы, для которых время рендеринга недоступно. Тем не менее, мы всегда рекомендуем настроитьВремя-Разрешить-Источникзаголовки, что делает ваши метрики более точными.

Как обрабатывать изменения макета и размера элементов?

Чтобы снизить затраты на расчёт и распределение новых показателей производительности, изменения размера или положения элемента не приводят к появлению новых кандидатов LCP. Учитываются только исходные размер и положение элемента в области просмотра.

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

Пример

В следующих примерах показано, когда на некоторых популярных веб-сайтах происходит самая большая отрисовка контента:

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

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

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

На первом кадре вашей ленты Instagram вы, возможно, заметили, что значок камеры не обрамлён зелёной рамкой. Это связано с тем, что значок представляет собойSVG-файлэлементы иSVG-файлЭтот элемент в настоящее время не рассматривается как кандидат LCP. Первым кандидатом LCP является текст во втором кадре.

Как измерить LCP

LCP может бытьлабораторияИзмерить илидействительныйИзмерено и может быть использовано в следующих инструментах:

Инструменты измерения

Лабораторные инструменты

Измерение LCP в JavaScript

Для измерения LCP в JavaScript вы можете использоватьAPI для максимально содержательной отрисовки В следующем примере показано, как создатьPerformanceObserverдля прослушивания записи largest-contentful-paint и ее регистрации в консоли.

новый PerformanceObserver((entryList) => { для (константная запись entryList.getEntries()) { console.log('LCP-кандидат:', entry.startTime, entry); } }).observe({type: 'largest-contentful-paint', buffered: true});

Приведенный выше код показывает, каксамая большая-содержательная-краскаЗаписи регистрируются в консоли, но измерение LCP в JavaScript — более сложный процесс. Подробности ниже:

В приведенном выше примере каждый записанныйсамая большая-содержательная-краскаЗапись представляет собой текущего кандидата LCP. Обычно значение startTime, выданное последней записью, является значением LCP, но это не всегда так. Не всесамая большая-содержательная-краскаЭлементы могут быть использованы для измерения LCP.

В следующих разделах перечислены различия между тем, что сообщает API, и тем, как рассчитываются показатели.

Различия между метриками и API

API распределяет записи largest-contentful-paint для страниц, загруженных в фоновых вкладках, но эти страницы следует игнорировать при расчете LCP.
API продолжает отправлять записи largest-contentful-paint после того, как страница переходит на фоновый режим, но эти записи следует игнорировать при расчете LCP (элементы учитываются только тогда, когда страница всегда находится на переднем плане).
Когда страница пропускаетсяКэш туда и обратноAPI не сообщает о записи с наибольшим объемом отрисовки содержимого при возобновлении работы, но в таких случаях следует измерять LCP, поскольку это представляет собой несколько отдельных посещений страницы пользователем.
API не учитывает элементы внутри iframe, но для корректного измерения LCP их необходимо учитывать. Дочерние фреймы могут использовать API для передачи записи с наибольшим количеством отрисовываемого контента для этих элементов родительскому фрейму для агрегации.

Вместо того, чтобы помнить все эти нюансы, разработчики могут использоватьбиблиотека JavaScript web-vitalsДля измерения LCP библиотека сама обрабатывает эти различия (где это возможно):

импорт {getLCP} из 'web-vitals'; // Измерьте и запишите данные, как только LCP станет доступен. получитьLCP(console.log);

Полный пример измерения LCP в JavaScript можно найти в исходном коде getLCP().

В некоторых случаях (например, в кроссдоменных iframe) LCP невозможно измерить в JavaScript. Подробнее см. в библиотеке web-vitals.ограничениечасть.

Что делать, если самый большой элемент не является самым важным элементом?

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

Как улучшить LCP

На LCP в основном влияют четыре фактора:

Медленное время отклика сервера
JavaScript и CSS блокируют рендеринг
Время загрузки ресурса
Рендеринг на стороне клиента

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