Функция onLCP и её параметры

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

Импорт и использование

Для использования функции необходимо подключить библиотеку Web Vitals и импортировать onLCP:

import { onLCP } from 'web-vitals';

Вызов функции onLCP выглядит следующим образом:

onLCP(callback, reportAllChanges);
  • callback — функция, которая будет вызвана при измерении LCP.
  • reportAllChanges — необязательный булевый параметр, определяющий, нужно ли получать все изменения LCP до окончательного значения. По умолчанию false.

Параметр callback

callback принимает один объект с информацией о метрике. Основные поля этого объекта:

  • name — название метрики, в данном случае всегда "LCP".

  • value — числовое значение LCP в миллисекундах. Отражает время до рендеринга наибольшего видимого элемента.

  • id — уникальный идентификатор метрики для текущей сессии.

  • entries — массив объектов PerformanceEntry, предоставляющий полные данные о событиях рендеринга.

  • rating — строковое значение, отражающее категорию производительности:

    • "good" — LCP меньше 2.5 секунд.
    • "needs-improvement" — LCP от 2.5 до 4 секунд.
    • "poor" — LCP больше 4 секунд.

Пример использования:

onLCP(metric => {
  console.log(metric.name);   // "LCP"
  console.log(metric.value);  // 2345.23
  console.log(metric.rating); // "needs-improvement"
});

Параметр reportAllChanges

По умолчанию LCP фиксируется только один раз — когда элемент считается окончательным. Если передать true в reportAllChanges, callback будет вызываться каждый раз при обновлении наибольшего элемента контента, что полезно для анализа динамических страниц:

onLCP(metric => {
  console.log(metric.value);
}, true);

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

Особенности обработки entries

Поле entries содержит объекты типа LargestContentfulPaint с подробными данными:

  • startTime — время появления элемента на экране в миллисекундах.
  • renderTime — момент, когда элемент был отрисован браузером.
  • loadTime — время полной загрузки элемента (для изображений и видео).
  • size — размер элемента в пикселях.
  • element — ссылка на DOM-элемент, который считается крупнейшим на момент измерения.

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

Типичные сценарии использования

  1. Мониторинг производительности в реальном времени
onLCP(metric => {
  sendToAnalytics(metric);
});
  1. Отслеживание изменений на динамических страницах
onLCP(metric => {
  console.log(`Текущее значение LCP: ${metric.value}`);
}, true);
  1. Анализ отдельных элементов
onLCP(metric => {
  console.log(`Крупнейший элемент:`, metric.entries[0].element);
});

Рекомендации по оптимизации LCP

  • Оптимизировать загрузку изображений: использовать форматы WebP или AVIF, lazy-loading для элементов вне экрана.
  • Минимизировать блокирующие ресурсы, такие как тяжелые CSS или JavaScript, влияющие на рендеринг.
  • Загружать важный контент через critical CSS или инлайновые стили для ускорения отображения.
  • Использовать <link rel="preload"> для крупных элементов, чтобы ускорить их загрузку.

Функция onLCP предоставляет детальную информацию о том, как быстро пользователи видят основной контент страницы. Использование параметра reportAllChanges вместе с полем entries позволяет проводить глубокий анализ и точечно оптимизировать производительность.

Оглавление