Skip to main content

Що робить Core Web Vitals API?

Frontend-інструментиJunior~1 хв читання
Запропонувати правку

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)
  1. Метрики можна:
  • відправити в Google Analytics
  • залогувати на сервер
  • відправити в BigQuery, Sentry тощо

Що дає:

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

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

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

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

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

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