Core Web Vitals для интернет-магазина: как скорость влияет на продажи и SEO

Почему полсекунды задержки бьют по выручке

Посетитель интернет-магазина не прощает медленную страницу. Пока грузится карточка товара, часть покупателей уходит к конкуренту, и вы теряете их ещё до того, как они увидели цену. Это не абстракция: Vodafone улучшил показатель загрузки LCP на 31% и получил 8% дополнительных продаж, а Cdiscount за счёт оптимизации скорости добавил 6% выручки в «чёрную пятницу». Скорость перестала быть техническим нюансом — это прямой рычаг конверсии.

Google формализовал ощущение «сайт тормозит» в наборе метрик Core Web Vitals. Это три показателя, которые описывают реальный пользовательский опыт: как быстро отрисовывается контент, как быстро страница реагирует на действия и насколько стабильно ведёт себя вёрстка. Их ценность в том, что они переводят размытое «медленно» в конкретные числа, за которыми можно следить и которые можно улучшать пошагово. С 2021 года эти метрики влияют не только на удобство, но и на позиции: они входят в сигналы ранжирования поиска. Для интернет-магазина это значит, что медленный сайт теряет продажи дважды — на конверсии и на трафике.

Три метрики: LCP, INP и CLS

LCP (Largest Contentful Paint) — время отрисовки самого крупного видимого элемента: главного изображения товара, баннера или заголовка. Это метрика «загрузки»: насколько быстро пользователь видит основной контент. Хороший порог — до 2,5 секунды.

INP (Interaction to Next Paint) — отзывчивость интерфейса. Метрика замеряет задержку между действием пользователя (клик по «Купить», раскрытие фильтра, ввод в поиск) и видимой реакцией страницы. INP пришёл на смену устаревшему FID и стал стабильной метрикой Core Web Vitals в 2024 году. Хороший порог — до 200 миллисекунд.

CLS (Cumulative Layout Shift) — визуальная стабильность. Метрика ловит ситуации, когда кнопка или цена «прыгают» во время загрузки, потому что сверху дорисовался баннер или подгрузился шрифт. Для магазина это критично: пользователь метит в «Добавить в корзину», а попадает в рекламу. Хороший порог — 0,1 и ниже.

Важная деталь: Google оценивает эти пороги не по среднему значению, а по 75-му перцентилю загрузок — отдельно для мобильных и десктопа. Проще говоря, страница должна быть быстрой для 75% визитов, а не «в среднем». Это защищает от ситуации, когда быстрые сессии маскируют медленные, — а именно медленные сессии чаще всего заканчиваются уходом.

Как измерять: лабораторные и полевые данные

Есть два принципиально разных типа данных, и путать их нельзя.

Полевые данные (field, RUM) — это реальные замеры у настоящих пользователей, собранные в Chrome User Experience Report (CrUX). Именно они влияют на SEO и отражают правду о вашей аудитории: её устройствах, регионах, качестве связи. Смотреть их удобнее всего в Google Search Console в отчёте Core Web Vitals — он группирует URL по статусам «хорошо / нужно улучшить / плохо» и показывает динамику.

Лабораторные данные (lab) — синтетический прогон в контролируемых условиях. Их даёт PageSpeed Insights и вкладка Lighthouse в DevTools. Лаборатория удобна для отладки: она подсказывает конкретные проблемы и не требует ждать накопления реальной статистики. Но лабораторный результат почти всегда отличается от полевого — потому что тестовое окружение не знает про старый смартфон покупателя из региона с медленным интернетом.

Практический вывод: отлаживайте по лаборатории, а решения принимайте по полю. Если PageSpeed показывает зелёный LCP, а Search Console — «плохо», значит проблема у реальных пользователей, и именно её нужно чинить. INP вообще корректно измеряется только в полях, потому что зависит от того, как человек взаимодействует со страницей.

Типичные проблемы интернет-магазинов

Магазины проваливают Core Web Vitals по предсказуемым причинам — и почти все они связаны с «тяжестью» страницы.

Тяжёлые изображения. Каталог и карточки — это в первую очередь картинки, и именно изображение чаще всего оказывается LCP-элементом (по данным web.dev, в 73% случаев). Несжатые фото товаров, отсутствие современных форматов (WebP, AVIF), картинки без указанных размеров — прямой путь к плохому LCP и заодно к скачкам CLS.

Избыточный JavaScript. Чат-виджеты, счётчики аналитики, рекомендательные блоки, A/B-тесты, пиксели рекламных систем — каждый скрипт занимает главный поток. Пока браузер их исполняет, он не может ответить на клик пользователя, и INP растёт. Для магазина это заметно в самый дорогой момент — при добавлении товара в корзину.

Шрифты. Кастомные веб-шрифты блокируют отрисовку текста и провоцируют смещения, когда системный шрифт внезапно заменяется на фирменный. Результат — просадка и по LCP, и по CLS.

Динамический контент без брони места. Баннеры акций, блоки «с этим товаром покупают», всплывающие уведомления о cookie, реклама — если под них не зарезервировано место в вёрстке, они сдвигают контент вниз в момент подгрузки. По данным web.dev, страницы, анимирующие отступы и границы, страдают от плохого CLS почти вдвое чаще.

Связь скорости с конверсией и SEO

Механика двойная. С одной стороны — поведение пользователя: чем дольше грузится и чем сильнее «прыгает» страница, тем выше отказы и брошенные корзины. Agrofy Market за счёт улучшения LCP на 70% сократил отказ от загрузки на 76%, а AliExpress снизил показатель отказов на 15%, поработав над CLS и LCP. Быстрее видит товар — дольше остаётся — чаще покупает. Это напрямую отражается на конверсии карточки товара.

С другой стороны — SEO. Core Web Vitals официально входят в сигналы ранжирования Google. Метрики сами по себе не выведут слабую страницу в топ — контент и релевантность остаются главными, — но при прочих равных быстрый сайт получает преимущество, а медленный теряет позиции и органический трафик. NDTV после сокращения LCP вдвое улучшил показатель отказов на 50%, а для крупного каталога такое улучшение поведенческих факторов означает ещё и рост числа просмотренных страниц за сессию. Скорость влияет и на бюджет обхода: быстрым страницам поисковый робот уделяет больше внимания, что помогает индексации сайта большого каталога. То есть одна и та же работа над производительностью окупается сразу с двух сторон — больше трафика и выше конверсия этого трафика.

Практическое применение

1. Начните с полевых данных. Откройте отчёт Core Web Vitals в Google Search Console и посмотрите, какие метрики и группы URL в статусе «плохо» на мобильных. Мобильный трафик в e-commerce преобладает, а мобильные устройства слабее — чинить нужно в первую очередь их. Затем берите проблемный URL в PageSpeed Insights для детальной диагностики.

2. Оптимизируйте главные изображения. Сжимайте фото товаров, отдавайте их в WebP/AVIF, обязательно указывайте width и height (или aspect-ratio) — это лечит и LCP, и CLS. Для картинки-героя на карточке добавьте fetchpriority="high" и уберите loading="lazy": браузер должен грузить её в первую очередь, а не откладывать.

3. Разгрузите главный поток от лишнего JavaScript. Проведите ревизию скриптов: чат, аналитика, виджеты рекомендаций. Некритичное подключайте отложенно (defer, ленивая инициализация по клику), неиспользуемый код удаляйте через coverage-инструмент в DevTools. Дробите длинные задачи, чтобы браузер успевал реагировать на клики — это ключ к хорошему INP.

4. Забронируйте место под динамику. Задайте фиксированные размеры контейнерам для баннеров, cookie-плашек, блоков рекомендаций и рекламы. Анимируйте через transform, а не через margin, top или border. Так контент не будет прыгать, и CLS останется в зелёной зоне.

5. Ускорьте отдачу первого байта. Подключите CDN, включите кэширование и, где возможно, серверный рендеринг вместо клиентского — контент должен приходить готовым, а не собираться в браузере. Отдельно проверьте, что работает bfcache (кэш «назад/вперёд»): он даёт практически мгновенную навигацию по каталогу.

6. Настройте шрифты. Используйте font-display: swap, предзагружайте критичные начертания через <link rel="preload"> и минимизируйте число вариантов шрифта. Это убирает и задержку текста, и смещение при подмене шрифта.