Повний Чеклист Core Web Vitals: 30 порад на 2025 рік

Чому: LCP показує, наскільки швидко з’являється основний контент. Повільний LCP робить сторінку «важкою».
Як перевірити: Відкрийте Chrome DevTools → Lighthouse → Згенерувати звіт; значення LCP має бути ≤ 2.5 c.
Як впровадити:

• Попередньо завантажте ключові зображення: <link rel="preload" href="/images/hero.jpg" as="image">
• Стисніть зображення: скористайтеся Squoosh або ImageMagick, щоб зменшити розмір.
• Використовуйте сучасні формати: конвертуйте JPEG/PNG у WebP: cwebp input.png -o output.webp

Чому: TBT показує, як довго блокується головний потік. Нижчий TBT — швидший відгук на кліки.
Як перевірити: Запустіть Lighthouse у DevTools; «Total Blocking Time» має бути ≤ 200 мс.
Як впровадити:

• Відкладіть не критичні скрипти: <script src="analytics.js" defer></script>
• Розбийте великі JS-бандли: import('./heavy-module.js').then(module => { /* … */ });
• Переносьте довгі задачі у Web Worker: const worker = new Worker('worker.js');

Чому: CLS показує візуальну стабільність. Високий CLS викликає «стрибки» елементів і дратує користувачів.
Як перевірити: Звіт Lighthouse → «Cumulative Layout Shift» (≤ 0.1). DevTools → Performance → Record → шукайте події Layout Shift.
Як впровадити:

• Задавайте width/height для зображень: <img src="logo.png" width="200" height="100" alt="Логотип">
• Резервуйте місце під рекламу: додайте порожній <div> фіксованого розміру перед завантаженням банера.
• Використовуйте font-display:

  @font-face {
    font-family: 'MyFont';
    src: url('myfont.woff2') format('woff2');
    font-display: swap;
  }

Чому: Великі зображення сповільнюють завантаження та погіршують LCP.
Як перевірити: DevTools → Network → фільтр «Img» → сортуйте за розміром.
Як впровадити:

• Скористайтеся Squoosh: збережіть із якістю ~70 %.
• Подавайте WebP:

  <picture>
      <source type="image/webp" srcset="image.webp">
      <img src="image.jpg" alt="Зображення">
  </picture>

Чому: Користувач завантажує лише потрібний розмір, економлячи байти.
Як перевірити: Перегляньте теги <img>; переконайтеся, що присутні srcset і sizes.
Як впровадити:

<img
  src="small.jpg"
  srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Зображення">

Чому: Відкладене завантаження зображень/відео поза видимою частиною пришвидшує стартову загрузку.
Як перевірити: DevTools → Network → прокрутіть сторінку → дивіться, коли вантажаться зображення.
Як впровадити:

<img src="photo.jpg" loading="lazy" alt="Фото">
<iframe src="video.html" loading="lazy"></iframe>

Чому: AVIF часто стискається краще за WebP чи JPEG, даючи менші файли та швидший LCP.
Як перевірити: DevTools → Network → фільтр «Img» → порівняйте розміри .avif і .webp/.jpg.
Як впровадити:

<picture>
    <source type="image/avif" srcset="hero.avif">
    <source type="image/webp" srcset="hero.webp">
    <img src="hero.jpg" alt="Головне зображення">
</picture>

Чому: Менші CSS-файли швидше завантажуються.
Як перевірити: DevTools → Network → фільтр «CSS» → дивіться розміри.
Як впровадити: Підключіть cssnano у збірці:

postcss([require('cssnano')]).process(css).then(result => { … });

Чому: Зайвий CSS — марні байти.
Як перевірити: DevTools → вкладка Coverage → Reload → дивіться % невикористаного CSS.
Як впровадити: Використовуйте PurgeCSS:

purgecss({
  content: ['./src/**/*.html', './src/**/*.js'],
  css: ['./src/styles.css']
});

Чому: Inline-стилі вище фолду прискорюють перше відмалювання.
Як перевірити: Lighthouse → «Eliminate render-blocking resources».
Як впровадити: Витягніть критичний CSS (вручну або через Critical CLI):

npx critical index.html --inline --minify

Чому: Менше JS — швидше парсинг і завантаження.
Як перевірити: DevTools → Network → сортуйте «JS» за розміром.
Як впровадити: Використовуйте Terser:

terser input.js -o output.min.js --compress --mangle

Чому: Запобігає блокуванню рендеру важкими скриптами.
Як перевірити: Перегляньте вихідний код: чи мають скрипти defer або async?
Як впровадити:

<script src="widget.js" async></script>
<script src="main.js" defer></script>

Чому: «Мертвий» код збільшує розмір бандлу.
Як перевірити: DevTools → Coverage → знайдіть невикористаний код.
Як впровадити: Tree-shaking у Webpack або Rollup із ES-модулями.

Чому: Пасивні слухачі покращують скрол та зменшують затримку введення.
Як перевірити: DevTools → Performance → Record → шукайте non-passive «Listener».
Як впровадити:

document.addEventListener('scroll', onScroll, { passive: true });

Чому: Дозволяє браузеру завчасно завантажити критичні файли.
Як перевірити: Lighthouse → «Preload key requests».
Як впровадити:

<link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>

Чому: Мультиплексування зменшує час завантаження.
Як перевірити: DevTools → Network → стовпчик Protocol.
Як впровадити: Увімкніть HTTP/2 у конфігурації сервера (Nginx: listen 443 ssl http2;).

Чому: Ранній DNS та TLS скорочує затримки.
Як перевірити: DevTools → Network → знайдіть пізні DNS-запити.
Як впровадити:

<link rel="dns-prefetch" href="//example.com">
<link rel="preconnect" href="https://example.com" crossorigin>

Чому: Зменшує зміщення макета й затримки при завантаженні тексту.
Як перевірити: Lighthouse → «Ensure text remains visible during webfont load».
Як впровадити:

<link rel="preload" href="fonts/Roboto.woff2" as="font" type="font/woff2" crossorigin>
font-display: swap;

Чому: Швидкий TTFB покращує всі метрики.
Як перевірити: DevTools → Network → «Waiting (TTFB)».
Як впровадити: Використовуйте CDN (Cloudflare) і оптимізуйте кеш БД/бекенду.

Чому: Стислі файли передаються швидше.
Як перевірити: Перегляньте заголовок відповіді content-encoding: gzip/br.
Як впровадити: Приклад Nginx:

gzip on;
gzip_types text/css application/javascript;

Чому: Браузер повторно використовує ресурси при наступних відвідинах.
Як перевірити: Заголовок відповіді Cache-Control.
Як впровадити: Приклад:

Cache-Control: public, max-age=31536000, immutable

Чому: Реклама й віджети можуть блокувати рендер.
Як перевірити: DevTools → Network → фільтруйте за доменами третіх сторін.
Як впровадити: Видаліть непотрібні віджети та ліниво підвантажуйте аналітику після події load.

Чому: Великий DOM уповільнює рендер і виконання JS.
Як перевірити: DevTools → Elements → підрахуйте вузли.
Як впровадити: Спрощуйте HTML і видаляйте приховані/невикористані елементи.

Чому: Повторні читання/записи змушують браузер робити зайві перерахунки макета.
Як перевірити: DevTools → Performance → шукайте «Forced reflow».
Як впровадити: Групуйте читання і запис окремо:

// ПОГАНО
element.style.width = element.offsetWidth + 'px';
// ДОБРЕ
const w = element.offsetWidth;
element.style.width = w + 'px';

Чому: Автоматичний аудит Core Web Vitals.
Як перевірити: DevTools → Lighthouse → Run.
Як впровадити: Інтегруйте в CI через lighthouse-ci.

Чому: Польові й лабораторні дані в одному місці.
Як перевірити: Перейдіть на PageSpeed Insights → введіть URL.
Як впровадити: Проаналізуйте поради та застосуйте пункти цього чеклисту.

Чому: Відстежує реальну продуктивність очима користувачів.
Як перевірити: Підключіть Web Vitals library та дивіться логи в консолі.
Як впровадити:

<script src="https://unpkg.com/[email protected]/dist/web-vitals.iife.js"></script>
<script>
  webVitals.getLCP(console.log);
  webVitals.getFID(console.log);
  webVitals.getCLS(console.log);
</script>

Чому: WebPageTest надає детальні waterfall, filmstrip і метрики з реальних пристроїв.
Як перевірити: Перейдіть на webpagetest.org, введіть URL, оберіть пристрій і канал, запустіть тест.
Як впровадити: Перевіряйте First Contentful Paint, Speed Index та скриптуйте регулярні тести через API WebPageTest.

Чому: Бюджети чітко обмежують регресії раніше.
Як перевірити: У логах збірки/CI дивіться, чи перевищені розміри бандлів або бали Lighthouse.
Як впровадити: Приклад Webpack:

module.exports = {
  performance: {
    maxAssetSize: 150000,
    maxEntrypointSize: 300000
  }
};

Чому: Автоматична перевірка не допустить поганий код у main.
Як перевірити: CI має падати, якщо бюджети перевищено.
Як впровадити: Пакунок bundlesize:

"scripts": {
  "bundlesize": "bundlesize"
},
"bundlesize": [
  { "path": "dist/*.js", "maxSize": "150 kB" }
]