Определение
Core Web Vitals (CWV) — это набор из трёх метрик Google, которые измеряют реальный пользовательский опыт на странице: скорость загрузки, отзывчивость на действия и визуальную стабильность. С 2021 года они входят в сигналы ранжирования Google Search, а с 2024 года учитываются и в отчётах Google Ads (через Landing Page Experience).
Для DTC-бренда это не «техническая метрика для разработчика», а прямой фактор конверсии: каждая дополнительная секунда загрузки на мобильном снижает CR на 3–7%, а «прыгающие» кнопки «В корзину» убивают до 20% добавлений в корзину.
Три метрики:
| Метрика | Что измеряет | Хорошо | Плохо |
|---|---|---|---|
| **LCP** (Largest Contentful Paint) | Скорость отрисовки главного элемента (hero-баннер, фото товара) | ≤ 2,5 с | > 4,0 с |
| **INP** (Interaction to Next Paint) | Отзывчивость на клик/тап (заменил FID в марте 2024) | ≤ 200 мс | > 500 мс |
| **CLS** (Cumulative Layout Shift) | Визуальные сдвиги контента | ≤ 0,1 | > 0,25 |
Аналогия
Представьте офлайн-магазин:
- LCP — сколько вы ждёте, пока продавец вынесет товар с витрины. Если дольше 2,5 секунд — покупатель уходит к соседям.
- INP — насколько быстро кассир реагирует, когда вы нажимаете «Оплатить картой». Задержка 500 мс = кассир смотрит в телефон, пока вы стоите с картой.
- CLS — это когда ценник на витрине сам переклеивается в момент, когда вы уже тянетесь к товару. Раздражает и вызывает недоверие.
В e-commerce CLS особенно критичен на мобильной карточке товара: если кнопка «Добавить в корзину» сдвигается из-за подгрузки баннера или шрифта, пользователь тапает не туда и закрывает страницу.
Формулы и пороги
LCP = время от начала навигации до рендера самого крупного элемента в viewport (берётся 75-й перцентиль всех загрузок).
INP = задержка обработки *всех* взаимодействий на странице; финальное значение — почти худшая задержка (98-й перцентиль) с учётом входной задержки, времени обработки и задержки отрисовки:
INP = input delay + processing time + presentation delay
CLS — не время, а безразмерный коэффициент:
CLS = Σ (impact fraction × distance fraction)
где impact fraction — доля viewport, которую сдвинувшийся элемент занимал, а distance fraction — насколько далеко он уехал относительно высоты экрана.
Порог «хорошо» для всех трёх — 75-й перцентиль реальных пользователей (полевые данные CrUX), а не синтетика Lighthouse.
Сравнение: поле vs лаборатория
| Параметр | Полевые данные (CrUX, PageSpeed Insights) | Лаборатория (Lighthouse, WebPageTest) |
|---|---|---|
| Источник | Реальные пользователи Chrome | Синтетический прогон |
| Метрика отзывчивости | **INP** | TBT (Total Blocking Time) |
| Влияет на SEO | ✅ Да, напрямую | ❌ Нет |
| Учитывает устройства | Все (mobile/desktop) | Заданные вручную |
| Использование в DTC | KPI для CRO-команды | Инструмент для дебага |
Правило: оптимизируйте по полю, отлаживайте в лаборатории.
Применение в DTC/электронной коммерции
1. Карточка товара (PDP). LCP здесь — это главное фото. Реальные кейсы: перенос изображений в WebP/AVIF и preload hero-картинки дают −40% к LCP. На брендах одежды это поднимало CR PDP на 5–9%.
2. Фильтры и сортировка в каталоге. INP страдает от тяжёлого JS фреймворка. Разбиение задач через scheduler.yield() снижает INP с 600 мс до 180 мс.
3. Чекаут. CLS на шаге оплаты — самая дорогая ошибка. Резервируйте место под баннеры рассрочки и промо-плашки: aspect-ratio и min-height вместо динамической вставки.
4. Реклама. Google Ads снижает Quality Score при плохом LCP — растёт CPC. Для DTC с бюджетом $50 000/мес разница в 15% CPC = $7 500 переплаты.
5. Email/SMS-трафик. Мобильные пользователи из рассылок чаще всего попадают на перегруженные UTM-параметрами страницы. Проверяйте CWV отдельно для ?utm_source= URL.
Частые ошибки
- Путать FID и INP. FID измерял только *первую* задержку ввода и был удалён в 2024. Если в отчётах всё ещё FID — вы смотрите на устаревшие данные.
- Гнаться за Lighthouse 100. Синтетический скор ≠ полевые CWV. Сайт с 95 в Lighthouse может проваливать INP у реальных пользователей на Android среднего класса.
- Игнорировать 75-й перцентиль. Средние значения скрывают «хвост» медленных сессий. Google смотрит именно на p75.
- Оптимизировать только главную. В DTC 70–80% выручки идёт с PDP и чекаута — начинайте оттуда.
- Ставить сторонние пиксели без async. Facebook Pixel, TikTok Pixel, heatmap-скрипты — главные убийцы INP.
- Забывать про шрифты. font-display: swap без size-adjust даёт CLS на заголовках.
Связанные термины
- TTFB (Time to First Byte) — база для LCP; плохой TTFB невозможно «вылечить» фронтендом.
- FCP (First Contentful Paint) — первый пиксель контента, не входит в CWV, но влияет на восприятие.
- TBT (Total Blocking Time) — лабораторный прокси для INP.
- CrUX (Chrome User Experience Report) — источник полевых данных Google.
- PageSpeed Insights — бесплатный инструмент, показывает и поле, и лабораторию.
- Landing Page Experience — фактор Google Ads, куда входят CWV.
- CRO (Conversion Rate Optimization) — дисциплина, для которой CWV — входной билет.
- Speed Index — синтетическая метрика скорости визуальной загрузки.