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

0/X

Articles on the topic of usability: Чому кожен інтернет маркетолог повинен зосередитися на оптимізації конверсій Як використовувати Plerdy для прийняття маркетингових рішень на основі даних SEO-помилки, які руйнують ваші позиції SEO спеціалісти та сучасні інструменти: дует для кращих результатів у пошуку Веб-аналітика проти традиційні метрики: отримайте конкурентну перевагу Налаштуйте свою SEO-стратегію за допомогою SEO Checker від Plerdy

⚡ Метрики Core Web Vitals

Перевірте Largest Contentful Paint (LCP)
Чому: 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
Перевірте Total Blocking Time (TBT) як проксі FID
Чому: 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');
Перевірте Cumulative Layout Shift (CLS)
Чому: 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;
}
```

🖼️ Зображення та медіа для Core Web Vitals

Оптимізуйте та стисніть зображення
Чому: Великі зображення сповільнюють завантаження та погіршують 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
Чому: 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 для Core Web Vitals

Мініфікуйте CSS
Чому: Менші CSS-файли швидше завантажуються.
Як перевірити: DevTools → Network → фільтр «CSS» → дивіться розміри.
Як впровадити: Підключіть cssnano у збірці:
```
postcss([require('cssnano')]).process(css).then(result => { … });
```
Видаліть невикористаний CSS
Чому: Зайвий CSS — марні байти.
Як перевірити: DevTools → вкладка Coverage → Reload → дивіться % невикористаного CSS.
Як впровадити: Використовуйте PurgeCSS:
```
purgecss({
  content: ['./src/**/*.html', './src/**/*.js'],
  css: ['./src/styles.css']
});
```
Інлайн критичний CSS
Чому: Inline-стилі вище фолду прискорюють перше відмалювання.
Як перевірити: Lighthouse → «Eliminate render-blocking resources».
Як впровадити: Витягніть критичний CSS (вручну або через Critical CLI):
```
npx critical index.html --inline --minify
```

🚀 Оптимізація JavaScript для Core Web Vitals

Мініфікуйте та стискайте JS
Чому: Менше JS — швидше парсинг і завантаження.
Як перевірити: DevTools → Network → сортуйте «JS» за розміром.
Як впровадити: Використовуйте Terser:
```
terser input.js -o output.min.js --compress --mangle
```
Defer або Async для не критичних скриптів
Чому: Запобігає блокуванню рендеру важкими скриптами.
Як перевірити: Перегляньте вихідний код: чи мають скрипти defer або async?
Як впровадити:
```
<script src="widget.js" async></script>
<script src="main.js" defer></script>
```
Видаліть невикористаний JS
Чому: «Мертвий» код збільшує розмір бандлу.
Як перевірити: DevTools → Coverage → знайдіть невикористаний код.
Як впровадити: Tree-shaking у Webpack або Rollup із ES-модулями.
Використовуйте пасивні event-listeners
Чому: Пасивні слухачі покращують скрол та зменшують затримку введення.
Як перевірити: DevTools → Performance → Record → шукайте non-passive «Listener».
Як впровадити:
```
document.addEventListener('scroll', onScroll, { passive: true });
```

🎯 Пріоритизація ресурсів для Core Web Vitals

Preload ключових ресурсів
Чому: Дозволяє браузеру завчасно завантажити критичні файли.
Як перевірити: Lighthouse → «Preload key requests».
Як впровадити:
```
<link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>
```
Використовуйте HTTP/2 або HTTP/3
Чому: Мультиплексування зменшує час завантаження.
Як перевірити: DevTools → Network → стовпчик Protocol.
Як впровадити: Увімкніть HTTP/2 у конфігурації сервера (Nginx: listen 443 ssl http2;).
DNS-Prefetch та Preconnect
Чому: Ранній DNS та TLS скорочує затримки.
Як перевірити: DevTools → Network → знайдіть пізні DNS-запити.
Як впровадити:
```
<link rel="dns-prefetch" href="//example.com">
<link rel="preconnect" href="https://example.com" crossorigin>
```

🔤 Шрифти для Core Web Vitals

Preload та оптимізація шрифтів
Чому: Зменшує зміщення макета й затримки при завантаженні тексту.
Як перевірити: Lighthouse → «Ensure text remains visible during webfont load».
Як впровадити:
```
<link rel="preload" href="fonts/Roboto.woff2" as="font" type="font/woff2" crossorigin>
font-display: swap;
```

🌐 Сервер і кешування для Core Web Vitals

Зменшіть TTFB (Time to First Byte)
Чому: Швидкий TTFB покращує всі метрики.
Як перевірити: DevTools → Network → «Waiting (TTFB)».
Як впровадити: Використовуйте CDN (Cloudflare) і оптимізуйте кеш БД/бекенду.
Увімкніть GZIP або Brotli-компресію
Чому: Стислі файли передаються швидше.
Як перевірити: Перегляньте заголовок відповіді content-encoding: gzip/br.
Як впровадити: Приклад Nginx:
```
gzip on;
gzip_types text/css application/javascript;
```
Налаштуйте Cache-Control
Чому: Браузер повторно використовує ресурси при наступних відвідинах.
Як перевірити: Заголовок відповіді Cache-Control.
Як впровадити: Приклад:
```
Cache-Control: public, max-age=31536000, immutable
```

🤖 Сторонні скрипти для Core Web Vitals

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

🧩 DOM і рендеринг для Core Web Vitals

Скоротіть розмір DOM
Чому: Великий DOM уповільнює рендер і виконання JS.
Як перевірити: DevTools → Elements → підрахуйте вузли.
Як впровадити: Спрощуйте HTML і видаляйте приховані/невикористані елементи.
Уникайте layout-thrashing
Чому: Повторні читання/записи змушують браузер робити зайві перерахунки макета.
Як перевірити: DevTools → Performance → шукайте «Forced reflow».
Як впровадити: Групуйте читання і запис окремо:
```
// ПОГАНО
element.style.width = element.offsetWidth + 'px';
// ДОБРЕ
const w = element.offsetWidth;
element.style.width = w + 'px';
```

🧰 Інструменти моніторингу та тестування для Core Web Vitals

Використовуйте Lighthouse
Чому: Автоматичний аудит Core Web Vitals.
Як перевірити: DevTools → Lighthouse → Run.
Як впровадити: Інтегруйте в CI через lighthouse-ci.
Використовуйте PageSpeed Insights
Чому: Польові й лабораторні дані в одному місці.
Як перевірити: Перейдіть на PageSpeed Insights → введіть URL.
Як впровадити: Проаналізуйте поради та застосуйте пункти цього чеклисту.
Налаштуйте Real User Monitoring (RUM)
Чому: Відстежує реальну продуктивність очима користувачів.
Як перевірити: Підключіть 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
Чому: WebPageTest надає детальні waterfall, filmstrip і метрики з реальних пристроїв.
Як перевірити: Перейдіть на webpagetest.org, введіть URL, оберіть пристрій і канал, запустіть тест.
Як впровадити: Перевіряйте First Contentful Paint, Speed Index та скриптуйте регулярні тести через API WebPageTest.

📊 Бюджети продуктивності для Core Web Vitals

Визначте бюджети продуктивності
Чому: Бюджети чітко обмежують регресії раніше.
Як перевірити: У логах збірки/CI дивіться, чи перевищені розміри бандлів або бали Lighthouse.
Як впровадити: Приклад Webpack:
```
module.exports = {
  performance: {
    maxAssetSize: 150000,
    maxEntrypointSize: 300000
  }
};
```
Контролюйте бюджети в CI
Чому: Автоматична перевірка не допустить поганий код у main.
Як перевірити: CI має падати, якщо бюджети перевищено.
Як впровадити: Пакунок bundlesize:
```
"scripts": {
  "bundlesize": "bundlesize"
},
"bundlesize": [
  { "path": "dist/*.js", "maxSize": "150 kB" }
]
```

Поширені запитання про чекліст Core Web Vitals

Що таке Core Web Vitals?

Core Web Vitals — це показники Google, які оцінюють важливі складові взаємодії користувача зі сторінкою. Вони вимірюють швидкість завантаження за допомогою Largest Contentful Paint, швидкість реагування через Interaction to Next Paint і візуальну стабільність за показником Cumulative Layout Shift.

Які три основні показники Core Web Vitals?

Три основні показники Core Web Vitals — це LCP, INP і CLS. Хороший показник LCP становить не більше ніж 2,5 секунди, INP — не більше ніж 200 мілісекунд, а CLS — не більше ніж 0,1. Ці цільові значення мають виконуватися для 75-го процентиля відвідувань сторінки.

Як перевірити Core Web Vitals?

Перевіряйте Core Web Vitals за допомогою Google PageSpeed Insights, звіту Core Web Vitals у Google Search Console, Chrome DevTools, Lighthouse або даних Chrome User Experience Report. Використовуйте польові дані, щоб зрозуміти реальну продуктивність сайту для відвідувачів, а лабораторні дані — щоб знайти конкретні технічні проблеми.

Як покращити Core Web Vitals?

Щоб покращити Core Web Vitals, стискайте зображення та правильно задавайте їхні розміри, оптимізуйте LCP-ресурс, скорочуйте час відповіді сервера, видаляйте невикористаний CSS і JavaScript, обмежуйте тривалі JavaScript-завдання, резервуйте місце для зображень і реклами та контролюйте сторонні скрипти. Перевіряйте ключові шаблони сторінок після кожної суттєвої зміни на сайті.

Чи впливають Core Web Vitals на SEO та позиції у Google?

Core Web Vitals є частиною сигналів Google, пов’язаних із якістю сторінки, і можуть впливати на SEO, але це не єдиний фактор ранжування. Релевантний контент, відповідність пошуковому наміру, посилання, доступність для сканування та загальна якість сторінки все ще мають значення. Покращення Core Web Vitals також робить сайт швидшим і стабільнішим для відвідувачів.

Чому сайт не проходить перевірку Core Web Vitals?

Сайт не проходить перевірку Core Web Vitals, якщо доступні польові дані не відповідають установленому пороговому значенню хоча б за одним показником. Поширені причини: повільне завантаження LCP-зображень, перевантажений JavaScript, який погіршує INP, неочікувані зміщення макета, низька продуктивність на мобільних пристроях, повільний хостинг і сторонні скрипти. Щоб пройти перевірку, усі три показники Core Web Vitals мають отримати оцінку «Добре».