Оптимизация Core Web Vitals во фронтенде: от 50 до 95+ баллов Lighthouse

Почему Core Web Vitals напрямую влияют на SEO и доход

К 2026 году Google использует Core Web Vitals как основной сигнал ранжирования в поиске уже более трёх лет. INP (Interaction to Next Paint) заменил FID в качестве новой метрики, и три метрики—LCP, CLS, INP—напрямую определяют, получит ли ваш сайт трафик и конверсии.

Показатель метрик	Влияние на SEO-ранжирование	Показатель отказов	Конверсия
Хороший (все пройдены)	Повышение ранжирования 15-30%	Ниже 35%	Выше 3.5%
Требует улучшения	Без значительных изменений	40-60%	1.5-3%
Плохой (все не пройдены)	Падение ранжирования 20-40%	Выше 70%	Ниже 1%

Исследование сайтов электронной коммерции показывает: каждое уменьшение LCP на 100мс улучшает конверсию на 0.7%; каждое снижение CLS на 0.1 увеличивает время пребывания пользователя на 15%. Производительность больше не техническая метрика—это бизнес-метрика.

Стратегии оптимизации LCP

LCP (Largest Contentful Paint) измеряет время рендеринга самого крупного элемента контента. В 2026 году порог прохождения составляет 2.5 секунды, а стандарт совершенства—1.8 секунды.

Оптимизация изображений

Изображения обычно являются элементом LCP, и их оптимизация даёт наиболее значительные результаты:

<picture>
  <source
    srcset="hero-image.avif?w=800 800w, hero-image.avif?w=1200 1200w, hero-image.avif?w=1600 1600w"
    type="image/avif"
  />
  <source
    srcset="hero-image.webp?w=800 800w, hero-image.webp?w=1200 1200w, hero-image.webp?w=1600 1600w"
    type="image/webp"
  />
  <img
    src="hero-image.jpg?w=1200"
    srcset="hero-image.jpg?w=800 800w, hero-image.jpg?w=1200 1200w, hero-image.jpg?w=1600 1600w"
    sizes="(max-width: 768px) 100vw, 1200px"
    alt="Hero banner"
    width="1200"
    height="600"
    fetchpriority="high"
    decoding="async"
    loading="eager"
  />
</picture>

Ключевые моменты: AVIF лучше WebP лучше JPEG; используйте fetchpriority="high" для повышения приоритета LCP-изображения; всегда указывайте width и height для предотвращения CLS; никогда не используйте ленивую загрузку для LCP-изображений.

Оптимизация шрифтов

Загрузка пользовательских шрифтов — частая причина задержек LCP:

<link
  rel="preload"
  href="/fonts/inter-var-subset.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>
<style>
  @font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-var-subset.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC;
  }
</style>

font-display: swap гарантирует, что текст всегда видим; unicode-range-подмножество уменьшает размер шрифта на 60-80%; preload инициирует запросы шрифтов заранее.

Оптимизация CSS

Встроите критический CSS, загружайте некритический CSS асинхронно:

<style>
  /* Critical CSS - inlined in <head> */
  .hero{display:flex;align-items:center;justify-content:center;min-height:60vh;background:linear-gradient(135deg,#667eea,#764ba2)}
  .hero h1{font-size:clamp(2rem,5vw,4rem);color:#fff;margin:0}
  .hero p{font-size:clamp(1rem,2vw,1.5rem);color:rgba(255,255,255,0.9)}
</style>
<link rel="preload" href="/styles/non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
<noscript><link rel="stylesheet" href="/styles/non-critical.css" /></noscript>

Оптимизация сервера

Комбинация CDN + Edge Caching + Streaming:

// Next.js Streaming SSR example
export default async function Page() {
  const data = await fetch('https://api.example.com/hero', {
    next: { revalidate: 3600 }
  }).then(r => r.json());

  return (
    <main>
      <Suspense fallback={<HeroSkeleton />}>
        <HeroSection data={data} />
      </Suspense>
      <Suspense fallback={<ContentSkeleton />}>
        <DeferredContent />
      </Suspense>
    </main>
  );
}

Edge-кеширование возвращает LCP-запросы за 50мс; Streaming предотвращает блокировку первой отрисовки медленными данными.

Стратегии исправления CLS

CLS (Cumulative Layout Shift) измеряет визуальную стабильность. В 2026 году порог прохождения составляет 0.1, а стандарт совершенства—0.05.

Методы стабильности макета

.card {
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: 0 320px;
}

.ad-slot {
  min-height: 250px;
  background: #f5f5f5;
}

.skeleton {
  min-height: 200px;
  animation: shimmer 1.5s infinite;
}

contain изолирует область влияния макета; content-visibility: auto пропускает рендеринг содержимого за пределами экрана; min-height резервирует место для динамического контента.

Атрибуты размеров изображений

<!-- Wrong: missing dimensions -->
<img src="product.jpg" alt="Product" />

<!-- Correct: declare dimensions -->
<img
  src="product.jpg"
  alt="Product"
  width="400"
  height="300"
  style="width: 100%; height: auto;"
/>

<!-- Responsive aspect ratio -->
<img
  src="product.jpg"
  alt="Product"
  style="aspect-ratio: 4/3; width: 100%; height: auto;"
/>

Обработка динамического контента

function loadComments(postId) {
  const container = document.getElementById('comments');
  // Reserve minimum height
  container.style.minHeight = '300px';

  fetch(`/api/comments/${postId}`)
    .then(r => r.json())
    .then(comments => {
      // Batch update to avoid multiple reflows
      const fragment = document.createDocumentFragment();
      comments.forEach(comment => {
        const el = document.createElement('div');
        el.className = 'comment-item';
        el.textContent = comment.text;
        fragment.appendChild(el);
      });
      container.innerHTML = '';
      container.appendChild(fragment);
      container.style.minHeight = '';
    });
}

Предотвращение CLS при загрузке шрифтов

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var-subset.woff2') format('woff2');
  font-display: optional;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* Or use size-adjust to unify fallback and custom font sizes */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107.06%;
  ascent-override: 90%;
  descent-override: 22%;
}

font-display: optional полностью предотвращает CLS от переключения шрифтов; size-adjust выравнивает размер резервного шрифта с пользовательским.

Стратегии оптимизации INP

INP (Interaction to Next Paint) измеряет отзывчивость взаимодействий. В 2026 году порог прохождения составляет 200мс, а стандарт совершенства—100мс.

Оптимизация обработчиков событий

// Wrong: synchronous long task blocks main thread
searchInput.addEventListener('input', (e) => {
  const results = heavyFilter(e.target.value, allData); // may take 500ms
  renderResults(results);
});

// Correct: debounce + yield to main thread
searchInput.addEventListener('input', debounce(async (e) => {
  const value = e.target.value;

  // Use scheduler.yield to yield to the main thread
  await scheduler.yield();

  const results = heavyFilter(value, allData);
  renderResults(results);
}, 150));

function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

Управление основным потоком

async function processLargeDataset(data) {
  const CHUNK_SIZE = 50;
  const results = [];

  for (let i = 0; i < data.length; i += CHUNK_SIZE) {
    const chunk = data.slice(i, i + CHUNK_SIZE);
    results.push(...processChunk(chunk));

    // Yield to main thread every 50 items
    if (i % (CHUNK_SIZE * 10) === 0) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }

  return results;
}

Web Workers для тяжёлых вычислений

// main.js
const worker = new Worker('/workers/search-worker.js');

worker.postMessage({ type: 'SEARCH', query: userInput, data: largeDataset });

worker.onmessage = (event) => {
  if (event.data.type === 'SEARCH_RESULT') {
    renderResults(event.data.results);
  }
};

// workers/search-worker.js
self.onmessage = (event) => {
  if (event.data.type === 'SEARCH') {
    const results = performHeavySearch(event.data.query, event.data.data);
    self.postMessage({ type: 'SEARCH_RESULT', results });
  }
};

function performHeavySearch(query, data) {
  return data.filter(item =>
    item.name.toLowerCase().includes(query.toLowerCase())
  );
}

requestAnimationFrame и Scheduler API

// 2026 recommended: Scheduler API
async function handleScroll() {
  const pendingUpdates = collectScrollUpdates();

  // Yield to main thread, ensure next frame paints
  await scheduler.yield();

  // Execute visual updates at the right time
  requestAnimationFrame(() => {
    applyScrollUpdates(pendingUpdates);
  });
}

// Compatibility fallback
function yieldToMain() {
  return new Promise(resolve => {
    if ('scheduler' in window && 'yield' in scheduler) {
      scheduler.yield().then(resolve);
    } else {
      setTimeout(resolve, 0);
    }
  });
}

Настройка измерений и мониторинга

Lighthouse CI

# .github/workflows/lighthouse.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: 20
      - run: npm ci && npm run build
      - name: Lighthouse CI
        uses: treosh/lighthouse-ci-action@v12
        with:
          urls: |
            http://localhost:3000/
          uploadArtifacts: true
          budgetPath: ./lighthouse-budget.json
          configPath: ./lighthouserc.json

// lighthouse-budget.json
[
  {
    "path": "/*",
    "options": {
      "first-contentful-paint": ["warn", { "maxNumericValue": 1800 }],
      "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
      "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }],
      "interactive": ["warn", { "maxNumericValue": 200 }]
    }
  }
]

Библиотека web-vitals

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

function sendToAnalytics(metric) {
  const body = JSON.stringify({
    name: metric.name,
    value: metric.value,
    rating: metric.rating,
    delta: metric.delta,
    id: metric.id,
    url: location.href,
    timestamp: Date.now()
  });

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

onLCP(sendToAnalytics);
onCLS(sendToAnalytics);
onINP(sendToAnalytics);

Мониторинг реальных пользователей (RUM)

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log({
      name: entry.name,
      duration: entry.duration,
      startTime: entry.startTime,
      entryType: entry.entryType
    });

    reportToAnalytics({
      metric: entry.name,
      value: entry.duration,
      path: location.pathname,
      connection: navigator.connection?.effectiveType,
      deviceMemory: navigator.deviceMemory
    });
  }
});

observer.observe({
  type: 'largest-contentful-paint',
  buffered: true
});
observer.observe({ type: 'layout-shift', buffered: true });
observer.observe({ type: 'event', buffered: true });

5 распространённых ошибок и решения

Ошибка 1: Чрезмерное использование ленивой загрузки

<!-- Wrong: LCP image uses lazy loading -->
<img src="hero.jpg" loading="lazy" alt="Hero" />

<!-- Correct: LCP image uses eager + fetchpriority -->
<img src="hero.jpg" loading="eager" fetchpriority="high" alt="Hero" />

Никогда не используйте ленивую загрузку для LCP-элементов—это задерживает рендеринг на 200-500мс.

Ошибка 2: Игнорирование CLS от шрифтов

Загрузка шрифтов изменяет размеры текста, вызывая сдвиги макета. Всегда используйте size-adjust или font-display: optional.

Ошибка 3: Неоптимизированные сторонние скрипты

<!-- Use Partytown to move third-party scripts to a Web Worker -->
<script type="text/partytown" src="https://analytics.example.com/script.js"></script>
<script>
  partytown = {
    forward: ['dataLayer.push', 'gtag']
  };
</script>

Ошибка 4: Необработанные сдвиги макета от динамического контента

Реклама, списки рекомендаций и другой асинхронный контент должны резервировать min-height, иначе каждая загрузка будет создавать CLS.

Ошибка 5: Выполнение тяжёлых вычислений в основном потоке

Операции поиска, сортировки и фильтрации, превышающие 50мс, следует перенести в Web Worker, иначе INP неизбежно превысит порог.

10 пунктов устранения неполадок

#	Симптом	Возможная причина	Метод устранения
1	LCP > 4с	LCP-изображение не оптимизировано	Проверить LCP-элемент в панели Performance DevTools, проверить формат и размер изображения
2	LCP-изображение загружается медленно	Отсутствие CDN или стратегии кеширования	Проверить `cache-control` и `cf-cache-status` в Response Headers
3	CLS > 0.25	Изображения без width/height	Проверить аудит CLS в Lighthouse для конкретных элементов сдвига
4	CLS от шрифтов	font-display настроен неверно	Проверить значение `font-display` в `@font-face`
5	INP > 500мс	Длинная задача в обработчике событий	Найти в панели Long Animation Frames DevTools
6	INP с периодическими скачками	Сторонний скрипт блокирует	Фильтровать по URL в панели Performance для идентификации сторонних скриптов
7	FCP нормальный, но LCP медленный	Порядок загрузки критических ресурсов	Проверить неиспользуемые CSS/JS в панели Coverage, водопад в панели Network
8	INP на мобильном значительно хуже, чем на десктопе	Проблемы обработки сенсорных событий	Проверить, имеют ли `touchstart`/`touchend` `passive: true`
9	Дёрганье при прокрутке	Тяжёлая обработка событий scroll	Проверить, используется ли регулирование через `requestAnimationFrame`
10	Оценка Lighthouse нестабильна после оптимизации	Нестабильная тестовая среда	Использовать Lighthouse CI для стабильных условий тестирования

Реальный кейс: Главная страница e-commerce от 50 до 95+

Данные Core Web Vitals до и после оптимизации главной страницы e-commerce:

Метрика	До	После	Улучшение
Оценка Lighthouse	50	96	+92%
LCP	5.2с	1.4с	-73%
FID	280мс	45мс	-84%
CLS	0.35	0.03	-91%
INP	450мс	85мс	-81%
TTFB	1.8с	0.2с	-89%
Размер JS первого экрана	850KB	180KB	-79%
Размер CSS первого экрана	320KB	28KB	-91%

Шаги оптимизации:

Миграция изображений на AVIF + CDN: LCP с 5.2с до 3.1с
Критический CSS встроен + некритический CSS асинхронно: LCP до 2.3с
Подмножество шрифтов + font-display: optional: CLS с 0.35 до 0.12
Атрибуты размеров изображений + резервирование min-height: CLS до 0.03
Логика поиска перенесена в Web Worker: INP с 450мс до 120мс
scheduler.yield + оптимизация debounce: INP до 85мс
Edge Caching + Streaming SSR: TTFB с 1.8с до 0.2с, итоговый LCP 1.4с