Метрики загрузки страниц

При тестировании веб-приложений производительность страниц играет ключевую роль. Cypress, будучи инструментом для энд-ту-энд тестирования, позволяет не только проверять функциональность, но и измерять показатели загрузки страниц. Метрики загрузки помогают выявлять узкие места, оптимизировать время отклика и контролировать пользовательский опыт.

Основные метрики производительности

  1. Time to First Byte (TTFB) Измеряет время, которое проходит от отправки запроса до получения первого байта ответа от сервера. Высокий TTFB может указывать на проблемы на серверной стороне или в сети.

  2. First Contentful Paint (FCP) Показывает момент, когда браузер отображает первый элемент DOM, видимый пользователю. Эта метрика важна для оценки того, насколько быстро пользователь видит содержимое страницы.

  3. Largest Contentful Paint (LCP) Определяет время, за которое загружается самый большой элемент контента, видимый на экране. LCP напрямую влияет на ощущение скорости загрузки страницы.

  4. Cumulative Layout Shift (CLS) Измеряет стабильность интерфейса при загрузке страницы. Высокие значения CLS указывают на непредсказуемое смещение элементов, что ухудшает пользовательский опыт.

  5. Time to Interactive (TTI) Время до момента, когда страница становится полностью интерактивной. Страница может визуально загрузиться быстро, но элементы могут быть недоступны для взаимодействия — именно TTI отражает реальную готовность интерфейса.

Сбор метрик в Cypress

Cypress предоставляет несколько подходов для получения метрик производительности:

  • Использование window.performance API Объект performance встроен в браузер и позволяет получать детальную информацию о загрузке страницы:
cy.visit('/example').then(() => {
  cy.window().then((win) => {
    const timing = win.performance.timing;
    const ttfb = timing.responseStart - timing.requestStart;
    const domContentLoaded = timing.domContentLoadedEventEnd - timing.navigationStart;
    const loadEvent = timing.loadEventEnd - timing.navigationStart;
    cy.log(`TTFB: ${ttfb} ms`);
    cy.log(`DOM Content Loaded: ${domContentLoaded} ms`);
    cy.log(`Load Event: ${loadEvent} ms`);
  });
});
  • Performance Entries Новый стандарт PerformanceNavigationTiming и метод getEntriesByType('navigation') позволяют получать более точные метрики:
cy.window().then((win) => {
  const [entry] = win.performance.getEntriesByType('navigation');
  cy.log(`TTFB: ${entry.responseStart - entry.requestStart} ms`);
  cy.log(`FCP: ${entry.domContentLoadedEventEnd - entry.startTime} ms`);
});
  • Сторонние библиотеки и плагины Cypress поддерживает интеграцию с инструментами вроде cypress-audit или lighthouse, что позволяет автоматически собирать и анализировать метрики производительности в рамках тестов.

Встроенные команды Cypress для времени загрузки

  • cy.visit(url, { onLoad: callback }) Позволяет выполнить замеры сразу после полной загрузки страницы.

  • cy.intercept() Используется для мониторинга сетевых запросов, что помогает вычислять задержки при загрузке ресурсов, критичных для рендеринга страницы.

cy.intercept('GET', '/api/data').as('getData');
cy.visit('/dashboard');
cy.wait('@getData').then((interception) => {
  cy.log(`API response time: ${interception.response?.duration} ms`);
});

Анализ и визуализация метрик

Собранные данные можно хранить в формате JSON или отправлять в систему мониторинга. Cypress позволяет комбинировать производственные метрики с функциональными тестами, формируя отчёты о времени загрузки и взаимодействия пользователя. Важные показатели, которые обычно фиксируются:

  • Среднее время TTFB и LCP по ключевым страницам.
  • Максимальные и минимальные значения CLS для выявления проблем с версткой.
  • Время до полной интерактивности (TTI) для оценки готовности интерфейса.

Практические рекомендации

  • Для страниц с динамическим контентом измерять FCP и LCP после полной подгрузки всех асинхронных данных.
  • CLS фиксировать на разных разрешениях экрана, чтобы выявить нестабильные элементы.
  • Использовать cy.intercept() для отслеживания времени ответа критичных API, влияющих на рендеринг страницы.
  • Сохранять результаты в виде отчётов, чтобы отслеживать прогресс оптимизации и сравнивать версии приложения.

Метрики загрузки страниц в Cypress предоставляют комплексный взгляд на производительность приложения, объединяя клиентскую и серверную статистику. Правильная фиксация и анализ этих показателей позволяют не только выявлять проблемы, но и системно улучшать пользовательский опыт.

Оглавление