Измерение основных веб-показателей в приложениях React
Используйте Lighthouse, WebPageTest и библиотеку web-vitals для сбора показателей LCP, INP и CLS.
«Измерение основных веб-показателей в приложениях React» — бесплатный урок React Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.
Что такое ключевые веб-показатели?
Ключевые веб-показатели — это метрики Google для оценки взаимодействия с пользователем, влияющие на позицию в поисковой выдаче: LCP (отрисовка самого крупного содержимого — загрузка), INP (взаимодействие до следующей отрисовки — отзывчивость) и CLS (совокупное смещение макета — визуальная стабильность).
Хорошие пороговые значения
Целевые значения: LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1. Значения выше порога «плохого» результата (LCP > 4s, INP > 500ms, CLS > 0.25) значительно ухудшают взаимодействие с пользователем и позиции в поисковой выдаче.
Библиотека web-vitals
Пакет npm web-vitals измеряет CWV в реальных браузерах с помощью простого API.
npm install web-vitals
import { onCLS, onINP, onLCP } from 'web-vitals';
onCLS(metric => console.log('CLS:', metric.value));
onINP(metric => console.log('INP:', metric.value));
onLCP(metric => console.log('LCP:', metric.value));Отправка показателей в аналитику
Отправляйте показатели на конечную точку аналитики для мониторинга реальных пользователей (RUM): Lighthouse измеряет лабораторную производительность, а RUM показывает, что испытывают реальные пользователи.
function sendToAnalytics(metric) {
fetch('/api/vitals', {
method: 'POST',
body: JSON.stringify(metric),
headers: { 'Content-Type': 'application/json' },
});
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);Встроенные показатели Next.js
Next.js автоматически собирает ключевые веб-показатели. Экспортируйте функцию reportWebVitals из _app.js (в Pages) или используйте встроенную поддержку маршрутизатора приложения.
// pages/_app.js (Pages Router)
export function reportWebVitals(metric) {
if (metric.label === 'web-vital') {
console.log(metric.name, metric.value);
}
}Lighthouse в Chrome DevTools
Запустите проверку Lighthouse в Chrome DevTools (на вкладке Lighthouse), чтобы получить лабораторные измерения CWV. Используйте режим инкогнито, чтобы избежать влияния расширений, и ограничьте скорость соединения для имитации мобильного устройства.
WebPageTest
WebPageTest.org предоставляет подробные каскадные диаграммы, запись видео и измерения CWV на реальных устройствах в разных географических точках — результаты реалистичнее, чем при локальном использовании Lighthouse.
Отчёт об опыте пользователей Chrome (CrUX)
Набор данных CrUX от Google объединяет данные CWV от реальных пользователей миллионов веб-сайтов. Получить к нему доступ можно через Google Search Console, PageSpeed Insights или API CrUX.
PerformanceObserver для LCP
Используйте встроенный API PerformanceObserver, чтобы наблюдать за записями LCP и определить, какой элемент является самым крупным отображаемым содержимым.
const po = new PerformanceObserver(entries => {
for (const entry of entries.getEntries()) {
console.log('LCP element:', entry.element, 'time:', entry.startTime);
}
});
po.observe({ type: 'largest-contentful-paint', buffered: true });Отладка CLS
Используйте функцию Layout Shift Regions в Chrome DevTools (на панели Rendering), чтобы выделить красными областями элементы, вызывающие смещения макета.
Данные атрибуции
Библиотека web-vitals предоставляет данные атрибуции, показывающие, что вызвало низкое значение показателя: элемент LCP, взаимодействие INP или элемент, вызвавший CLS.
onLCP(metric => {
const { element, url } = metric.attribution.lcpEntry;
console.log('LCP element:', element);
}, { reportAllChanges: true });Быстрая проверка
Какой ключевой веб-показатель измеряет отзывчивость — то есть насколько быстро страница реагирует на действия пользователя?
Итоги
Измеряйте CWV с помощью библиотеки web-vitals или Lighthouse. Отправляйте показатели в аналитику для мониторинга реальных пользователей. Стремитесь к значениям LCP ≤ 2.5s, INP ≤ 200ms и CLS ≤ 0.1. Используйте данные атрибуции, чтобы определить конкретные элементы или взаимодействия, вызывающие низкие результаты.
Часто задаваемые вопросы
Урок «Измерение основных веб-показателей в приложениях React» бесплатный?
Да — полный текст урока «Измерение основных веб-показателей в приложениях React» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.
Чему я научусь в уроке «Измерение основных веб-показателей в приложениях React»?
Используйте Lighthouse, WebPageTest и библиотеку web-vitals для сбора показателей LCP, INP и CLS. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Измерение основных веб-показателей в приложениях React»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Измерение основных веб-показателей в приложениях React
- Анализ сборки и стратегия разделения кода
- Оптимизация изображений и шрифтов в React
- Снижение INP: оптимизация обработчиков событий