Производительность сайта и способы её измерения

Три метрики Core Web Vitals

Оценка идёт по 75-му перцентилю: чтобы метрика считалась хорошей, у трёх из четырёх визитов значение должно укладываться в порог. Мобильные и десктоп оцениваются раздельно — и почти всегда мобильные хуже.

LCP — что именно является «крупным элементом»

Обычно это главная картинка, обложка статьи или крупный заголовок. Типичные причины плохого LCP: медленный ответ сервера (TTFB), блокирующий CSS и шрифты, тяжёлое изображение без современного формата, ленивая загрузка, случайно применённая к картинке первого экрана.

INP — почему он строже FID

FID измерял задержку только первого взаимодействия и только до начала обработки. INP берёт худшие взаимодействия за всю сессию и считает время до следующей отрисовки — то есть до момента, когда пользователь увидел результат своего клика. Тяжёлые обработчики событий, длинные задачи в основном потоке и перегруженные сторонние скрипты видны в INP гораздо честнее.

CLS — самая дешёвая метрика для исправления

Почти всегда чинится разметкой: заданные размеры изображений и iframe, зарезервированное место под баннеры и виджеты, отказ от вставки блоков над уже отрисованным контентом, font-display: optional или swap вместе с size-adjust.

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

Практическое правило: решение о том, есть ли проблема, принимается по полевым данным; решение о том, что именно чинить — по лабораторным.

Инструменты

• Google Search Console → Основные интернет-показатели. Главный отчёт: группирует URL по типам страниц и показывает динамику. Начинайте здесь.
• PageSpeed Insights. Полевые данные CrUX сверху, лабораторный Lighthouse снизу — на одной странице.
• Chrome DevTools → Performance. Профилирование длинных задач, поиск причин плохого INP.
• Библиотека web-vitals. Собственный сбор метрик с реальных пользователей и отправка в аналитику. Единственный способ увидеть метрики раньше, чем через 28 дней.
• CrUX Dashboard / BigQuery. История по домену и сравнение с конкурентами.
• WebPageTest. Тонкие сценарии: конкретная география, тип сети, устройство.

Сбор реальных метрик своими руками

<script type="module">
import {onLCP, onINP, onCLS} from 'https://unpkg.com/web-vitals@4?module';

function send(metric) {
  navigator.sendBeacon('/collect', JSON.stringify({
    name:  metric.name,          // LCP | INP | CLS
    value: metric.value,
    id:    metric.id,
    path:  location.pathname
  }));
}

onLCP(send);
onINP(send);
onCLS(send);
</script>

Дальше данные складываются в вашу аналитику, и вы видите 75-й перцентиль по типам страниц уже завтра, а не через месяц.

С чего начинать оптимизацию

1. Откройте отчёт Core Web Vitals в Search Console и найдите группу URL с наибольшим числом «плохих» адресов.
2. Возьмите типовой URL из группы и прогоните через PageSpeed Insights.
3. Начните с метрики, которая проваливается сильнее всего. Обычно порядок такой: CLS (дёшево) → LCP (средне) → INP (дорого).
4. Исправьте на шаблоне, а не на одной странице — эффект получите на всей группе сразу.
5. Через 28 дней проверьте полевые данные снова.

Конкретные приёмы разбираются в следующих уроках главы: минификация, оптимизация изображений, многоуровневое кеширование и CDN.