Бюджет производительности фронтенда: 6 ключевых стратегий оптимизации Core Web Vitals

Боли производительности фронтенда: Почему ваш сайт продолжает замедляться

В 2026 году сложность фронтенд-проектов продолжает расти. Превышение LCP, скачки CLS, задержки INP, раздувание бандлов и незаметная деградация производительности—эти проблемы разъедают пользовательский опыт и позиции в поисковой выдаче.

Болевая точка	Типичный симптом	Влияние на бизнес
Превышение LCP	Первая отрисовка > 3с	Показатель отказов растёт на 53%
Скачки CLS	Сдвиг макета > 0.25	Ошибочные клики, потеря доверия
Задержка INP	Ответ на взаимодействие > 500мс	Отток пользователей растёт на 40%
Раздувание бандла	JS > 500КБ (gzip)	Время первой загрузки удваивается
Незаметная деградация	Оценки незаметно падают после деплоя	Проблемы накапливаются месяцами

Краткий справочник ключевых концепций

Концепция	Описание	Целевое значение
Бюджет производительности	Количественные пороги для метрик производительности	Определяется командой
LCP	Largest Contentful Paint	≤ 2.5с
FID	First Input Delay	≤ 100мс
CLS	Cumulative Layout Shift	≤ 0.1
INP	Interaction to Next Paint	≤ 200мс
TTFB	Time to First Byte	≤ 800мс
Lighthouse	Автоматизированный инструмент аудита производительности Google	Оценка ≥ 90
RUM (Real User Monitoring)	Сбор данных о производительности реальных пользователей	P75 проходит
Анализ бандла	Отслеживание состава и размера бандла	JS ≤ 200КБ
Разделение кода	Разделение единиц загрузки по маршруту/функциональности	Первый экран ≤ 100КБ

Пять проблем: Почему бюджеты производительности не приживаются

1. Неясные определения метрик — Нет командного консенсуса о том, что такое «хорошая производительность». Лабораторные или полевые данные? P75 или P95?

2. Пробелы в соблюдении бюджета — Бюджеты определены, но не соблюдаются. PR-ы сливаются несмотря на нарушения.

3. Влияние сторонних скриптов — Аналитика, реклама и виджеты чата составляют 40-60% времени выполнения JS, но вы почти не контролируете их.

4. Разрыв мобильной производительности — Lighthouse на десктопе 95, LCP на бюджетном Android 6 секунд. Разрыв огромен.

5. Слепые зоны обнаружения регрессий — Без непрерывного мониторинга производительность деградирует как варка лягушки—вы замечаете, когда уже поздно.

Стратегия 1: Сбор и анализ Core Web Vitals

Используйте библиотеку web-vitals для сбора метрик реальных пользователей и отправки на вашу платформу аналитики:

import { onLCP, onFID, onCLS, onINP, onTTFB } from 'web-vitals';

interface PerformanceMetric {
  name: string;
  value: number;
  rating: 'good' | 'needs-improvement' | 'poor';
  delta: number;
  navigationType: string;
  timestamp: number;
}

function reportMetric(metric: PerformanceMetric): void {
  const body = JSON.stringify({
    name: metric.name,
    value: Math.round(metric.value),
    rating: metric.rating,
    delta: Math.round(metric.delta),
    navigationType: metric.navigationType,
    url: window.location.href,
    timestamp: metric.timestamp,
    userAgent: navigator.userAgent,
    connection: (navigator as any).connection?.effectiveType ?? 'unknown',
  });

  if (navigator.sendBeacon) {
    navigator.sendBeacon('/api/v1/metrics', body);
  } else {
    fetch('/api/v1/metrics', { body, method: 'POST', keepalive: true });
  }
}

onLCP(reportMetric);
onFID(reportMetric);
onCLS(reportMetric);
onINP(reportMetric);
onTTFB(reportMetric);

Серверная агрегация по P75, сравнение с порогами бюджета:

const PERFORMANCE_BUDGET: Record<string, { good: number; poor: number }> = {
  LCP:  { good: 2500, poor: 4000 },
  FID:  { good: 100,  poor: 300 },
  CLS:  { good: 0.1,  poor: 0.25 },
  INP:  { good: 200,  poor: 500 },
  TTFB: { good: 800,  poor: 1800 },
};

function evaluateBudget(
  metric: string,
  p75Value: number,
): 'pass' | 'warning' | 'fail' {
  const budget = PERFORMANCE_BUDGET[metric];
  if (!budget) return 'pass';
  if (p75Value <= budget.good) return 'pass';
  if (p75Value <= budget.poor) return 'warning';
  return 'fail';
}

Стратегия 2: Бюджет размера бандла и интеграция Lighthouse CI

Обеспечьте соблюдение бюджетов размера бандла и оценки Lighthouse в вашем CI/CD пайплайне:

// lighthouse-budget.json
const lighthouseBudget = {
  budgets: [
    {
      path: '/*',
      options: {
        firstContentfulPaint: 1800,
        largestContentfulPaint: 2500,
        cumulativeLayoutShift: 0.1,
        totalBlockingTime: 200,
        interactive: 3500,
      },
      resourceSizes: [
        { resourceType: 'script', budget: 200 },
        { resourceType: 'stylesheet', budget: 50 },
        { resourceType: 'image', budget: 300 },
        { resourceType: 'total', budget: 800 },
      ],
      resourceCounts: [
        { resourceType: 'third-party', budget: 5 },
        { resourceType: 'total', budget: 30 },
      ],
    },
  ],
};

export default lighthouseBudget;

Интеграция с GitHub Actions:

# .github/workflows/lighthouse-ci.yml
name: Lighthouse CI
on: [push]
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
      - run: npm ci && npm run build
      - name: Run Lighthouse CI
        uses: treosh/lighthouse-ci-action@v12
        with:
          configPath: .lighthouserc.json
          budgetPath: lighthouse-budget.json
          uploadArtifacts: true
          failOnBudgetExceeded: true

{
  "ci": {
    "collect": {
      "numberOfRuns": 3,
      "startServerCommand": "npm run preview",
      "url": ["http://localhost:4173/"]
    },
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "first-contentful-paint": ["error", { "maxNumericValue": 1800 }],
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }],
        "total-blocking-time": ["error", { "maxNumericValue": 200 }]
      }
    }
  }
}

Стратегия 3: Оптимизация загрузки изображений и ресурсов

interface ImageOptimizationConfig {
  maxWidth: number;
  quality: number;
  formats: string[];
  sizes: string;
  lazyThreshold: number;
}

const imageConfig: ImageOptimizationConfig = {
  maxWidth: 1600,
  quality: 80,
  formats: ['avif', 'webp', 'jpg'],
  sizes: '(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px',
  lazyThreshold: 0.1,
};

function generatePictureElement(
  src: string,
  alt: string,
  width: number,
  height: number,
  isLcp: boolean = false,
): string {
  const { formats, sizes, quality } = imageConfig;
  const widths = [400, 800, 1200, 1600];

  const sources = formats
    .filter((f) => f !== 'jpg')
    .map((format) => {
      const srcset = widths
        .map((w) => `${src}?w=${w}&q=${quality}&f=${format} ${w}w`)
        .join(', ');
      return `<source srcset="${srcset}" type="image/${format}" />`;
    })
    .join('\n');

  const imgSrcset = widths
    .map((w) => `${src}?w=${w}&q=${quality} ${w}w`)
    .join(', ');

  const lcpAttrs = isLcp
    ? 'fetchpriority="high" loading="eager"'
    : 'loading="lazy"';

  return `<picture>\n${sources}\n<img src="${src}?w=${width}&q=${quality}" srcset="${imgSrcset}" sizes="${sizes}" alt="${alt}" width="${width}" height="${height}" decoding="async" ${lcpAttrs} />\n</picture>`;
}

function setupResourceHints(): void {
  const preconnectDomains = [
    'https://fonts.googleapis.com',
    'https://cdn.example.com',
  ];
  preconnectDomains.forEach((domain) => {
    const link = document.createElement('link');
    link.rel = 'preconnect';
    link.href = domain;
    link.crossOrigin = 'anonymous';
    document.head.appendChild(link);
  });
}

Стратегия 4: Разделение кода и ленивая загрузка

import { defineAsyncComponent } from 'vue';

interface ChunkConfig {
  name: string;
  test: (modulePath: string) => boolean;
  priority: number;
  minSize: number;
}

const chunkStrategy: ChunkConfig[] = [
  { name: 'vendor-vue', test: /node_modules\/vue/, priority: 10, minSize: 0 },
  { name: 'vendor-ui', test: /node_modules\/@ui-lib/, priority: 8, minSize: 10000 },
  { name: 'vendor-utils', test: /node_modules\/(lodash|date-fns)/, priority: 5, minSize: 0 },
  { name: 'vendor-other', test: /node_modules/, priority: -10, minSize: 20000 },
];

function buildRollupOutputChunks() {
  const manualChunks = (id: string) => {
    if (!id.includes('node_modules')) return;
    for (const chunk of chunkStrategy) {
      if (chunk.test(id)) return chunk.name;
    }
  };
  return { manualChunks };
}

const LazyChart = defineAsyncComponent({
  loader: () => import('@/components/HeavyChart.vue'),
  loadingComponent: () => null,
  delay: 200,
  timeout: 10000,
});

const LazyEditor = defineAsyncComponent({
  loader: () => import('@/components/RichEditor.vue'),
  loadingComponent: () => null,
  delay: 200,
  timeout: 10000,
});

function setupIntersectionLazyLoad(): void {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const el = entry.target as HTMLElement;
          const modulePath = el.dataset.lazyModule;
          if (modulePath) {
            import(/* @vite-ignore */ modulePath).then((mod) => {
              el.dispatchEvent(new CustomEvent('lazy-loaded', { detail: mod }));
            });
            observer.unobserve(el);
          }
        }
      });
    },
    { rootMargin: '200px' },
  );

  document.querySelectorAll('[data-lazy-module]').forEach((el) => {
    observer.observe(el);
  });
}

Стратегия 5: Управление сторонними скриптами

interface ThirdPartyScript {
  name: string;
  src: string;
  category: 'analytics' | 'ads' | 'chat' | 'social' | 'other';
  impact: 'high' | 'medium' | 'low';
  loadStrategy: 'async' | 'defer' | 'lazy' | 'worker';
  condition?: () => boolean;
}

const thirdPartyRegistry: ThirdPartyScript[] = [
  {
    name: 'google-analytics',
    src: 'https://www.googletagmanager.com/gtag/js',
    category: 'analytics',
    impact: 'medium',
    loadStrategy: 'async',
    condition: () => !navigator.doNotTrack,
  },
  {
    name: 'live-chat',
    src: 'https://chat.example.com/widget.js',
    category: 'chat',
    impact: 'high',
    loadStrategy: 'lazy',
    condition: () => window.innerWidth >= 768,
  },
  {
    name: 'ad-network',
    src: 'https://ads.example.com/sdk.js',
    category: 'ads',
    impact: 'high',
    loadStrategy: 'worker',
  },
];

function loadThirdPartyScript(script: ThirdPartyScript): Promise<void> {
  if (script.condition && !script.condition()) {
    return Promise.resolve();
  }

  return new Promise((resolve, reject) => {
    const el = document.createElement('script');
    el.src = script.src;

    switch (script.loadStrategy) {
      case 'async':
        el.async = true;
        document.head.appendChild(el);
        break;
      case 'defer':
        el.defer = true;
        document.head.appendChild(el);
        break;
      case 'lazy':
        setTimeout(() => {
          el.async = true;
          document.head.appendChild(el);
        }, 3000);
        break;
      case 'worker':
        fetch(script.src)
          .then((r) => r.text())
          .then((code) => {
            const blob = new Blob([code], { type: 'application/javascript' });
            const worker = new Worker(URL.createObjectURL(blob));
            worker.postMessage({ type: 'init' });
          })
          .catch(reject);
        break;
    }

    el.onload = () => resolve();
    el.onerror = () => reject(new Error(`Failed to load: ${script.name}`));
  });
}

function initThirdPartyScripts(): void {
  const highPriority = thirdPartyRegistry.filter((s) => s.impact === 'low');
  const lowPriority = thirdPartyRegistry.filter((s) => s.impact !== 'low');

  highPriority.forEach(loadThirdPartyScript);

  if ('requestIdleCallback' in window) {
    requestIdleCallback(() => {
      lowPriority.forEach(loadThirdPartyScript);
    });
  } else {
    setTimeout(() => {
      lowPriority.forEach(loadThirdPartyScript);
    }, 5000);
  }
}

Стратегия 6: Система мониторинга производительности и оповещений

interface AlertRule {
  metric: string;
  threshold: number;
  windowMinutes: number;
  sampleSize: number;
  channels: ('email' | 'slack' | 'webhook')[];
}

interface PerformanceAlert {
  metric: string;
  currentValue: number;
  threshold: number;
  affectedUsers: number;
  timestamp: string;
}

const alertRules: AlertRule[] = [
  { metric: 'LCP', threshold: 4000, windowMinutes: 30, sampleSize: 50, channels: ['slack', 'email'] },
  { metric: 'CLS', threshold: 0.25, windowMinutes: 30, sampleSize: 50, channels: ['slack'] },
  { metric: 'INP', threshold: 500, windowMinutes: 60, sampleSize: 100, channels: ['slack', 'email'] },
  { metric: 'TTFB', threshold: 1800, windowMinutes: 30, sampleSize: 50, channels: ['slack'] },
];

class PerformanceMonitor {
  private metricsBuffer: Map<string, number[]> = new Map();

  addMetric(name: string, value: number): void {
    if (!this.metricsBuffer.has(name)) {
      this.metricsBuffer.set(name, []);
    }
    const buffer = this.metricsBuffer.get(name)!;
    buffer.push(value);
    if (buffer.length > 1000) buffer.shift();
    this.checkAlerts(name);
  }

  private checkAlerts(metricName: string): void {
    const rule = alertRules.find((r) => r.metric === metricName);
    if (!rule) return;

    const buffer = this.metricsBuffer.get(metricName) ?? [];
    const recentValues = buffer.slice(-rule.sampleSize);
    if (recentValues.length < rule.sampleSize) return;

    const p75 = this.calculatePercentile(recentValues, 75);
    if (p75 > rule.threshold) {
      this.fireAlert({
        metric: metricName,
        currentValue: p75,
        threshold: rule.threshold,
        affectedUsers: recentValues.length,
        timestamp: new Date().toISOString(),
      });
    }
  }

  private calculatePercentile(values: number[], percentile: number): number {
    const sorted = [...values].sort((a, b) => a - b);
    const index = Math.ceil((percentile / 100) * sorted.length) - 1;
    return sorted[index];
  }

  private fireAlert(alert: PerformanceAlert): void {
    console.warn(`[Performance Alert] ${alert.metric} P75=${alert.currentValue}ms exceeds ${alert.threshold}ms`);
    fetch('/api/v1/alerts', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(alert),
      keepalive: true,
    });
  }
}

const monitor = new PerformanceMonitor();

Руководство по ошибкам

❌ Неправильный подход	✅ Правильный подход
Проверка только лабораторных данных Lighthouse	Комбинировать с полевыми данными RUM—двойная валидация лаборатория + поле
Бюджеты определены только в документации	Применять в CI/CD с `failOnBudgetExceeded: true`
Ленивая загрузка LCP-изображений	LCP-элементы должны использовать `loading="eager"` + `fetchpriority="high"`
Синхронная загрузка всех сторонних скриптов	Приоритизация по влиянию; откладывать низкоприоритетные через `requestIdleCallback`
Оптимизация только для десктопа	Использовать бюджетный мобильный как базу—Moto G Power и аналогичные устройства среднего класса

Устранение неполадок

Симптом	Возможная причина	Решение
Оценка Lighthouse колеблется	Нестабильность сети, непоследовательное ограничение CPU	Запустить несколько раз, взять медиану, использовать `numberOfRuns: 3`
LCP стабильно > 4с	Неоптимизированные или непредзагруженные изображения	Использовать AVIF + `fetchpriority="high"` + `preload`
CLS > 0.25	Изображения/реклама без объявленных размеров	Всегда задавать `width`/`height` или `aspect-ratio`
INP > 500мс	Длинные задачи блокируют основной поток	Разбить длинные задачи, использовать `scheduler.yield()` для уступки
Бюджет бандла в CI не работает	Неверный `budgetPath`	Проверить относительный путь, проверить синтаксис JSON
Потеря данных web-vitals	`sendBeacon` отменён при выгрузке страницы	Использовать `fetch` + `keepalive: true` как запасной вариант
Разделение кода замедляет первую отрисовку	Чрезмерное разделение вызывает каскады запросов	Объединить мелкие чанки, инлайнить ресурсы критического пути
Ошибка загрузки стороннего скрипта	Политика CSP блокирует	Добавить соответствующие домены в `Content-Security-Policy`
TTFB > 1.8с	Медленный SSR или промах кэша CDN	Включить кэширование на краю, оптимизировать стратегию кэша SSR
Мерцание шрифтов (FOIT/FOUT)	Отсутствует объявление `font-display`	Использовать `font-display: swap` + `preload`

Продвинутая оптимизация

Перенос сторонних скриптов в Web Workers с Partytown — Выгрузить аналитику и другой некритичный JS из основного потока. INP может снизиться на 30-50%. Просто настройте <script type="text/partytown">.
Предрендеринг с Speculation Rules — Используйте <script type="speculationrules"> для предрендеринга страниц, которые пользователи вероятно посетят. LCP может упасть ниже 0.5с.
A/B-эксперименты производительности на основе RUM — Применяйте различные стратегии оптимизации к разным сегментам пользователей, сравнивайте различия метрик P75 и позвольте данным управлять решениями вместо догадок.
Стриминг-кэш Service Worker — Используйте Streams API для прогрессивных кэшированных ответов, чтобы первая отрисовка не блокировалась полными загрузками ресурсов.

Сравнение инструментов

Измерение	Lighthouse	WebPageTest	SpeedCurve	Calibre
Фокус	Автоматизированный аудит	Глубокий анализ сети	Непрерывный мониторинг	Командная работа
Тип данных	Синтетические	Синтетические	Синтетические + RUM	Синтетические + RUM
Эмуляция устройств	Ограниченная (Throttling)	Богатая (реальные устройства)	Мультирегион, мультиустройство	Мультирегион, мультиустройство
Интеграция CI	Отличная (официальный CI)	Удовлетворительная	Отличная	Отличная
Стоимость	Бесплатно	Бесплатный тариф	Платно	Платно
Лучше всего для	Быстрых аудитов, CI-шлюзов	Глубокой сетевой диагностики	Долгосрочного мониторинга трендов	Командной работы и оповещений

Резюме и перспективы

Бюджеты производительности фронтенда—это не разовая задача, а непрерывная инженерная практика. Ключевые тенденции 2026 года:

INP заменяет FID как официальная метрика Core Web Vitals—отзывчивость взаимодействий в новом фокусе
Бюджеты производительности в CI — от договорённостей в документации к соблюдению в коде, failOnBudgetExceeded—это база
Решения на основе RUM — лабораторные данные лишь отправная точка; данные реальных пользователей раскрывают правду
Выгрузка в Web Workers — решения вроде Partytown не дают сторонним скриптам тянуть вниз основной поток

Создайте систему бюджетов производительности, чтобы ваш сайт получал «проверку безопасности производительности» при каждом релизе—вместо того, чтобы обнаруживать проблемы только после жалоб пользователей.