Метрики прогрессивного веба

Долгое время скорость сайта мерили событием load: браузер скачал всё, значит, страница готова. Но посетитель видит текст и кнопки раньше или позже этого момента, и оценка по load плохо совпадала с ощущениями. Поэтому около 2016–2017 годов команда Chrome и сообщество веб-производительности предложили набор метрик, привязанных к тому, что видит и делает пользователь: первая отрисовка, первое содержимое на экране, готовность к вводу. В англоязычных материалах их называли progressive web metrics — от идеи, что страница появляется постепенно.

Несмотря на похожее название, к PWA они прямого отношения не имеют: метрики применимы к любому сайту, от лендинга до каталога на тысячи товаров.

Какие показатели входят

• First Paint и First Contentful Paint (FCP) — когда на экране появился первый пиксель и первый текст или картинка.
• Largest Contentful Paint (LCP) — когда отрисован самый крупный блок в первом экране: обложка, заголовок, баннер.
• Interaction to Next Paint (INP) — насколько быстро страница реагирует на клики и нажатия; заменил прежнюю метрику First Input Delay.
• Cumulative Layout Shift (CLS) — насколько «прыгает» вёрстка во время загрузки.

Часть ранних метрик, например First Meaningful Paint и Time to Interactive, со временем вывели из оценок: их было трудно измерять стабильно. LCP, INP и CLS сейчас объединены в Core Web Vitals; хорошими считаются LCP до 2,5 с, INP до 200 мс и CLS до 0,1.

Как измерить в браузере

new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const last = entries[entries.length - 1];
  console.log('LCP:', Math.round(last.startTime), 'мс');
}).observe({ type: 'largest-contentful-paint', buffered: true });

performance.getEntriesByType('paint')
  .forEach((e) => console.log(e.name, Math.round(e.startTime)));

Такой код можно выполнить в консоли или отправлять значения в аналитику. Для быстрой проверки удобнее Lighthouse во вкладке DevTools и PageSpeed Insights: там видны и лабораторные замеры, и данные реальных посетителей Chrome, если их набралось достаточно.

Лабораторные и полевые данные

Лабораторный тест запускается на одном устройстве с заданной скоростью сети и полезен для поиска причин. Полевые данные собираются с живых пользователей и показывают реальную картину, но с задержкой. Если они расходятся, ориентируются на полевые, а лабораторный отчёт используют как подсказку, что чинить. Работу по таким отчётам обычно включают в ускорение сайта.