---
sidebar_position: 9
---

# Core Web Vitals (Метрики)

**Core Web Vitals** — это набор **ключевых метрик**, которые Google использует для оценки **реального пользовательского опыта (UX)** при загрузке веб-страниц.
Они помогают понять, насколько **быстро, стабильно и отзывчиво** работает сайт.

Core Web Vitals фокусируются не на технических деталях вроде скорости сети, а на **ощущениях пользователя**:
- Как быстро страница показывает основной контент
- Насколько стабильно всё отображается
- Как быстро сайт реагирует на действия

`TTFB`, `FCP`, `LCP`, `CLS`, `INP` Эти метрики — **ключевые показатели производительности** веб-страниц, которые помогают понять, как быстро и комфортно пользователь воспринимает загрузку сайта.

## 🕒 1. TTFB (Time To First Byte) — время до первого байта

**Что измеряет:** \
Время, которое проходит с момента запроса страницы до получения первого байта данных от сервера.

Формула: \
`TTFB = время запроса → сервер + обработка на сервере + передача первого байта`

**Зачем важно:**
- Отражает скорость отклика сервера.
- Высокий TTFB говорит о проблемах на сервере, в сети или в CDN.

**Хорошее значение:** < 200 мс

## 🎨 2. FCP (First Contentful Paint) — первая отрисовка контента

**Что измеряет:**\
Когда браузер впервые отображает **любой контент** (текст, изображение, SVG и т. д.) на экране.

**Зачем важно:**
- Показывает, когда пользователь впервые видит, что «что-то загружается».
- Если FCP большой, пользователь воспринимает сайт как «медленный».

**Хорошее значение:** < 1,8 сек

## 🖼️ 3. LCP (Largest Contentful Paint) — отрисовка крупнейшего элемента

**Что измеряет:**\
Когда на экране появляется самый **большой видимый элемент** (часто изображение, видео или крупный блок текста).

**Зачем важно:**
- Это момент, когда страница «визуально загружена».
- Google считает LCP одной из **Core Web Vitals**.

**Хорошее значение:** < 2,5 сек

## 🧩 4. CLS (Cumulative Layout Shift) — суммарный сдвиг макета

**Что измеряет:** \
Насколько сильно элементы страницы **неожиданно двигаются** во время загрузки (например, текст прыгает, когда догружается баннер).

**Зачем важно:**
- Влияет на восприятие стабильности интерфейса.
- Высокий CLS раздражает пользователя и снижает UX.

**Хорошее значение:** < 0.1

## ⚡ 5. INP (Interaction to Next Paint) — время реакции на взаимодействие

**Что измеряет:** \
Сколько времени проходит между действием пользователя (клик, клавиша и т. д.) и моментом, когда интерфейс **визуально реагирует**.

**Зачем важно:** 
- Отражает отзывчивость страницы.
- Заменяет старую метрику FID (First Input Delay).

**Хорошее значение:** < 200 мс

| Метрика | Что показывает               | Хорошее значение | Что оптимизировать               |
|---------|------------------------------|------------------|----------------------------------|
| TTFB    | Время отклика сервера        |  < 200 мс        | Сервер, CDN, кеширование         |
| FCP     | Первое отображение контента  |  < 1,8 с         | CSS, блокирующие скрипты         |
| LCP     | Отрисовка основного контента |  < 2,5 с         | Изображения, lazy-loading        |
| CLS     | Визуальная стабильность      |  < 0.1           | Размеры медиа, late-load контент |
| INP     | Отзывчивость интерфейса      |  < 200 мс        | JS-оптимизация, event-handling   |

🚀 **_Источник: ChatGPT_** \
[Топ рекомендаций по Core Web Vitals на 2023 год](https://habr.com/ru/companies/timeweb/articles/714280/)