Core Web Vitals 2026: A complete optimization guide

# Lighthouse в Chrome DevTools
# F12 → Lighthouse → Analyze page load

# PageSpeed Insights API
curl "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"

// Web Vitals JavaScript библиотека
import { onLCP, onINP, onCLS } from 'web-vitals';

onLCP(console.log);
onINP(console.log);
onCLS(console.log);

<!-- Используйте современные форматы -->
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image" fetchpriority="high">
</picture>

<head>
  <!-- Предзагрузка LCP-изображения -->
  <link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
  
  <!-- Предзагрузка шрифтов -->
  <link rel="preload" as="font" href="/fonts/main.woff2" 
        type="font/woff2" crossorigin>
</head>

# Nginx: включение сжатия и кэширования
gzip on;
gzip_types text/plain text/css application/json application/javascript;

location ~* \.(jpg|jpeg|png|webp|avif|gif|ico|svg)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

// Плохо: блокирующая операция
function processLargeArray(items) {
  items.forEach(item => heavyComputation(item));
}

// Хорошо: разбивка на чанки с yield
async function processLargeArrayOptimized(items) {
  const chunkSize = 100;
  for (let i = 0; i < items.length; i += chunkSize) {
    const chunk = items.slice(i, i + chunkSize);
    chunk.forEach(item => heavyComputation(item));
    
    // Даём браузеру "вздохнуть"
    await scheduler.yield();
  }
}

async function handleClick() {
  // Первый этап — немедленный визуальный отклик
  showLoadingState();
  await scheduler.yield();
  
  // Второй этап — тяжёлые вычисления
  const result = await processData();
  await scheduler.yield();
  
  // Третий этап — обновление UI
  updateUI(result);
}

// Плохо: тяжёлая логика в обработчике
button.addEventListener('click', () => {
  const data = expensiveCalculation();
  renderChart(data);
});

// Хорошо: отложенная обработка
button.addEventListener('click', () => {
  // Мгновенный визуальный отклик
  button.classList.add('loading');
  
  // Отложенная тяжёлая работа
  requestIdleCallback(() => {
    const data = expensiveCalculation();
    renderChart(data);
    button.classList.remove('loading');
  });
});

<!-- Всегда указывайте размеры -->
<img src="photo.jpg" width="800" height="600" alt="Photo">

<!-- Или используйте aspect-ratio -->
<style>
  .image-container {
    aspect-ratio: 16 / 9;
    width: 100%;
  }
</style>

/* Оптимальная загрузка шрифтов */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: optional; /* или swap для важных шрифтов */
}

/* Фиксированная высота для рекламных блоков */
.ad-container {
  min-height: 250px;
  contain: layout;
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

import { onLCP, onINP, onCLS } 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,
    page: window.location.pathname,
  });
  
  // Используем sendBeacon для надёжной отправки
  navigator.sendBeacon('/api/analytics', body);
}

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