84 lines
5.3 KiB
Markdown
84 lines
5.3 KiB
Markdown
---
|
||
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/) |