Как проверить скорость загрузки сайта

Как проверить скорость загрузки сайта: от базовых инструментов до комплексного подхода

Проверка скорости загрузки сайта — это не единичное действие, а комплексный процесс, включающий измерение ключевых метрик, анализ причин проблем и их устранение. Как QA-инженер, вы должны мыслить системно: понимать не только как измерить, но и что именно измерять, как интерпретировать результаты и на какие этапы пути пользователя обращать особое внимание.

Ключевые метрики производительности (Core Web Vitals)

Прежде чем выбирать инструменты, необходимо знать, что мы измеряем. Современный стандарт — это Core Web Vitals от Google:

• Largest Contentful Paint (LCP): Время загрузки самого крупного контентного элемента в области видимости. Цель — менее 2.5 секунд.
• First Input Delay (FID): Время от первого взаимодействия пользователя (клик, нажатие) до момента, когда браузер может начать обрабатывать это событие. Цель — менее 100 миллисекунд.
• Cumulative Layout Shift (CLS): Стабильность визуального оформления. Количественное измерение неожиданных сдвигов макета. Цель — менее 0.1.

Основные инструменты и методы проверки

1. Лабораторные тесты (Synthetic Monitoring)

Тестирование в управляемых, предсказуемых условиях. Идеально для отладки и CI/CD.

• Lighthouse (интегрирован в Chrome DevTools): Самый популярный инструмент. Анализирует производительность, доступность, SEO. Предоставляет детальные рекомендации.

  // Запуск Lighthouse программно (Node.js)
  const lighthouse = require('lighthouse');
  const chromeLauncher = require('chrome-launcher');
  
  async function runAudit(url) {
    const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
    const options = {logLevel: 'info', output: 'html', onlyCategories: ['performance'], port: chrome.port};
    const runnerResult = await lighthouse(url, options);
    await chrome.kill();
    return runnerResult.lhr;
  }
  

• PageSpeed Insights: Использует движок Lighthouse, но также предоставляет данные из реальных условий (CrUX), что позволяет сравнить лабораторные показатели с полевыми.

• WebPageTest: Мощный инструмент для глубокого анализа. Позволяет выбирать геолокацию, тип сети (3G, 4G), браузер. Предоставляет видео загрузки, водопад диаграмму запросов и детальную расшифровку метрик (Start Render, Speed Index).

2. Полевые данные (Real User Monitoring — RUM)

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

• Chrome User Experience Report (CrUX): Агрегированные анонимные данные по сайтам в целом. Доступны через PageSpeed Insights и Google Search Console (отчет "Основные веб-показатели").
• Настройка аналитики с помощью web-vitals библиотеки: Позволяет собирать свои данные о Core Web Vitals прямо с сайта.

  import {getLCP, getFID, getCLS} from 'web-vitals';
  
  function sendToAnalytics(metric) {
    const body = JSON.stringify(metric);
    navigator.sendBeacon('/analytics', body);
  }
  
  getLCP(sendToAnalytics);
  getFID(sendToAnalytics);
  getCLS(sendToAnalytics);
  

• Сторонние RUM-решения: New Relic, Datadog, Sentry — предоставляют глубокую корреляцию между перфомансом, ошибками и пользовательскими сессиями.

3. Анализ сети и ресурсов

Прямо в браузере Chrome DevTools (вкладка Network):

• Водопадная диаграмма запросов: показывает последовательность, размер и время загрузки каждого ресурса (HTML, CSS, JS, изображения).
• Эмуляция медленных сетей (Throttling).
• Блокировка определенных запросов для анализа их влияния.
• Мониторинг размера ресурсов: огромные изображения и нефрагментированный JS — частые причины проблем.

QA-практики для тестирования производительности

1. Создание контрольных точек: Определите цели для ключевых метрик (LCP < 2.5с, CLS < 0.1).
2. Интеграция в CI/CD:

    *   Настройка автоматического прогона Lighthouse через **Lighthouse CI** или аналоги. Сборка не должна деградировать по показателям.

```yaml
# Пример конфигурации для GitHub Actions (lighthouse-ci)
- name: Run Lighthouse CI
  run: |
    lhci autorun
```

3. Сценарии тестирования:

    *   Загрузка **главной страницы**, **страницы товара**, **корзины**.
    *   Проверка при разной скорости сети (Fast 3G, Slow 3G).
    *   Тестирование на **мобильных** и **десктопных** устройствах.
    *   Проверка с **отключенным кэшем** (первый визит) и **включенным** (повторный визит).

1. Анализ "водопада" запросов: Ищите:

    *   Большое количество запросов к третьим сторонам (виджеты, аналитика).
    *   Незагружающиеся/долго загружающиеся ресурсы (status 404, long TTFB).
    *   Ресурсы, блокирующие отрисовку (Render-Blocking Resources).

1. Мониторинг тенденций: Регулярно собирайте и сравнивайте метрики. Резкий рост FID может указывать на проблемы с JavaScript после деплоя новой версии.

Вывод

Проверка скорости — это комбинация лабораторных инструментов (Lighthouse, WebPageTest) для поиска и исправления проблем, полевого мониторинга (CrUX, RUM) для понимания реального опыта пользователей и интеграции в процесс разработки для предотвращения регрессий. Эффективный QA-инженер не просто запускает тест, а:

1. Определяет приоритетные сценарии и цели.
2. Автоматизирует сбор метрик.
3. Проводит анализ "водопада" для обнаружения узких мест.
4. Документирует результаты и создает тикеты для разработчиков с четкими рекомендациями (например, "оптимизировать изображения в карусели", "отложить загрузку скрипта аналитики").