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

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

Производительность загрузки веб-страницы критически важна для пользовательского опыта и ранжирования в поисковых системах. Для её оценки используются стандартизированные метрики, которые измеряют различные аспекты загрузки: от первого отображения контента до стабильности макета. Основные метрики входят в набор Web Vitals, рекомендованный Google.

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

• First Contentful Paint (FCP) — время, когда браузер впервые отображает любой контент (текст, изображение, canvas). Хорошее значение — менее 1.8 секунды.
• Largest Contentful Paint (LCP) — время загрузки самого крупного видимого элемента (изображение, видео, блок текста). Цель — менее 2.5 секунды.
• First Input Delay (FID) — задержка между первым взаимодействием пользователя (клик, нажатие клавиши) и ответом браузера. Хорошо — менее 100 мс.
• Cumulative Layout Shift (CLS) — мера визуальной стабильности, оценивающая неожиданные сдвиги макета. Хорошее значение — менее 0.1.
• Time to Interactive (TTI) — время, когда страница становится полностью интерактивной (готовность к взаимодействию). Цель — менее 3.8 секунды.

Пример измерения с помощью Performance API

// Получение метрик через PerformanceObserver
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  entries.forEach(entry => {
    console.log(`${entry.name}: ${entry.startTime} ms`);
  });
});
observer.observe({ type: 'largest-contentful-paint', buffered: true });
observer.observe({ type: 'first-input', buffered: true });
observer.observe({ type: 'layout-shift', buffered: true });

Применение

Эти метрики используются для мониторинга реального пользовательского опыта (RUM) и лабораторного тестирования (Lighthouse). Оптимизация под них включает сжатие изображений, минимизацию JavaScript, использование кэширования и предзагрузку критических ресурсов.

Вывод: Метрики производительности загрузки страницы необходимы для объективной оценки скорости и стабильности сайта. Их регулярное измерение и оптимизация помогают улучшить пользовательский опыт, повысить конверсию и SEO-позиции.