Какие знаешь метрики производительности страницы?

Метрики производительности веб-страницы

Производительность страницы — это комплексная дисциплина, включающая множество метрик, которые можно разделить на несколько ключевых категорий: метрики, ориентированные на пользователя (Core Web Vitals), метрики загрузки, метрики отзывчивости и метрики стабильности. Вот подробный обзор.

Core Web Vitals (Ключевые показатели веб-разработки)

Это набор метрик, введённых Google, которые измеряют пользовательский опыт. Они являются частью алгоритма ранжирования поиска.

• Largest Contentful Paint (LCP): измеряет время загрузки самого большого контентного элемента в области видимости (viewport). Целевое значение — менее 2.5 секунд. Элементом может быть изображение, видео, блок текста.

// Пример отслеживания LCP с Performance Observer
const observer = new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();
  const lastEntry = entries[entries.length - 1];
  console.log('LCP:', lastEntry.renderTime || lastEntry.loadTime);
});

observer.observe({entryTypes: ['largest-contentful-paint']});

• First Input Delay (FID): измеряет время от первого взаимодействия пользователя (клик, тап, нажатие клавиши) до момента, когда браузер может обработать это событие. Цель — менее 100 миллисекунд. Важно для восприятия отзывчивости.

• Cumulative Layout Shift (CLS): измеряет визуальную стабильность, подсчитывая неожиданные сдвиги макета. Рассчитывается как произведение impact fraction (доли области видимости, которая изменилась) и distance fraction (расстояние сдвига). Цель — менее 0.1.

Метрики загрузки и отображения

Эти метрики фокусируются на процессе загрузки страницы.

• First Paint (FP): момент, когда браузер впервые что-либо отображает на экране (например, фон страницы).
• First Contentful Paint (FCP): момент, когда отображается первый контент (текст, изображение, canvas). Близок к FP, но более значим. Цель — менее 1.8 секунд.
• Time to First Byte (TTFB): время от запроса страницы до получения первого байта данных от сервера. Показывает скорость работы бэкенда и сети. Цель — менее 800 мс.
• Speed Index: рассчитывает, насколько быстро визуально отображается содержимое страницы. Чем ниже значение, тем лучше.
• Time to Interactive (TTI): время, когда страница становится полностью интерактивной (загружен основной контент, обрабатываются события). Цель — менее 3.8 секунд для мобильных устройств.

Метрики отзывчивости и плавности

Измеряют, как страница реагирует на действия пользователя и насколько плавно анимируется.

• Total Blocking Time (TBT): сумма времени, когда основной поток был заблокирован достаточно долго, чтобы повлиять на FID. Измеряется между FCP и TTI. Цель — менее 300 мс.
• First Meaningful Paint (FMP) (устарела, заменена на LCP): момент, когда отображается самый важный контент.
• Animation Performance: частота кадров (FPS). Целевое значение — 60 FPS для плавной анимации.

// Мониторинг FPS с помощью requestAnimationFrame
let frameCount = 0;
let lastTime = performance.now();

function checkFPS() {
  frameCount++;
  const currentTime = performance.now();
  if (currentTime >= lastTime + 1000) {
    console.log('FPS:', frameCount);
    frameCount = 0;
    lastTime = currentTime;
  }
  requestAnimationFrame(checkFPS);
}
checkFPS();

Метрики стабильности и эффективности

• CLS (уже упомянут) — ключевая метрика стабильности.
• Memory Usage: потребление памяти JavaScript-объектами. Утечки памяти могут привести к замедлению работы и крашам.
• Network Requests: количество и размер запросов. Критически важно для мобильных пользователей.
• Time to First CPU Idle: момент, когда основной поток становится достаточно свободным для обработки ввода.

Инструменты для измерения

Для сбора и анализа этих метрик используются:

• Lighthouse — встроен в Chrome DevTools, даёт комплексный отчёт.
• PageSpeed Insights — онлайн-инструмент от Google.
• WebPageTest — расширенное тестирование из разных локаций.
• Chrome User Experience Report (CrUX) — данные от реальных пользователей.
• Performance API браузера (как в примерах выше) для программируемого сбора.

Почему это важно?

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

• Конверсии и бизнес-метрики: замедление на 1 секунду может снизить конверсию на 7%.
• SEO: Core Web Vitals — фактор ранжирования Google.
• Удержание пользователей: медленные сайты быстро покидают.
• Доступность: для пользователей со слабыми устройствами или медленным интернетом.

Оптимизация производительности — это непрерывный процесс, требующий мониторинга как в лабораторных условиях (Lighthouse), так и в реальном мире (RUM — Real User Monitoring). Современный фронтенд-разработчик должен не только знать эти метрики, но и понимать, как их измерять, анализировать и улучшать через оптимизацию кода, ресурсов и инфраструктуры.