Полный список экспортируемых типов

Библиотека Web Vitals предоставляет набор инструментов для измерения ключевых метрик производительности веб-страниц. В JavaScript она реализована через экспорт различных функций и типов, которые позволяют отслеживать метрики, такие как LCP (Largest Contentful Paint), FID (First Input Delay), CLS (Cumulative Layout Shift) и дополнительные показатели, например TTFB (Time to First Byte).

Экспортируемые функции

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

  1. getLCP(callback: MetricCallback, opts?: MetricOptions) Измеряет время до отображения самого крупного элемента контента на странице.

    • callback — функция, вызываемая при завершении измерения с объектом метрики.
    • opts — опции для настройки поведения (например, reportAllChanges для отслеживания нескольких изменений LCP).
    • Возвращает объект типа Metric, содержащий ключевые свойства: name, value, delta, id.

  2. getFID(callback: MetricCallback, opts?: MetricOptions) Отслеживает задержку первой интеракции пользователя с элементами страницы.

    • Основное свойство value указывает задержку в миллисекундах.
    • Объект Metric дополнительно включает entries — массив событий типа PerformanceEventTiming.

  3. getCLS(callback: MetricCallback, opts?: MetricOptions) Вычисляет суммарный сдвиг макета страницы, влияющий на визуальную стабильность.

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

  4. getTTFB(callback: MetricCallback) Измеряет время от начала запроса страницы до получения первого байта от сервера.

    • Использует данные performance.timing.
    • Объект Metric включает entries с типом PerformanceNavigationTiming.

Типы данных и структуры

В Web Vitals используется строгая типизация объектов метрик:

  • Metric Основная структура, передаваемая в колбэк каждой функции:

    interface Metric {
    name: string;        // Название метрики (LCP, FID, CLS, TTFB)
    value: number;       // Значение метрики
    delta: number;       // Изменение значения с последнего вызова
    id: string;          // Уникальный идентификатор метрики
    entries?: PerformanceEntry[]; // Опционально, массив событий Performance API
}

  • MetricCallback Тип функции обратного вызова:

    type MetricCallback = (metric: Metric) => void;

  • MetricOptions Настройки для функций измерения:

    interface MetricOptions {
    duration?: number;          // Продолжительность наблюдения метрики (в мс)
    reportAllChanges?: boolean; // Если true, возвращает все изменения метрики
    observer?: PerformanceObserver; // Пользовательский PerformanceObserver
}

Дополнительные вспомогательные типы

  • PerformanceEntry Интерфейс, используемый для хранения информации о событиях производительности:

    interface PerformanceEntry {
    name: string;
    entryType: string;
    startTime: number;
    duration: number;
    [key: string]: any;
}

  • WebVitalsMetricName Перечисление возможных названий метрик:

    type WebVitalsMetricName = 'LCP' | 'FID' | 'CLS' | 'TTFB' | 'FCP' | 'INP';

Работа с объектами метрик

Каждая функция возвращает объект Metric, который содержит как базовые данные, так и детализированные события из Performance API. Это позволяет:

  • Объединять значения нескольких измерений для анализа трендов.
  • Отслеживать динамические изменения метрик в реальном времени.
  • Использовать уникальные id для связывания метрик с конкретными элементами DOM или пользовательскими сессиями.

Практические особенности типов

  • entries доступны не для всех метрик: например, CLS и LCP могут иметь массив событий, FID содержит события первого ввода, TTFB использует данные сетевого запроса.
  • delta помогает вычислять изменения метрики при повторных измерениях на одной странице, что полезно при динамическом контенте.
  • MetricOptions.reportAllChanges позволяет получать несколько вызовов обратного вызова для метрик, которые могут изменяться в процессе работы страницы.

Эта строгая типизация и четкое разделение функций делают библиотеку Web Vitals мощным инструментом для анализа производительности, позволяя создавать гибкие системы мониторинга и оптимизации веб-страниц.

Оглавление