From aa289bf22b1fd9104d381a8da55df86e48db2a84 Mon Sep 17 00:00:00 2001 From: RedrockJS Date: Thu, 30 Oct 2025 15:52:38 +0300 Subject: [PATCH] fix: add core web vitals --- docs/browser/09-core-web-vitals.md | 84 ++++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 docs/browser/09-core-web-vitals.md diff --git a/docs/browser/09-core-web-vitals.md b/docs/browser/09-core-web-vitals.md new file mode 100644 index 0000000..fd4dc5a --- /dev/null +++ b/docs/browser/09-core-web-vitals.md @@ -0,0 +1,84 @@ +--- +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/) \ No newline at end of file