Скорость каталога и карточек товара: Core Web Vitals для магазина

Скорость магазина почти всегда упирается в три вещи: фотографии товаров, сторонние скрипты и то, как устроены фильтры и списки. Ускорять стоит не главную, а шаблоны, через которые проходит основной поисковый трафик, — категорию и карточку товара. Начните с полевых данных Core Web Vitals в Google Search Console, найдите группу медленных адресов и разберите один типовой адрес из неё в PageSpeed Insights.

Где мерить и чему верить

У скорости два источника данных, и их легко перепутать.

Полевые данные собираются с реальных посетителей в браузере Chrome. Их показывает отчёт «Основные интернет-показатели» в Search Console и верхний блок PageSpeed Insights, если трафика на странице достаточно. Именно они отражают, как сайт работает у покупателя на старом телефоне и мобильном интернете.

Лабораторные данные — разовый замер Lighthouse в одинаковых условиях. Они удобны, чтобы понять причину и проверить исправление, но сами по себе ничего не говорят о реальных пользователях.

В Яндекс Метрике, в отчётах о мониторинге, видно время загрузки страниц по вашим посетителям: полезно сравнить, не тормозит ли каталог сильнее в каком-то регионе или на определённых устройствах.

Search Console группирует адреса с похожими проблемами. Для магазина это удобно: обычно все карточки сидят в одной группе, все категории — в другой, и чинить нужно шаблон, а не каждую страницу.

Три метрики на языке каталога

Пороги — опубликованные значения Google для 75-го процентиля визитов. Яндекс собственных публичных порогов не называет, но медленный каталог одинаково плохо влияет на поведение покупателей в обеих системах.

Фотографии: самый быстрый выигрыш

На карточке товара главное фото почти всегда и есть LCP-элемент. На категории — первые несколько превью в сетке.

1. Откройте карточку в PageSpeed Insights и посмотрите, какой элемент указан как LCP.
2. Проверьте, в каком формате и размере он отдаётся. Частая картина: загруженный из учётной системы снимок на несколько мегабайт, ужатый браузером до 500 пикселей.
3. Настройте генерацию копий под нужные размеры и современные форматы WebP или AVIF. На 1С-Битрикс, InSales, WooCommerce и OpenCart это делается штатными средствами или правилами на стороне сервера по-разному, но цель одна: браузер получает не больше, чем показывает.
4. Главное фото не откладывайте ленивой загрузкой, остальные — откладывайте.
5. Задайте ширину и высоту, чтобы место под картинку резервировалось заранее.

<img src="/upload/divan-oslo-800.webp"
     srcset="/upload/divan-oslo-400.webp 400w, /upload/divan-oslo-800.webp 800w"
     sizes="(max-width: 600px) 100vw, 50vw"
     width="800" height="600"
     fetchpriority="high"
     alt="Диван Осло, серая рогожка, раскладной">

<!-- превью в сетке категории ниже первого экрана -->
<img src="/upload/kreslo-200.webp" width="200" height="200" loading="lazy" alt="Кресло Тиль">

Про то, какие фото и подписи нужны карточке с точки зрения содержания, — на странице про карточку товара. Здесь речь только о весе и порядке загрузки.

Фильтры и списки на JavaScript

В категории покупатель кликает по фильтрам, и здесь живёт INP. Медленно бывает в двух случаях: каждый клик перезагружает всю страницу целиком с сервера, либо, наоборот, скрипт тянет весь каталог в браузер и фильтрует его там.

Что обычно помогает:

• запрашивать с сервера только список товаров и счётчики, а не всю страницу;
• показывать, что фильтр применён, сразу, а результаты подгружать следом;
• не пересчитывать счётчики по всем фасетам на каждый клик, если это тяжело для базы — кешировать их.

Есть и SEO-сторона. Если комбинации фильтров, которые вы хотите видеть в поиске, существуют только как результат работы скрипта, без своего адреса и без HTML со списком товаров, поисковик их не увидит. Какие сочетания открывать и как дать им адреса, разобрано на странице про фасетные фильтры. С кнопкой «Показать ещё» и бесконечной прокруткой та же история: у следующей порции товаров должен быть адрес, подробности — на странице про пагинацию.

Сторонние скрипты

Онлайн-чат, виджет обратного звонка, несколько систем аналитики, пиксели рекламы, всплывающее окно с подпиской, виджет отзывов — по отдельности каждый выглядит безобидно. Вместе они часто весят больше самого магазина и блокируют главный поток браузера.

Пройдитесь по списку в разделе «Сеть» инструментов разработчика или в блоке о сторонних ресурсах Lighthouse и для каждого скрипта ответьте: кто им пользуется и когда последний раз смотрел данные. То, что никому не нужно, удалите. Остальное подключайте отложенно — после загрузки основного контента или после первого действия пользователя. Чат, который появляется через несколько секунд, покупателю не мешает.

Сервер и кеш

Если медленным оказывается уже первый байт ответа, проблема на стороне сервера. В магазине это обычно тяжёлые запросы к базе для категорий с тысячами товаров и фильтрами.

• Включите кеширование готового HTML категорий и карточек хотя бы на несколько минут — цены и остатки можно догружать отдельным лёгким запросом.
• Статике (картинки, стили, скрипты) задайте долгий срок хранения в браузере и версионирование в имени файла.
• Проверьте, включено ли сжатие и современный протокол на сервере.
• После выгрузки из учётной системы не сбрасывайте весь кеш разом, если меняются цены у десятка товаров.

Порядок работ

Для магазина стройматериалов в областном центре с медленной мобильной версией разумная последовательность такая: сначала фото на карточках, потом лишние сторонние скрипты, потом фильтры категории, в конце — сервер и кеш. Каждый шаг проверяется лабораторным замером сразу, а в полевых данных Search Console улучшение проявляется постепенно, по мере накопления новых визитов. Для общей сверки скорость входит в чек-лист аудита магазина.

Проверить в своём магазине

• Есть ли в Search Console группы медленных адресов для мобильных и какой шаблон в них попал.
• Какой элемент — LCP на карточке и на категории и сколько он весит.
• Заданы ли размеры у фото и не грузится ли главное фото лениво.
• Сколько сторонних скриптов подключено и про каждый ли известно, зачем он нужен.
• Сколько длится отклик на клик по фильтру на обычном телефоне.
• Кешируется ли HTML категорий или собирается заново при каждом заходе.

Вопросы владельцев магазинов

Насколько скорость влияет на позиции магазина?

Скорость — один из многих сигналов, и сама по себе она не выведет слабую категорию в топ. Но медленный каталог ухудшает поведение покупателей: они чаще уходят, не дождавшись фото или реакции фильтра. Поэтому ускорение стоит делать там, где оно мешает реальным людям, а не ради максимальной оценки в тесте.

PageSpeed Insights показывает низкую оценку, а сайт открывается быстро. Кому верить?

Лабораторная оценка считается для слабого телефона и медленного соединения, поэтому на рабочем компьютере сайт может казаться быстрым. Смотрите на полевые данные в том же отчёте и в Search Console: если реальные визиты укладываются в пороги, низкая лабораторная оценка не повод для паники.

Нужна ли отдельная мобильная версия для скорости?

Обычно нет. Адаптивная вёрстка с правильно подготовленными фото и отложенными скриптами работает не хуже, а поддерживать один шаблон проще. Отдельная мобильная версия добавляет риск расхождений в контенте и ссылках между версиями.

Помогает ли перенос картинок на отдельный домен или CDN?

Помогает, если сервер магазина далеко от покупателей или перегружен отдачей статики. Но если фото изначально весят по несколько мегабайт, CDN лишь быстрее доставит тяжёлый файл. Сначала уменьшите вес изображений, потом решайте вопрос доставки.