Core Web Vitals — три метрики, которыми поисковики измеряют, насколько сайтом удобно пользоваться. У каталогов они проседают предсказуемо, и чинятся тоже предсказуемо. Разберём по порядку, начиная с той, что даёт наибольший эффект.
LCP: когда появляется главное
Largest Contentful Paint — момент, когда отрисовался самый крупный элемент экрана. В каталоге это почти всегда первая карточка товара или баннер. Цель — уложиться в 2,5 секунды на мобильном.
Главный виновник — изображения. С них начинается любое ускорение сайта: картинка 2000 пикселей шириной, ужатая стилями до 300, грузится целиком. Первое, что нужно сделать: отдавать WebP или AVIF, задавать несколько размеров через srcset и не ставить lazy-загрузку на изображения первого экрана — отложенная загрузка того, что видно сразу, делает LCP хуже, а не лучше.
Восемь из десяти каталогов ускоряются вдвое одной только правильной работой с картинками — без переписывания кода.
CLS: когда всё прыгает
Cumulative Layout Shift считает, насколько содержимое дёргается при загрузке. Классика каталога: карточки подскакивают, когда подгрузились картинки, а кнопка «купить» уезжает из-под пальца ровно в момент нажатия. Цель — меньше 0,1.
- Указывать width и height у всех изображений, даже если размер задан стилями
- Резервировать место под баннеры и блоки, которые подгружаются скриптом
- Подключать шрифты с font-display: swap и заранее заданными метриками
- Не вставлять баннер согласия и промо-полосу над контентом после загрузки
INP: когда сайт не отвечает
Interaction to Next Paint пришёл на смену FID и измеряет, как быстро страница реагирует на действие. В каталоге это фильтр: поставил галочку — и на полсекунды всё замерло. Цель — меньше 200 миллисекунд.
Причина обычно в том, что фильтр перерисовывает весь список товаров синхронно. Лечится дроблением работы: обновлять только изменившиеся карточки, откладывать необязательные вычисления и убирать тяжёлые сторонние скрипты из основного потока.
С чего начинать
Не с PageSpeed Insights. Он показывает синтетический замер одной страницы, а важно, что происходит у реальных посетителей. Полную картину даёт технический аудит, где скорость смотрят вместе с индексацией и структурой. Смотрите отчёт по Core Web Vitals в Вебмастере и Search Console: там данные живых пользователей, и именно они влияют на ранжирование.
- Снять замеры по трём типам страниц: главная, категория, карточка
- Починить изображения — самый дешёвый и заметный шаг
- Зарезервировать места под подгружаемые блоки
- Проверить, что делает фильтр при каждом клике
- Пересчитать метрики через две-три недели, когда накопятся данные
И честное предупреждение: если сайт собран на тяжёлом шаблоне с тремя десятками плагинов, оптимизация даст несколько баллов, а не результат. В каталогах скорость почти всегда идёт в связке с продвижением интернет-магазина: быстрый сайт помогает позициям, но не заменяет работу со структурой. Иногда правильный ответ — не разгонять, а переделывать.
