Core Web Vitals

Core Web Vitals — это набор метрик, определяющих качество пользовательского опыта на веб-странице. Основные показатели включают Largest Contentful Paint (LCP), First Input Delay (FID) и Cumulative Layout Shift (CLS). Эти метрики напрямую влияют на скорость загрузки, интерактивность и визуальную стабильность страницы. В контексте автоматизированного тестирования важно не просто проверять функциональность, но и контролировать показатели производительности и UX.

Largest Contentful Paint (LCP)

LCP измеряет время, за которое основной контент страницы становится видимым пользователю. Обычно это крупный элемент: заголовок, изображение или блок текста. Важность LCP заключается в восприятии скорости загрузки страницы.

В Cypress можно измерять LCP через API браузера Performance Observer. Пример реализации:

cy.visit('/страница', {
  onBeforeLoad(win) {
    win.LCPValue = 0;
    const observer = new win.PerformanceObserver((list) => {
      const entries = list.getEntries();
      entries.forEach(entry => {
        win.LCPValue = Math.max(win.LCPValue, entry.renderTime || entry.loadTime);
      });
    });
    observer.observe({ type: 'largest-contentful-paint', buffered: true });
  }
});

cy.window().then(win => {
  cy.log(`LCP: ${win.LCPValue} мс`);
});

Ключевые моменты:

  • LCP должен быть меньше 2.5 секунд для хорошего пользовательского опыта.
  • Важно тестировать страницы с реальными данными, чтобы LCP отражал нагрузку на продакшн-контент.

First Input Delay (FID)

FID измеряет задержку между первым взаимодействием пользователя и моментом, когда браузер может отреагировать. Высокий FID создаёт ощущение «торможения» интерфейса.

В Cypress прямого API для FID нет, но можно имитировать сценарий, фиксируя время между событием клика и обработкой:

cy.visit('/страница');
cy.get('#кнопка').then($btn => {
  const start = performance.now();
  $btn[0].addEventListener('click', () => {
    const delay = performance.now() - start;
    cy.log(`FID: ${delay} мс`);
  });
}).click();

Рекомендации:

  • Цель FID — меньше 100 мс.
  • Проверка должна включать страницы с интенсивным скриптингом, чтобы задержки действительно отображались.

Cumulative Layout Shift (CLS)

CLS оценивает визуальную стабильность страницы, измеряя неожиданное смещение элементов при загрузке. Важный показатель UX: пользователи не должны случайно кликать по смещающемуся контенту.

В Cypress можно отслеживать CLS через PerformanceObserver:

cy.visit('/страница', {
  onBeforeLoad(win) {
    win.CLSValue = 0;
    const observer = new win.PerformanceObserver((list) => {
      const entries = list.getEntries();
      entries.forEach(entry => {
        if (!entry.hadRecentInput) {
          win.CLSValue += entry.value;
        }
      });
    });
    observer.observe({ type: 'layout-shift', buffered: true });
  }
});

cy.window().then(win => {
  cy.log(`CLS: ${win.CLSValue}`);
});

Практика показывает, что CLS выше 0.1 ухудшает восприятие интерфейса. Для контроля CLS важно:

  • задавать размеры изображений и видео;
  • использовать предзаполненные блоки для шрифтов и компонентов;
  • избегать динамических вставок контента без анимации.

Интеграция Core Web Vitals в Cypress-тесты

  1. Замеры во время E2E тестов: включение PerformanceObserver при посещении страниц.
  2. Сравнение с эталонными значениями: в логах фиксируются метрики и сравниваются с целевыми порогами.
  3. Анализ проблемных сценариев: тесты должны включать страницы с разной загрузкой данных, всплывающие модальные окна и интерактивные элементы.

Использование Cypress позволяет не только проверять корректность работы UI, но и контролировать производительность в реальном браузере, что повышает качество тестирования.

Практические советы

  • Метрики Core Web Vitals лучше измерять на реальном браузере с реальной загрузкой сети, чтобы данные были максимально приближены к пользователю.
  • Комбинирование Cypress с Lighthouse или Web Vitals API позволяет получать расширенные отчёты производительности.
  • Для крупных приложений рекомендуется писать регрессионные тесты по LCP, FID и CLS, чтобы любые изменения фронтенда сразу выявляли потенциальное ухудшение UX.

Использование Core Web Vitals в автоматизированных тестах становится важной частью современной стратегии обеспечения качества веб-приложений, сочетая функциональные проверки и контроль пользовательского опыта.

Оглавление