Core Web Vitals для e-commerce: исправления LCP, INP и CLS
Медленные страницы товаров съедают конверсии. Вот что реально означают LCP, INP и CLS для интернет-магазинов и какие исправления дают наибольший эффект по каждой метрике.
Вы прогнали PageSpeed Insights по странице товара. На вас смотрят три красных индикатора. Балл — 41. На тестовом телефоне страница тоже грузится медленно, но непонятно, какая из трёх метрик на самом деле съедает продажи — и какую исправлять первой.
Core Web Vitals — это три метрики загрузки и взаимодействия, которые Google публикует для каждого сайта. На ранжирование они влияют по краям. На конверсию — гораздо сильнее. Для интернет-магазина, где каждая секунда задержки отщипывает доверие от кнопки покупки, одного только эффекта на конверсию достаточно, чтобы их исправить, даже не считая SEO.
Три метрики, кратко
- LCP (Largest Contentful Paint) измеряет, через сколько времени дорисуется самый большой видимый элемент — обычно это главное изображение товара. Хорошо: меньше 2,5 секунды. Плохо: больше 4 секунд.
- INP (Interaction to Next Paint) измеряет, насколько страница отзывчива к тапам и кликам. Заменил FID в марте 2024 года. Хорошо: меньше 200 мс. Плохо: больше 500 мс.
- CLS (Cumulative Layout Shift) измеряет, насколько элементы прыгают по мере загрузки страницы. Хорошо: меньше 0,1. Плохо: больше 0,25.
Руководство web.dev по Core Web Vitals описывает формальные определения; остальная часть статьи сосредоточена на том, что с этим делать в реальном магазине.
Почему e-commerce страдает сильнее блогов
Запись в блоге — это текст, может быть, одно главное изображение, может быть, эмбед. Страница товара — это главное изображение, галерея миниатюр, виджет отзывов, карусель рекомендаций, чат-пузырь, попап с допродажей, выезжающая корзина, аналитика для трёх платформ, рекордер тепловых карт и фреймворк A/B-тестов. Каждое из них тащит JavaScript. Каждое из них борется за главный поток.
Типичная витрина Shopify в 2026 году тянет какую-то комбинацию из:
- Klaviyo (сбор email, попапы)
- Privy или OptinMonster (exit-intent)
- Smile.io или Loyalty Lion (виджет программы лояльности)
- Yotpo или Judge.me (отзывы)
- Tidio или Gorgias (чат)
- Hotjar или Microsoft Clarity (запись сессий)
- GA4, Meta Pixel, TikTok Pixel (аналитика)
Каждый из них ощущается бесплатным при установке. Ни один из них не бесплатен. Цена проявляется сначала в INP, потом в LCP, потом в вашей конверсии.
Исправления LCP для страниц товаров
LCP на странице товара — это почти всегда главное изображение. Три изменения в порядке влияния:
1. Отдавайте правильный формат и размер. PNG 4000×4000, прямо от фотографа товаров, весит 6 МБ. То же изображение в виде корректно отресайзенного WebP или AVIF в реально отрисовываемых размерах часто весит меньше 150 КБ. И Shopify, и WooCommerce справляются с этим сами, если перестать перебивать их ресайз.
2. Делайте preload главного изображения. Добавьте подсказку preload в <head>, чтобы браузер начал тянуть его до парсинга остальной страницы:
<link rel="preload" as="image"
href="/products/wallet-hero.webp"
imagesrcset="/products/wallet-hero-400.webp 400w,
/products/wallet-hero-800.webp 800w,
/products/wallet-hero-1200.webp 1200w"
imagesizes="(max-width: 768px) 100vw, 50vw">
3. Не делайте lazy-load для изображений выше сгиба. loading="lazy" на главном изображении — это самый частый убийца LCP на страницах товаров. Делайте lazy-load для миниатюр и кадров галереи ниже сгиба; никогда — для первого видимого изображения.
Справочник: Optimize LCP на web.dev.
Исправления INP для страниц товаров
INP — это то, с чем у большинства магазинов хуже всего. Картина типовая: страница выглядит загруженной, пользователь жмёт «В корзину», и до какой-либо реакции — 600 мс заморозки. Эта заморозка — JavaScript, который крутится на главном потоке.
1. Отложите некритичные скрипты. Добавьте defer или загружайте через async всё, что не нужно для отрисовки кнопки покупки. Виджеты отзывов, чат-пузыри, движки рекомендаций — всё это должно подгружаться после того, как страница станет интерактивной, а не во время этого.
2. Беспощадно проверяйте сторонние виджеты. В большинстве магазинов установлены два виджета, делающих одно и то же (два аналитических инструмента, два провайдера попапов). Выберите один. Удалите второй. Каждый лишний виджет накапливается.
3. Замените тяжёлые виджеты отзывов серверным рендерингом рейтингов. Виджет, который гидратирует 500 отзывов в DOM на клиенте, — топ-3 нарушитель INP. Рендерьте агрегированный рейтинг и три верхних отзыва на сервере; полный список отзывов подгружайте лениво, когда пользователь до него доскроллит.
Для магазинов на Next.js / React-стеке правильные кроличьи норы — это документация React по тяжёлой гидратации и потоковый SSR у Next.js.
Исправления CLS для страниц товаров
Сдвиг макета — самое дешёвое из трёх в исправлении и самое стыдное оставлять сломанным. Три изменения:
1. Задавайте явные размеры каждому изображению. Всегда указывайте атрибуты width и height (или CSS-свойство aspect-ratio), чтобы браузер резервировал место до загрузки изображения:
<img src="/products/wallet.webp"
width="800" height="800"
alt="Hand-stitched leather wallet, front view">
2. Аккуратно используйте font-display: swap. Вспышка нестилизованного текста сдвигает макет, когда подгружается кастомный шрифт. Либо делайте preload шрифта, либо используйте font-display: optional, чтобы предотвратить поздние подмены.
3. Резервируйте место для встраиваний. Виджеты отзывов, карусели рекомендаций и рекламные слоты, которые вставляются над существующим контентом, вызывают каскадные сдвиги. Оборачивайте их в контейнер фиксированной высоты на время загрузки.
Справочник: Optimize CLS.
Как EshopAuditor показывает это
CWV-балл в EshopAuditor отражает производительность вашей главной страницы, измеренную Google PageSpeed Insights в стратегиях Mobile и Desktop. Остальные просканированные страницы анализируются на структуру HTML, схему, метаданные и SEO-проблемы на странице — но без отдельного запуска Lighthouse для каждой. Per-page Lighthouse дорого запускать в масштабе; CWV главной страницы — это индикативный сигнал типичного профиля производительности по всему сайту.
CWV главной — индикативный показатель, а не исчерпывающий: если ваша главная медленная, страницы товаров почти всегда ещё медленнее (та же тема, те же виджеты, та же загрузка скриптов). Для точных per-page CWV по всему каталогу совмещайте этот отчёт с разделом Core Web Vitals в Google Search Console, который использует real-user-данные CrUX по каждому URL, по которому у Google есть показы.
Несправедливая правда про CWV и ранжирование
Google недвусмысленно сказал: Core Web Vitals — это фактор ранжирования, но второстепенный. Две страницы со сравнимым качеством контента, на запросе, где CWV близки, увидят CWV как тайбрейкер. И всё.
На что Core Web Vitals влияют драматически — это конверсия. Секундная задержка в LCP не скинет вас с первой страницы Google на вторую. Но она измеримо бьёт по конверсии в покупку — и на e-commerce-трафике это падение конверсии обычно перекрывает любой плюс или минус по SEO. За квартал трафика дельта окупает ваши инструменты, рекламу и ваше время в несколько раз.
Исправляйте Core Web Vitals потому, что они делают магазин прибыльнее, а не потому, что так сказал Google. Выигрыш в SEO — бонус.
Запустите бесплатный аудит магазина на eshopaudit.io — без регистрации для первого сканирования.