Настройка 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 и защитить ваш сайт от просадок производительности.