Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить Core Web Vitals API?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Core Web Vitals API** - це набір JavaScript-інтерфейсів, за допомогою яких можна збирати реальні метрики UX прямо у користувача, а не в синтетичних тестах.

---

### Що він збирає:

Вимірює і віддає Web Vitals метрики в реальному часі, такі як:

- **LCP**: коли завантажується основний контент
- **FID**: затримка при першій взаємодії
- **CLS**: наскільки смикається інтерфейс
- **INP**: нова метрика, що замінює FID (Interaction to Next Paint)
- **FCP**, **TTFB**: додаткові метрики швидкості

---

### Як використовується:

1. Підключається JS-бібліотека `web-vitals`:

```js
  import {getLCP, getFID, getCLS} from 'web-vitals'

getLCP(console.log)
  getFID(console.log)
  getCLS(console.log)
  ```
2. Метрики можна:
  - відправити в Google Analytics
  - залогувати на сервер
  - відправити в BigQuery, Sentry тощо

---

### Що дає:

- реальні дані від справжніх користувачів
- видно, як сайт працює на різних пристроях і мережах
- можна відстежувати UX у продакшені, а не тільки в Lighthouse
- використовується для аналізу проблем, які не видно в тестовому середовищі

---

### Приклад практичного застосування:

- LCP занадто великий у користувачів з 3G → оптимізуєш зображення
- CLS стрибає на певному розрізненні → перевіряєш layout
- INP високий на Android Chrome → шукаєш важкий JS і long tasks

---

**Висновок:**
Core Web Vitals API - це спосіб відстежувати продуктивність очима користувача, наживо. Це реальність, а не лабораторія.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати210 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.