PageSpeed Insights и CrUX

PageSpeed Insights (PSI) — это инструмент Google для анализа производительности веб-страниц. Он оценивает скорость загрузки и интерактивность страниц на основе двух источников данных: лабораторных метрик и полевых данных. Лабораторные данные собираются в контролируемой среде с помощью движка Lighthouse, что позволяет воспроизводить тесты на разных устройствах и соединениях. Полевые данные формируются из реальных сеансов пользователей и агрегируются в Chrome User Experience Report (CrUX).

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

Core Web Vitals включают три ключевые метрики, отражающие пользовательский опыт:

  1. Largest Contentful Paint (LCP)

    • Измеряет время, за которое основной контент страницы отображается пользователю.
    • Ключевой элемент — блок, который занимает наибольшую площадь в видимой части страницы (текст, изображение или видео).
    • Хорошее значение LCP: до 2,5 секунд.

  2. First Input Delay (FID)

    • Измеряет задержку реакции страницы на первое взаимодействие пользователя (клик, нажатие клавиши).
    • Основная цель — оценить, насколько страница отзывчива на пользовательские действия.
    • Хорошее значение FID: до 100 мс.

  3. Cumulative Layout Shift (CLS)

    • Измеряет визуальную стабильность страницы.
    • CLS фиксирует смещения элементов интерфейса во время загрузки и взаимодействия.
    • Хорошее значение CLS: менее 0,1.

Chrome User Experience Report (CrUX)

CrUX предоставляет полевые данные, которые собираются из реальных сеансов пользователей Chrome, что позволяет видеть производительность сайта на разных устройствах, сетевых условиях и географических регионах.

Особенности CrUX:

  • Анонимность и агрегация данных.
  • Метрики Core Web Vitals на уровне реальных пользователей.
  • Возможность интеграции с инструментами анализа, такими как BigQuery и Data Studio.
  • Поддержка исторических данных для анализа трендов.

CrUX особенно ценен для оценки производительности крупных сайтов с большим количеством посетителей. Лабораторные тесты могут показывать оптимистичные результаты, в то время как реальные пользователи сталкиваются с разными условиями сети и устройств.

Использование Web Vitals в JavaScript

Для измерения Core Web Vitals непосредственно на странице существует библиотека web-vitals. Она позволяет получать метрики в реальном времени и отправлять их на сервер для анализа.

Установка библиотеки через npm:

npm install web-vitals

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

import { getCLS, getFID, getLCP } from 'web-vitals';

getCLS(console.log); // вывод значения CLS в консоль
getFID(console.log); // вывод значения FID в консоль
getLCP(console.log); // вывод значения LCP в консоль

Метрики можно также отправлять на сервер для хранения и анализа:

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

Связь PSI и CrUX

PageSpeed Insights использует CrUX как источник полевых данных, чтобы оценить пользовательский опыт реальных посетителей сайта. Лабораторные метрики Lighthouse позволяют идентифицировать конкретные узкие места на странице, а CrUX показывает, как эти узкие места влияют на реальных пользователей.

Пример отчета PSI включает:

  • Lab Data: LCP, FID, CLS, TBT (Total Blocking Time), FCP (First Contentful Paint).
  • Field Data (CrUX): LCP, FID, CLS на основе реальных сеансов.

Такой подход позволяет сочетать прогнозируемый анализ и наблюдения за реальным пользовательским опытом.

Практические советы по использованию

  1. Сравнение лабораторных и полевых метрик Лабораторные данные помогают разработчику локализовать проблемные участки, а CrUX показывает, насколько изменения реально повлияли на пользователей.

  2. Мониторинг на сервере Отправка Web Vitals с помощью navigator.sendBeacon позволяет собирать данные от пользователей в реальном времени без задержки для них.

  3. Анализ трендов CrUX предоставляет исторические данные, что позволяет отслеживать улучшения производительности после оптимизации ресурсов.

  4. Приоритет Core Web Vitals LCP, FID и CLS — это метрики, влияющие на поисковый рейтинг и опыт пользователей. Их оптимизация повышает скорость, отзывчивость и визуальную стабильность страниц.

Оглавление