Типы записей: largest-contentful-paint, layout-shift, event, paint

Largest Contentful Paint (LCP)

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

Ключевые моменты LCP:

  • Считается только видимое содержимое, включая изображения, видео и текстовые блоки.

  • Элемент должен находиться в видимой части экрана (viewport).

  • LCP фиксируется при первом появлении наибольшего элемента, а не всех элементов одновременно.

  • Метрика имеет следующие ориентиры:

    • Хорошо: ≤ 2.5 секунды
    • Требует улучшения: 2.5–4 секунды
    • Плохо: > 4 секунды

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

import { getLCP } from 'web-vitals';

getLCP(metric => {
  console.log('LCP:', metric.value);
});

Эта функция позволяет отслеживать реальное время отображения ключевого контента и передавать данные для анализа.

Layout Shift (CLS)

Cumulative Layout Shift измеряет суммарную нестабильность макета страницы — насколько элементы неожиданно смещаются в процессе загрузки и взаимодействия пользователя.

Основные характеристики CLS:

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

  • Суммируются только сдвиги без взаимодействия пользователя.

  • CLS особенно важен для динамического контента, баннеров и рекламы, которые подгружаются после рендера основной страницы.

  • Оценка CLS:

    • Хорошо: ≤ 0.1
    • Требует улучшения: 0.1–0.25
    • Плохо: > 0.25

Пример мониторинга CLS:

import { getCLS } from 'web-vitals';

getCLS(metric => {
  console.log('CLS:', metric.value);
});

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

Event (FCP, FID, TBT)

Тип записей event объединяет метрики, фиксирующие время отклика интерфейса на действия пользователя и взаимодействия с событиями.

Основные метрики:

  • First Input Delay (FID) — задержка между первым взаимодействием пользователя (клик, нажатие клавиши) и моментом обработки события браузером.
  • Total Blocking Time (TBT) — суммарное время, когда основной поток блокируется длинными задачами и не может реагировать на события.
  • First Contentful Paint (FCP) — момент, когда появляется первый фрагмент текста или изображения.

Пример отслеживания FID:

import { getFID } from 'web-vitals';

getFID(metric => {
  console.log('FID:', metric.value);
});

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

Paint (FCP, FP)

Тип записей paint фиксирует момент, когда браузер визуализировал первый пиксель содержимого. Это важная метрика для оценки восприятия скорости загрузки страницы.

Ключевые особенности:

  • First Paint (FP) — первый момент появления любого визуального элемента на странице.
  • First Contentful Paint (FCP) — более точная метрика, учитывающая первый текст или изображение, который виден пользователю.
  • Метрики paint позволяют анализировать производительность рендеринга и критический путь CSS.

Пример получения FCP:

import { getFCP } from 'web-vitals';

getFCP(metric => {
  console.log('FCP:', metric.value);
});

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

Особенности интеграции и использования Web Vitals

  • Все типы записей могут отправляться на сервер аналитики в реальном времени для мониторинга производительности.
  • Метрики поддерживают подписку на обновления через callback-функции, что позволяет гибко обрабатывать данные в SPA и динамических страницах.
  • Использование Web Vitals совместно с инструментами вроде Lighthouse и Chrome DevTools позволяет связывать метрики с конкретными элементами DOM и оптимизировать страницы под Core Web Vitals.
Оглавление