Suggest an edit

Improve this article

Refine the answer for “What does the Core Web Vitals API do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**The Core Web Vitals API** is a set of JavaScript interfaces used to collect real UX metrics directly from the user, rather than from synthetic tests.

---

### What it collects:

It measures and returns Web Vitals metrics in real time, such as:

- **LCP**: when the main content loads
- **FID**: the delay on the first interaction
- **CLS**: how much the interface jumps around
- **INP**: a new metric replacing FID (Interaction to Next Paint)
- **FCP**, **TTFB**: additional speed metrics

---

### How it's used:

1. Include the `web-vitals` JS library:

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

getLCP(console.log)
  getFID(console.log)
  getCLS(console.log)
  ```
2. The metrics can be:
  - sent to Google Analytics
  - logged to a server
  - sent to BigQuery, Sentry, and so on

---

### What it gives you:

- real data from actual users
- visibility into how the site performs on different devices and networks
- the ability to track UX in production, not just in Lighthouse
- used to analyze problems that are not visible in a test environment

---

### Example of practical use:

- LCP is too high for users on 3G → you optimize images
- CLS spikes at a certain resolution → you double-check the layout
- INP is high on Android Chrome → you look for heavy JS and long tasks

---

**Conclusion:**
The Core Web Vitals API is a way to track performance through the user's eyes, live. It's reality, not a lab.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts247 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.