Бюджет веб-производительности: метрики, лимиты и интеграция с CI/CD
Бюджет веб-производительности — это определённые лимиты для размера страницы, времени загрузки и метрик Core Web Vitals. Это руководство охватывает создание бюджета производительности, мониторинг и интеграцию с CI/CD.
Обновлено:
Что такое бюджет производительности?
Бюджет производительности — это максимальные значения, определённые для метрик производительности веб-страницы. Размер страницы, размер JS bundle, время LCP и т.д.
Цель: предотвращение регрессий производительности. Предотвращение снижения производительности при добавлении новых функций.
Превышение бюджета: провал сборки или предупреждение. Проверка производительности в CI/CD pipeline.
Примеры бюджетов: JS bundle < 200KB, CSS < 50KB, LCP < 2.5s, общий размер страницы < 1MB.
Метрики производительности
Размер bundle: размеры файлов JavaScript и CSS. Анализируйте с помощью webpack bundle analyzer.
LCP (Largest Contentful Paint): время загрузки крупнейшего элемента контента. Цель < 2.5s.
CLS (Cumulative Layout Shift): сдвиги в макете страницы. Цель < 0.1.
INP (Interaction to Next Paint): время отклика на взаимодействие пользователя. Цель < 200мс.
TTFB (Time to First Byte): время отклика сервера. Цель < 600мс.
Общий вес страницы: общий размер страницы. Цель < 1-2MB (для мобильных).
Создание бюджета
Измерьте текущую производительность: создайте базовую линию с помощью Lighthouse, WebPageTest.
Установите цели: на основе анализа конкурентов и ожиданий пользователей. Более строгий бюджет для мобильных.
Файл бюджета: определите метрики и лимиты с помощью performance-budget.json.
Постепенное ужесточение: начните с бюджета, близкого к текущей производительности. Ужесточайте со временем.
Поддержка команды: вся команда должна принять бюджет производительности. Производительность — ответственность всех.
Интеграция с CI/CD
Lighthouse CI: аудит Lighthouse при каждом PR. Проверка порога оценки производительности. Провал сборки при превышении бюджета.
WebPageTest: интеграция WebPageTest в CI/CD pipeline. Сравнение filmstrip и waterfall.
Проверка размера bundle: проверка размера bundle с помощью webpack-bundle-analyzer или bundlesize.
GitHub Actions: автоматическое тестирование производительности с помощью Lighthouse CI action. Отчёт о результатах в виде комментария PR.
Настройка порогов: уровни предупреждения и ошибки. Предупреждение: 90% бюджета. Ошибка: 100% бюджета.
Мониторинг и отчётность
RUM (Real User Monitoring): данные производительности реальных пользователей. CrUX, Datadog, New Relic.
Synthetic monitoring: периодические тесты производительности. WebPageTest, Pingdom, GTmetrix.
Дашборд: визуализируйте тренды производительности. Дашборд Grafana, Datadog.
Alerting: alert при превышении бюджета. Уведомление Slack, email.
Отчётность: еженедельный/ежемесячный отчёт о производительности. Анализ трендов и рекомендации по улучшению.
Лучшие практики
Performance champion: назначьте ответственного за производительность в команде. Распространяйте культуру производительности.
Пересмотр бюджета: пересматривайте бюджет в конце каждого спринта. Корректируйте бюджет для новых функций.
Trade-off: новая функция vs производительность. Каждая функция несёт стоимость производительности. Принимайте осознанное решение.
Документация: документируйте бюджет производительности и обоснование. Для онбординга команды.
Непрерывное улучшение: постепенно ужесточайте бюджет производительности. Цель улучшения на 10%.