Performance API

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

Performance API используется в веб-аналитике для сбора реальных данных о скорости загрузки сайта у пользователей (Real User Monitoring, RUM), в инструментах мониторинга (Lighthouse, WebPageTest) и для отладки производительности в процессе разработки. Например, разработчик может измерить, сколько времени занимает рендеринг списка товаров в интернет-магазине, чтобы найти узкое место в коде.

API был введён в 2012 году и постоянно расширяется. В 2026 году ключевыми его компонентами являются Navigation Timing (загрузка страницы), Resource Timing (загрузка ресурсов), Paint Timing (метрики FCP, LCP) и Layout Instability (CLS). В отличие от сторонних инструментов, Performance API предоставляет данные, собранные непосредственно браузером, без накладных расходов на подключение внешних библиотек.

Кратко

Performance API - это встроенный в браузер инструмент для измерения скорости загрузки сайта. Он предоставляет данные о времени рендеринга страницы, загрузке изображений, выполнении скриптов и других этапах загрузки.

Что такое Performance API

Performance API - это интерфейс программирования приложений, встроенный в браузеры (Chrome, Firefox, Safari, Edge), который предоставляет высокоточные метрики времени загрузки и выполнения веб-страницы. Данные доступны через объект performance в консоли браузера и включают несколько подсистем.

Navigation Timing

Измеряет время навигации и загрузки документа: время DNS, установку TCP-соединения, время до первого байта (TTFB), время парсинга DOM и полной загрузки страницы (DOMContentLoaded, load).

Resource Timing

Фиксирует время загрузки каждого ресурса на странице: изображений, CSS, JavaScript, шрифтов. Для каждого ресурса доступны временные метки: начало запроса, ожидание, загрузка контента.

Paint Timing

Предоставляет метрики рендеринга: FCP (First Contentful Paint) - момент появления первого контента, LCP (Largest Contentful Paint) - момент отображения самого крупного элемента.

Layout Instability

Измеряет визуальную стабильность страницы. Метрика CLS (Cumulative Layout Shift) фиксирует, насколько сильно элементы страницы смещаются в процессе загрузки, что влияет на пользовательский опыт.

Long Tasks

Отслеживает длительные задачи, блокирующие основной поток браузера. Задачи, выполняющиеся дольше 50 миллисекунд, считаются «длинными» и ухудшают отзывчивость интерфейса (INP).

User Timing

Позволяет разработчику добавлять собственные временные метки с помощью методов performance.mark() и performance.measure() для измерения времени выполнения произвольных участков кода.

Как работает Performance API

Браузер автоматически записывает временные метки для каждого этапа загрузки страницы: начало навигации, запрос DNS, установка соединения, получение первого байта, парсинг HTML, загрузка ресурсов, рендеринг. Разработчик может получить эти данные через вызов performance.getEntries() или подписаться на события PerformanceObserver для сбора метрик в реальном времени.

Пример получения метрик

// Получение всех метрик загрузки ресурсов
const resources = performance.getEntriesByType('resource');
resources.forEach(resource => {
  console.log(`${resource.name}: ${resource.duration}ms`);
});

// Наблюдение за LCP
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  entries.forEach(entry => {
    console.log('LCP элемент:', entry.element);
    console.log('Время LCP:', entry.startTime);
  });
});
observer.observe({ type: 'largest-contentful-paint', buffered: true });

Отправка данных на сервер

// Сбор и отправка метрик в аналитику
window.addEventListener('load', () => {
  const paintMetrics = performance.getEntriesByType('paint');
  const navigation = performance.getEntriesByType('navigation')[0];
  
  const data = {
    fcp: paintMetrics.find(e => e.name === 'first-contentful-paint')?.startTime,
    lcp: null, // собирается через PerformanceObserver
    ttfb: navigation.responseStart - navigation.requestStart,
    domLoad: navigation.domContentLoadedEventEnd - navigation.requestStart
  };
  
  navigator.sendBeacon('/api/metrics', JSON.stringify(data));
});

Преимущества

Высокая точность: измерения с точностью до микросекунд.
Без дополнительных библиотек: встроен во все современные браузеры.
Реальные данные пользователей (RUM): позволяет собирать статистику производительности у реальной аудитории.
Интеграция с Core Web Vitals: напрямую предоставляет метрики LCP, INP, CLS.
Гибкость: возможность создавать собственные метрики через User Timing API.

Недостатки

Ограниченная поддержка старых браузеров: Internet Explorer 11 имеет только базовую функциональность.
Требует JavaScript: для сбора и отправки данных необходимо, чтобы в браузере был включён JS.
Сложность интерпретации: требует понимания жизненного цикла загрузки страницы и всех подсистем API.
Объём данных: при активном сборе всех ресурсов может генерировать большой объём данных для отправки.

Где используется

Real User Monitoring (RUM): сбор данных о производительности у реальных пользователей.
Lighthouse и PageSpeed Insights: используют Performance API для диагностики.
Веб-аналитика: интеграция с системами мониторинга (Google Analytics, Яндекс Метрика) для отчётов по скорости.
Отладка разработчиков: Chrome DevTools использует Performance API для отображения временной шкалы.
Собственные системы мониторинга: отправка метрик на внутренние серверы для построения дашбордов.

Сравнение с альтернативами

Инструмент	Источник данных	Применение
Performance API	Встроен в браузер	Real User Monitoring, отладка
Lighthouse	Эмуляция в Chrome	Лабораторное тестирование
WebPageTest	Реальные устройства	Детальный анализ с разных географий
Google Analytics	Performance API + отправка	Мониторинг Core Web Vitals в продакшене
Яндекс Метрика	Performance API + отправка	Мониторинг производительности в российских реалиях
Сторонние RUM-сервисы	Performance API + отправка	Расширенная аналитика, дашборды

Интеграция с системами аналитики

Google Analytics 4

GA4 автоматически собирает некоторые метрики Core Web Vitals через расширенную аналитику. Для отправки собственных метрик можно использовать gtag:

gtag('event', 'performance_metric', {
  'metric_name': 'LCP',
  'metric_value': lcpValue,
  'metric_unit': 'ms'
});

Яндекс.Метрика

Яндекс.Метрика автоматически собирает метрики скорости загрузки через встроенный скрипт. Для отправки кастомных метрик используется метод yaCounterXXXXXX.reachGoal().

Часто задаваемые вопросы

Какие метрики Core Web Vitals доступны через Performance API?

Все 3 метрики Core Web Vitals доступны: LCP (Largest Contentful Paint) через Paint Timing, INP (Interaction to Next Paint) через Event Timing, CLS (Cumulative Layout Shift) через Layout Instability API.

Как отправить данные Performance API в Google Analytics?

Через событие gtag или через измерение в Google Tag Manager. Можно использовать готовые шаблоны для отправки Core Web Vitals или написать собственный скрипт с использованием navigator.sendBeacon() для асинхронной отправки.

Поддерживает ли Performance API мобильные браузеры?

Да, все современные мобильные браузеры (Chrome for Android, Safari iOS, Samsung Internet) поддерживают Performance API. Ограничения касаются только устаревших версий (iOS 12 и ниже).

Как измерить время выполнения собственного кода?

С помощью User Timing API: performance.mark('start') для установки метки начала, performance.mark('end') для метки окончания, затем performance.measure('name', 'start', 'end') для расчёта времени.

Влияет ли Performance API на производительность сайта?

Сам по себе API не влияет на производительность - браузер и так собирает эти данные. Влияет только частота вызовов и отправка данных на сервер. Рекомендуется использовать PerformanceObserver и отправлять данные пакетно.

Почему значения Performance API не совпадают с PageSpeed Insights?

PageSpeed Insights (Lighthouse) использует лабораторные данные с эмулируемыми устройствами. Performance API собирает реальные данные пользователей (RUM), которые зависят от устройства, сети и поведения конкретного пользователя. Расхождения - нормальное явление.

Связанные термины

Аноним

Поиск