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 год