Какие элементы считаются кандидатами на LCP

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

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

Основные типы элементов-кандидатов

  1. Блочные элементы с текстом Кандидатами могут быть элементы, содержащие текст, если они видимы и имеют ненулевую ширину и высоту. Это могут быть:

    • <h1>, <h2>, <p> и другие текстовые блоки, формирующие основной контент страницы.
    • Текст внутри <div> или <section>, если он крупный или занимает значительную площадь видимой области.

    Ключевой момент: LCP не учитывает элементы, скрытые через display: none, visibility: hidden или opacity: 0.

  2. Изображения Изображения, загруженные через <img> или через CSS-фон (background-image), также являются кандидатами, если:

    • Они полностью или частично видимы в момент рендеринга.
    • Имеют явные размеры или размер вычислен браузером.

    LCP учитывает не только стандартные <img> элементы, но и <picture> и <video poster> (постерное изображение видео).

  3. Элементы <video> Видео-контент с атрибутом poster рассматривается как кандидат на LCP до начала воспроизведения. После начала воспроизведения LCP больше не будет учитывать видео-контент, если на экране отображается кадр из видео, но только если размер кадра превышает размеры других элементов-кандидатов.

  4. Фоновые изображения через CSS Фоновые изображения, заданные с помощью CSS, не учитываются напрямую LCP, если не используются через url() в блоках <img> или <picture>. Они могут стать кандидатом, если применяются к значимым блокам (например, через <img> или <video poster>).

Ограничения и исключения

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

Поведение при динамическом изменении страницы

LCP вычисляется по мере рендеринга страницы. Кандидаты могут меняться, если DOM обновляется или медленно загружаются ресурсы:

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

Практическая идентификация LCP-кандидатов

Для анализа можно использовать инструменты:

  • web-vitals библиотека: экспорт функции getLCP(callback) возвращает элемент LCP и время его рендеринга.
  • Chrome DevTools, вкладка Performance → Lighthouse, где можно увидеть Largest Contentful Paint element.
  • В JavaScript можно получить DOM-элемент LCP через PerformanceObserver с типом 'largest-contentful-paint':
const observer = new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();
  const lastEntry = entries[entries.length - 1];
  console.log('LCP элемент:', lastEntry.element);
  console.log('Время LCP:', lastEntry.startTime);
});
observer.observe({ type: 'largest-contentful-paint', buffered: true });

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

Итоговые критерии для LCP-кандидатов

  1. Видимость: элемент находится в viewport.
  2. Размер: элемент достаточно велик, чтобы считаться значимым.
  3. Тип: текстовые блоки, <img>, <picture>, <video poster>.
  4. Рендеринг: элемент должен быть реально отображен, а не скрыт стилями.
  5. Время появления: LCP учитывает элемент в момент его отрисовки, динамически появляющиеся элементы могут изменить значение.

Эти критерии позволяют точно определить, какие элементы страницы влияют на Largest Contentful Paint, и на что стоит обращать внимание при оптимизации производительности.

Оглавление