Справка по модулю Core Web Vitals ===>>>
<!-- Core Web Vitals (CrUX) — Яндекс.Вики (Styled HTML) -->
<div style="max-width:980px; padding:16px 18px; border:1px solid #e6e6e6; border-radius:14px; background:#ffffff; box-shadow:0 2px 10px rgba(0,0,0,0.04);">
<!-- Header -->
<div style="display:flex; gap:14px; align-items:flex-start; padding:14px 14px 12px; border-radius:12px; background:#f7f8fa; border:1px solid #eceef2;">
<div style="width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#111827; color:#fff; font-size:20px; line-height:1;">
⚡
</div>
<div style="flex:1;">
<div style="font-size:20px; font-weight:800; color:#111827; margin:0 0 6px;">
Модуль Core Web Vitals (Chrome UX Report)
</div>
<div style="font-size:14px; color:#374151; line-height:1.45; margin:0;">
Модуль для сбора метрик <b>Core Web Vitals</b> через <b>Chrome UX Report (CrUX)</b>.
Использует реальные данные пользователей Chrome для оценки производительности сайтов.
</div>
<!-- Badges -->
<div style="margin-top:10px; display:flex; flex-wrap:wrap; gap:8px;">
<span style="display:inline-block; padding:4px 10px; border-radius:999px; background:#eef2ff; border:1px solid #e0e7ff; color:#3730a3; font-size:12px; font-weight:700;">
CrUX / Field data
</span>
<span style="display:inline-block; padding:4px 10px; border-radius:999px; background:#ecfeff; border:1px solid #cffafe; color:#155e75; font-size:12px; font-weight:700;">
28-дневное окно
</span>
<span style="display:inline-block; padding:4px 10px; border-radius:999px; background:#f0fdf4; border:1px solid #dcfce7; color:#166534; font-size:12px; font-weight:700;">
CWV: LCP / INP / CLS
</span>
</div>
</div>
</div>
<!-- Section: Structure -->
<div style="margin-top:16px; padding:14px 14px; border:1px solid #eceef2; border-radius:12px;">
<div style="font-size:16px; font-weight:800; color:#111827; margin-bottom:10px;">
Структура модуля
</div>
<div style="font-size:14px; color:#374151; margin-bottom:10px;">
Модуль состоит из двух витрин и настройки конкурентов:
</div>
<ul style="margin:0; padding-left:18px; color:#111827; font-size:14px; line-height:1.55;">
<li><b>Витрина 1 — История</b></li>
<li><b>Витрина 2 — Конкуренты</b></li>
<li><b>Настройка конкурентов</b></li>
</ul>
</div>
<!-- Section: Features -->
<div style="margin-top:14px; padding:14px 14px; border:1px solid #eceef2; border-radius:12px;">
<div style="font-size:16px; font-weight:800; color:#111827; margin-bottom:10px;">
Возможности
</div>
<ul style="margin:0; padding-left:18px; color:#111827; font-size:14px; line-height:1.65;">
<li>✅ Сбор Core Web Vitals метрик (<b>CLS, FCP, LCP, INP</b>)</li>
<li>✅ Поддержка стратегий: <b>PHONE</b>, <b>TABLET</b>, <b>DESKTOP</b>, <b>ALL</b></li>
<li>✅ История изменений метрик</li>
<li>✅ Почти моментальный сбор при появлении нового периода CrUX</li>
</ul>
</div>
<!-- Section: Data Collection -->
<div style="margin-top:16px;">
<div style="font-size:16px; font-weight:800; color:#111827; margin:4px 0 10px;">
Как устроен сбор данных
</div>
<details style="border:1px solid #eceef2; border-radius:12px; padding:10px 12px; background:#ffffff; margin-bottom:10px;">
<summary style="cursor:pointer; font-weight:800; color:#111827; font-size:14px;">
📌 История (витрина History)
</summary>
<div style="margin-top:10px; font-size:14px; color:#374151; line-height:1.55;">
<p style="margin:0 0 10px;">
CrUX публикует данные окнами по <b>28 дней</b> (скользящее окно).
История собирается <b>раз в неделю</b> по понедельникам — это выбрано для консистентности периодов.
</p>
<ul style="margin:0; padding-left:18px;">
<li><b>Сбор истории:</b> еженедельно в <b>понедельник</b> в <b>06:00 UTC</b></li>
<li><b>Охват:</b> исторические данные собираются <b>по всем проектам</b></li>
<li><b>Причина понедельника:</b> единая “точка отсчёта” и стабильное сравнение периодов</li>
</ul>
<div style="margin-top:10px; padding:10px 12px; border-radius:10px; background:#f9fafb; border:1px solid #eceef2;">
<b>Важно:</b> это не “за конкретный день”, а агрегат по 28-дневным периодам.
</div>
</div>
</details>
<details style="border:1px solid #eceef2; border-radius:12px; padding:10px 12px; background:#ffffff;">
<summary style="cursor:pointer; font-weight:800; color:#111827; font-size:14px;">
📌 Конкуренты (витрина Competitors)
</summary>
<div style="margin-top:10px; font-size:14px; color:#374151; line-height:1.55;">
<p style="margin:0 0 10px;">
Мониторинг отслеживает появление новых периодов CrUX (скользящее окно <b>28 дней</b>).
Когда обнаруживаем новый период — создаём задачи на сбор для проектов и конкурентов.
</p>
<ul style="margin:0; padding-left:18px;">
<li><b>Мониторинг периодов:</b> ежедневно в <b>09:00 UTC</b> (12:00 MSK)</li>
<li><b>Что проверяем:</b> появились ли новые периоды Chrome UX Report</li>
<li><b>При обнаружении:</b> отправляем задачи для <b>всех проектов</b> и <b>всех конкурентов</b></li>
</ul>
</div>
</details>
</div>
<!-- Divider -->
<div style="height:1px; background:#eceef2; margin:18px 0;"></div>
<!-- FAQ -->
<div>
<div style="font-size:16px; font-weight:800; color:#111827; margin-bottom:10px;">
FAQ
</div>
<!-- Helper note -->
<div style="padding:10px 12px; border-radius:12px; border:1px solid #e5e7eb; background:#fff7ed; color:#7c2d12; font-size:13px; line-height:1.45; margin-bottom:12px;">
<b>Подсказка:</b> CrUX — это <b>реальные пользователи</b>. Метрики зависят от трафика, устройств, сети и географии.
</div>
<details style="border:1px solid #eceef2; border-radius:12px; padding:10px 12px; background:#ffffff; margin-bottom:10px;">
<summary style="cursor:pointer; font-weight:800; color:#111827; font-size:14px;">
❓ Что показывает график “PageSpeed → History”?
</summary>
<div style="margin-top:10px; font-size:14px; color:#374151; line-height:1.55;">
График показывает <b>динамику показателей производительности по реальным пользователям</b> за выбранный период.
Это не “скорость сервера”, а <b>пользовательский опыт</b>: насколько быстро и стабильно сайт ощущается у посетителей.
</div>
</details>
<details style="border:1px solid #eceef2; border-radius:12px; padding:10px 12px; background:#ffffff; margin-bottom:10px;">
<summary style="cursor:pointer; font-weight:800; color:#111827; font-size:14px;">
❓ Это значение за день или среднее за период?
</summary>
<div style="margin-top:10px; font-size:14px; color:#374151; line-height:1.55;">
Показывается <b>агрегированное значение за период</b>, а не за один конкретный день.
Данные CrUX считаются как <b>скользящее окно последних 28 дней</b>, поэтому изменения обычно выглядят <b>плавными</b>.
</div>
</details>
<details style="border:1px solid #eceef2; border-radius:12px; padding:10px 12px; background:#ffffff; margin-bottom:10px;">
<summary style="cursor:pointer; font-weight:800; color:#111827; font-size:14px;">
❓ Это данные из Google PageSpeed Insights (лабораторный тест)?
</summary>
<div style="margin-top:10px; font-size:14px; color:#374151; line-height:1.55;">
Нет. Это <b>не лабораторный PageSpeed (PSI/Lighthouse)</b>, и мы не запускаем тест “прямо сейчас”.
В интерфейсе используются <b>полевые данные CrUX</b> (реальные пользователи).
</div>
</details>
<details style="border:1px solid #eceef2; border-radius:12px; padding:10px 12px; background:#ffffff; margin-bottom:10px;">
<summary style="cursor:pointer; font-weight:800; color:#111827; font-size:14px;">
❓ Что такое CrUX и откуда берутся эти данные?
</summary>
<div style="margin-top:10px; font-size:14px; color:#374151; line-height:1.55;">
<b>CrUX (Chrome UX Report)</b> — это набор данных Google, который формируется на основе
<b>реальных посещений в Chrome</b> у пользователей, согласившихся на сбор статистики.
Это “как у людей на самом деле”, а не синтетический замер.
</div>
</details>
<details style="border:1px solid #eceef2; border-radius:12px; padding:10px 12px; background:#ffffff; margin-bottom:10px;">
<summary style="cursor:pointer; font-weight:800; color:#111827; font-size:14px;">
❓ Это данные “по реальным пользователям” или тестовые?
</summary>
<div style="margin-top:10px; font-size:14px; color:#374151; line-height:1.55;">
Это данные <b>по реальным пользователям</b> (field data). Поэтому значения зависят от:
<ul style="margin:10px 0 0; padding-left:18px;">
<li>устройств (мобильные / десктоп)</li>
<li>качества сети</li>
<li>географии</li>
<li>реального трафика</li>
</ul>
</div>
</details>
<details style="border:1px solid #eceef2; border-radius:12px; padding:10px 12px; background:#ffffff; margin-bottom:10px;">
<summary style="cursor:pointer; font-weight:800; color:#111827; font-size:14px;">
❓ По каким страницам собирается статистика?
</summary>
<div style="margin-top:10px; font-size:14px; color:#374151; line-height:1.55;">
Метрики отображаются <b>по домену (origin-level)</b> — то есть агрегировано по сайту, а не по конкретному URL.
</div>
</details>
<details style="border:1px solid #eceef2; border-radius:12px; padding:10px 12px; background:#ffffff; margin-bottom:10px;">
<summary style="cursor:pointer; font-weight:800; color:#111827; font-size:14px;">
❓ То есть это по всем URL сайта?
</summary>
<div style="margin-top:10px; font-size:14px; color:#374151; line-height:1.55;">
Не совсем. CrUX <b>не гарантирует статистику по всем страницам</b>.
В расчёт попадают только те страницы/сегменты, по которым <b>набралась достаточная статистика</b>.
<div style="margin-top:10px; padding:10px 12px; border-radius:10px; background:#f9fafb; border:1px solid #eceef2;">
Обычно покрытие может быть порядка <b>25–35% основных страниц</b>.
</div>
</div>
</details>
<details style="border:1px solid #eceef2; border-radius:12px; padding:10px 12px; background:#ffffff; margin-bottom:10px;">
<summary style="cursor:pointer; font-weight:800; color:#111827; font-size:14px;">
❓ Почему у одного сайта данные есть, а у другого нет?
</summary>
<div style="margin-top:10px; font-size:14px; color:#374151; line-height:1.55;">
CrUX появляется только если у сайта набирается <b>достаточное количество реальных посещений</b>.
Если сайт новый, малопосещаемый или трафик нестабильный — метрики могут быть частично недоступны.
</div>
</details>
<details style="border:1px solid #eceef2; border-radius:12px; padding:10px 12px; background:#ffffff; margin-bottom:10px;">
<summary style="cursor:pointer; font-weight:800; color:#111827; font-size:14px;">
❓ Какие устройства и сети учитываются?
</summary>
<div style="margin-top:10px; font-size:14px; color:#374151; line-height:1.55;">
Учитывается реальный микс пользователей:
<ul style="margin:10px 0 0; padding-left:18px;">
<li>мобильные и десктоп</li>
<li>разные скорости сети</li>
<li>разные устройства</li>
<li>разные страны</li>
</ul>
<div style="margin-top:10px; padding:10px 12px; border-radius:10px; background:#f9fafb; border:1px solid #eceef2;">
Поэтому цифры могут отличаться от теста на вашем компьютере.
</div>
</div>
</details>
<details style="border:1px solid #eceef2; border-radius:12px; padding:10px 12px; background:#ffffff; margin-bottom:10px;">
<summary style="cursor:pointer; font-weight:800; color:#111827; font-size:14px;">
❓ Почему значения отличаются от Lighthouse / PSI?
</summary>
<div style="margin-top:10px; font-size:14px; color:#374151; line-height:1.55;">
Потому что это разные типы данных:
<ul style="margin:10px 0 0; padding-left:18px;">
<li><b>Lighthouse / PSI (lab)</b> — тест в искусственной среде, один запуск</li>
<li><b>CrUX (field)</b> — данные по реальным пользователям за <b>последние 28 дней</b></li>
</ul>
</div>
</details>
<details style="border:1px solid #eceef2; border-radius:12px; padding:10px 12px; background:#ffffff; margin-bottom:10px;">
<summary style="cursor:pointer; font-weight:800; color:#111827; font-size:14px;">
❓ Что такое LCP / INP / CLS (коротко)?
</summary>
<div style="margin-top:10px; font-size:14px; color:#374151; line-height:1.55;">
<ul style="margin:0; padding-left:18px;">
<li><b>LCP</b> — когда основной контент стал виден пользователю</li>
<li><b>INP</b> — насколько быстро сайт отвечает на действия пользователя (клики, ввод и т.п.)</li>
<li><b>CLS</b> — насколько сильно “прыгает” верстка при загрузке</li>
</ul>
</div>
</details>
<details style="border:1px solid #eceef2; border-radius:12px; padding:10px 12px; background:#ffffff; margin-bottom:10px;">
<summary style="cursor:pointer; font-weight:800; color:#111827; font-size:14px;">
❓ Почему иногда в INP стоит прочерк или 9999?
</summary>
<div style="margin-top:10px; font-size:14px; color:#374151; line-height:1.55;">
<b>Прочерк и 9999 означают одно и то же: данных нет.</b>
Это происходит, когда за период не набралось достаточной статистики.
Это не “плохое значение”, а именно отсутствие данных.
<div style="margin-top:10px; padding:10px 12px; border-radius:10px; background:#fef2f2; border:1px solid #fee2e2; color:#991b1b;">
Мы поправим отображение, чтобы вместо “9999” было понятное сообщение <b>“Нет данных”</b>.
</div>
</div>
</details>
<details style="border:1px solid #eceef2; border-radius:12px; padding:10px 12px; background:#ffffff;">
<summary style="cursor:pointer; font-weight:800; color:#111827; font-size:14px;">
❓ Что делать, если в текущем периоде нет данных?
</summary>
<div style="margin-top:10px; font-size:14px; color:#374151; line-height:1.55;">
Если данных нет в текущем периоде — можно ориентироваться на <b>предыдущие периоды</b>, где статистика успела накопиться.
</div>
</details>
</div>
</div>