fix: add core web vitals

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/)