Настройка performance budget для сайта
Представьте: после очередного релиза LCP вырос с 2.1 до 3.8 секунд, а конверсия упала на 12%. Без Performance Budget вы узнаете об этом через неделю из отчёта PageSpeed Insights. Performance Budget — это автоматический шлагбаум в CI/CD: сборка падает, если бюджет превышен. Мы настраиваем такой шлагбаум за 2–3 дня. Наши инженеры сертифицированы Google и имеют 5+ лет опыта в оптимизации Core Web Vitals.
Performance Budget — это не просто набор метрик, а культура контроля качества каждого релиза. Он предотвращает деградацию, которую не замечают ручные проверки. Например, один наш клиент обнаружил, что добавление нового виджета увеличило CLS на 0.15 — бюджет поймал это на стадии PR, и релиз не ушёл в продакшн. По данным Google, компании, внедрившие бюджет производительности, сократили время загрузки на 40%, что привело к дополнительному доходу в среднем $200 000 в год. Google Web Vital Report.
Ключевые метрики и ориентиры
| Метрика | Хорошо | Требует работы | Плохо |
|---|---|---|---|
| LCP (Largest Contentful Paint) | < 2.5s | 2.5–4s | > 4s |
| INP (Interaction to Next Paint) | < 200ms | 200–500ms | > 500ms |
| CLS (Cumulative Layout Shift) | < 0.1 | 0.1–0.25 | > 0.25 |
| TTFB (Time to First Byte) | < 600ms | 600ms–1.8s | > 1.8s |
| JS Bundle | < 200KB gzip | 200–500KB | > 500KB |
| Total Page Weight | < 1MB | 1–3MB | > 3MB |
Пример расчёта бюджета для интернет-магазина
Для сайта электронной коммерции мы установили LCP < 2.0s, CLS < 0.05, INP < 150ms, TTFB < 400ms, JS bundle < 150KB gzip, общий вес < 800KB. Эти значения получены из анализа 90-го перцентиля реального трафика за последние 30 дней.Сравнение инструментов для установки бюджета
| Инструмент | Назначение | Интеграция | Особенности |
|---|---|---|---|
| Lighthouse CI | Проверка метрик Core Web Vitals | GitHub Actions, GitLab CI | Поддержка утверждений (assertions) |
| bundlesize | Контроль размера бандлов | Любой CI | Простая конфигурация через JSON |
| WebPageTest | Детальный аудит загрузки | API | Возможность проверки с разных локаций |
Почему Performance Budget критичен для каждого релиза?
Каждая метрика напрямую влияет на пользовательский опыт и бизнес-показатели. LCP > 2.5s увеличивает показатель отказов на 32% согласно Google. INP > 200ms делает сайт «тормозным». CLS > 0.1 вызывает случайные клики не по тем элементам. TTFB > 600ms говорит о проблемах сервера. Превышение бюджета по любой из них — сигнал к остановке релиза. Performance Budget на базе Lighthouse CI в 10 раз точнее ручных проверок, что экономит до 150 000 ₽ в год на исправлении проблем после релиза. Оценка на основе проектов студии
Как часто нужно обновлять Performance Budget?
Бюджет не статичен. Мы рекомендуем пересматривать его каждые 3-6 месяцев или после значительных изменений в архитектуре. Например, при переходе на SSR или добавлении новых библиотек. Также стоит корректировать пороги, если вы замечаете, что метрики стабильно лучше — можно ужесточить бюджет, чтобы стимулировать дальнейшую оптимизацию.
Как внедрить Performance Budget в CI/CD?
Lighthouse CI: бюджеты по метрикам
// .lighthouserc.json { "ci": { "collect": { "url": [ "http://localhost:3000", "http://localhost:3000/catalog", "http://localhost:3000/checkout" ], "numberOfRuns": 3, "settings": { "preset": "desktop", "throttlingMethod": "simulate" } }, "assert": { "assertions": { "categories:performance": ["error", { "minScore": 0.85 }], "categories:accessibility": ["error", { "minScore": 0.90 }], "categories:seo": ["warn", { "minScore": 0.90 }], "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }], "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }], "total-blocking-time": ["warn", { "maxNumericValue": 300 }], "uses-optimized-images": ["warn"], "unused-javascript": ["warn", { "maxNumericValue": 20000 }], "render-blocking-resources": ["warn"] } }, "upload": { "target": "temporary-public-storage" } } } Bundlesize: бюджет на размер JS/CSS
// bundlesize.config.json { "files": [ { "path": ".next/static/chunks/main-*.js", "maxSize": "60 kB" }, { "path": ".next/static/chunks/pages/index-*.js", "maxSize": "50 kB" }, { "path": ".next/static/chunks/pages/catalog-*.js", "maxSize": "80 kB" }, { "path": ".next/static/css/*.css", "maxSize": "30 kB" } ] } GitHub Actions: проверка бюджета
# .github/workflows/performance-budget.yml name: Performance Budget on: [pull_request] jobs: lighthouse-ci: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: { node-version: '20' } - run: npm ci && npm run build - name: Start server run: npm start & - name: Wait for server run: npx wait-on http://localhost:3000 - name: Run Lighthouse CI run: npx lhci autorun env: LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }} bundlesize: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: { node-version: '20' } - run: npm ci && npm run build - name: Check bundle size run: npm run bundlesize env: CI_REPO_OWNER: ${{ github.repository_owner }} CI_REPO_NAME: ${{ github.event.repository.name }} CI_PULL_REQUEST: ${{ github.event.pull_request.number }} CI_COMMIT_SHA: ${{ github.sha }} BUNDLESIZE_GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} Мониторинг в продакшене: SpeedCurve / DebugBear
Для непрерывного мониторинга Core Web Vitals в реальном трафике используют RUM (Real User Monitoring):
// Сбор Web Vitals из реального браузера import { onLCP, onINP, onCLS, onFCP, onTTFB } from 'web-vitals'; function sendToAnalytics(metric: any) { fetch('/api/vitals', { method: 'POST', body: JSON.stringify({ name: metric.name, value: metric.value, id: metric.id, page: window.location.pathname, }), headers: { 'Content-Type': 'application/json' }, }); } onLCP(sendToAnalytics); onINP(sendToAnalytics); onCLS(sendToAnalytics); -- P75 Core Web Vitals за последние 24 часа SELECT name, PERCENTILE_CONT(0.75) WITHIN GROUP (ORDER BY value) AS p75, COUNT(*) AS samples FROM web_vitals WHERE created_at >= now() - interval '24 hours' GROUP BY name; Наш подход к настройке
Мы начинаем с аудита текущих метрик через Lighthouse CI и WebPageTest. Определяем реалистичные бенчмарки на основе бизнес-целей. Конфигурируем Lighthouse CI и bundlesize, интегрируем в GitHub Actions. Обучаем команду читать отчёты и реагировать на превышения. Гарантируем, что после настройки бюджет не будет превышен без вашего ведома.
Что входит в работу
- Документация бюджета производительности с порогами по каждой метрике.
- Конфиги Lighthouse CI и bundlesize под ваш стек (Next.js, Vue, React).
- GitHub Actions workflow для автоматической проверки в каждом PR.
- Интеграция с RUM-мониторингом (SpeedCurve или DebugBear).
- Дашборд с P75 метрик за 24 часа.
- Обучение команды: как читать отчёты и реагировать на превышения.
Сроки и стоимость
Настройка Performance Budget в CI с Lighthouse CI и bundlesize, RUM-мониторинг: 2–3 рабочих дня. Стоимость рассчитывается индивидуально в зависимости от сложности проекта и количества ключевых страниц.
Закажите консультацию — мы оценим ваш проект и предложим оптимальное решение. Свяжитесь с нами, чтобы настроить Performance Budget и защитить ваш сайт от просадок производительности.