Core Web Vitals для WooCommerce: практический чек-лист

WooCommerce — один из самых тяжёлых движков для интернет-магазинов с точки зрения производительности. Десятки плагинов, динамический контент (корзина, цены, остатки), обилие изображений товаров и сторонние скрипты (аналитика, чаты, ретаргетинг) — всё это бьёт по Core Web Vitals сильнее, чем на обычном сайте на WordPress.

Разберём, что именно измеряют Core Web Vitals, почему WooCommerce страдает больше других, и дадим чек-лист, который можно проходить пункт за пунктом.

Что такое Core Web Vitals простыми словами

Google оценивает опыт пользователя по трём метрикам:

• LCP (Largest Contentful Paint) — как быстро отрисовывается самый крупный видимый элемент (обычно это главное изображение товара или баннер). Цель — до 2,5 секунды.
• INP (Interaction to Next Paint) — насколько быстро сайт реагирует на действия пользователя (клик по кнопке «В корзину», открытие фильтра, выбор варианта товара). Цель — до 200 мс. Эта метрика заменила FID в 2024 году и особенно важна для интернет-магазинов, где много интерактивных элементов.
• CLS (Cumulative Layout Shift) — насколько сильно «прыгает» верстка при загрузке. Цель — до 0,1. В WooCommerce это частая проблема из-за динамической подгрузки цен, отзывов и виджетов «сопутствующие товары».

Для карточки товара и каталога эти метрики влияют не только на позиции в поиске, но и напрямую на конверсию: задержка LCP на секунду обычно ощутимо снижает процент покупок.

Почему у WooCommerce Core Web Vitals часто «красные»

• Тема + конструктор страниц (Elementor, Divi) генерируют избыточный CSS/JS.
• Плагины для отзывов, апсейлов, чатов, popup-форм подключают собственные скрипты на каждой странице, даже если не нужны.
• Галереи товаров с зумом и слайдерами тяжело оптимизируются «из коробки».
• Cart Fragments (AJAX-запрос WooCommerce для обновления мини-корзины) выполняется на каждой странице и может замедлять INP.
• Изображения товаров часто заливаются без сжатия и в оригинальном разрешении.

Практический чек-лист

1. Хостинг и сервер

• Использовать хостинг, заточенный под WooCommerce (с поддержкой object cache — Redis/Memcached), а не универсальный shared-хостинг.
• Включить HTTP/2 или HTTP/3.
• Настроить серверное кэширование страниц (Varnish, Nginx FastCGI cache или встроенный кэш хостинга).
• Использовать PHP 8.1+ — WooCommerce и большинство плагинов заметно быстрее на новых версиях PHP.
• Подключить CDN для статики (изображения, CSS, JS).

2. Изображения (главный фактор LCP)

• Сжимать изображения товаров при загрузке (ShortPixel, Imagify, или встроенное сжатие хостинга).
• Конвертировать изображения в WebP/AVIF.
• Задавать атрибуты width и height для всех изображений, чтобы браузер резервировал место (влияет на CLS).
• Использовать loading="lazy" для изображений ниже первого экрана — но НЕ для главного изображения товара, оно должно грузиться сразу (fetchpriority="high").
• Отдавать адаптивные размеры через srcset, чтобы не грузить огромную картинку на мобильном.
• Проверить, не тянет ли галерея товара сразу все изображения вариаций — часто это лишний вес на LCP.

3. CSS и JavaScript

• Отключить загрузку CSS/JS WooCommerce и плагинов на страницах, где они не нужны (например, скрипты корзины на страницах блога). Плагины вроде Perfmatters или Asset CleanUp дают точечный контроль.
• Объединять и минифицировать CSS/JS через кэш-плагин (WP Rocket, FlyingPress, LiteSpeed Cache).
• Вынести некритичный CSS в асинхронную загрузку, оставив только critical CSS инлайном.
• Отложить (defer) загрузку JS, который не нужен для первого экрана.
• Проверить сторонние скрипты (пиксели рекламных сетей, чаты, тепловые карты) — грузить их с задержкой после взаимодействия пользователя (например, через партиталайзер скриптов).

4. INP: отзывчивость интерфейса

• Отключить или ограничить WooCommerce Cart Fragments, если мини-корзина не используется активно на каждой странице — это один из самых частых источников медленного отклика.
• Проверить плагины фильтрации каталога (Ajax-фильтры) — тяжёлые фильтры с большим количеством DOM-элементов часто «подвешивают» страницу при клике.
• Убрать лишние обработчики событий на кнопке «Добавить в корзину», если используется несколько плагинов апсейлов одновременно.
• Разбивать длинные JS-задачи (long tasks) — если используете кастомный код, дробить его через requestIdleCallback или setTimeout.
• Отказаться от избыточных popup-плагинов (для подписки, для отзывов о доставке и т.п.), которые инициализируются на каждой странице.

5. CLS: стабильность верстки

• Резервировать место под блоки, которые подгружаются асинхронно: цены при валютных конвертерах, виджеты отзывов, рекомендации «с этим товаром покупают».
• Указывать размеры для встраиваемых видео и iframe (YouTube-обзоры товаров).
• Подключать веб-шрифты с font-display: swap и предзагрузкой (preload), чтобы избежать «прыжка» текста при смене шрифта.
• Проверить баннеры и рекламные блоки — если они подгружаются с задержкой, задавать им фиксированную высоту через CSS.
• Убедиться, что уведомления («Товар добавлен в корзину», куки-баннеры) не сдвигают контент, а появляются поверх (position: fixed/absolute).

6. Плагины и админка

• Провести аудит установленных плагинов — отключить неиспользуемые, объединить функциональность там, где возможно (например, один плагин для SEO вместо трёх разных инструментов).
• Проверить количество виджетов на карточке товара — каждый добавленный виджет (недавно просмотренные, похожие товары, счётчик наличия) — это дополнительный вес.
• Настроить очистку логов и оптимизацию базы данных (таблицы wp_postmeta, wp_options) — раздутая база замедляет генерацию страниц даже с кэшем.
• Отключить autoload для неиспользуемых опций в базе данных.

7. Проверка и мониторинг

• Тестировать не только главную страницу, а карточку товара, каталог и страницу оформления заказа — у них разные узкие места.
• Использовать PageSpeed Insights и Chrome UX Report (полевые данные) вместе с лабораторными тестами (Lighthouse) — реальные пользователи на медленном интернете часто показывают совсем другую картину.
• Подключить Search Console → отчёт «Основные интернет-показатели» для отслеживания динамики по реальным пользователям.
• Повторять аудит после каждого крупного обновления темы, WooCommerce или ключевых плагинов — обновления нередко откатывают оптимизацию.

С чего начать, если времени мало

Если чек-лист выглядит длинным, начните с трёх пунктов, которые дают наибольший эффект при наименьших затратах:

1. Сжатие и правильная отдача изображений товаров.
2. Отключение Cart Fragments и ненужных скриптов на нерелевантных страницах.
3. Резервирование места под динамические блоки для устранения CLS.

Эти три шага обычно закрывают 60–70% проблем на типичном WooCommerce-магазине без изменения кода темы.

Итог

Core Web Vitals для WooCommerce — это не разовая настройка, а процесс: магазин постоянно меняется (новые товары, плагины, акции), и метрики нужно перепроверять регулярно. Начните с базовой гигиены — хостинг, кэш, изображения — а затем переходите к точечной настройке INP и CLS, которые чаще всего страдают именно на страницах каталога и корзины.