Оптимизация WooCommerce товары: ускоряем продуктовые страницы за 5 шагов

Почему скорость страниц товаров критична для WooCommerce

Каждая миллисекунда загрузки напрямую влияет на коэффициент конверсии и SEO‑позиции. По данным Google, увеличение времени отклика на 1 секунду уменьшает доходы онлайн‑магазинов в среднем на 7 %. Поэтому владельцы WooCommerce‑магазинов вынуждены искать специфические способы ускорения именно продуктовых страниц.

Lazy Load вариаций: выгружаем только нужные атрибуты

Вариации (цвет, размер, материал) часто хранятся в массиве $_POST['variation_id'], который выводится сразу при загрузке страницы. При большом каталоге это приводит к росту HTML‑размера и замедлению рендеринга. Решение – подгружать данные о вариациях только после взаимодействия пользователя.

Шаг 1. Отключаем стандартный вывод

add_filter( 'woocommerce_available_variation', '__return_false' );

Этим фильтром мы убираем массив всех вариаций из исходного HTML.

Шаг 2. Подгружаем данные через AJAX

add_action( 'wp_enqueue_scripts', function() {
    if ( is_product() ) {
        wp_enqueue_script( 'wc-variation-lazy', get_template_directory_uri() . '/js/wc-variation-lazy.js', array( 'jquery' ), '1.0', true );
        wp_localize_script( 'wc-variation-lazy', 'wcLazyParams', array(
            'ajax_url' => admin_url( 'admin-ajax.php' ),
            'nonce'    => wp_create_nonce( 'wc_lazy_variation' ),
        ));
    }
});

add_action( 'wp_ajax_nopriv_wc_lazy_variation', function() {
    check_ajax_referer( 'wc_lazy_variation', 'nonce' );
    $product_id = intval( $_POST['product_id'] );
    $product    = wc_get_product( $product_id );
    $variations = $product->get_available_variations();
    wp_send_json_success( $variations );
});

JS‑скрипт отправляет запрос только когда пользователь открывает блок «Выбрать вариант». Это сокращает размер HTML до нескольких килобайт.

Оптимизация галереи изображений продукта

Галерея зачастую содержит 10‑15 изображений высокого разрешения. Без оптимизации они грузятся последовательно, блокируя рендеринг.

3 способа ускорить галерею

• Lazy Load изображений – начиная с WordPress 5.5, функция wp_lazy_loading_enabled включена по умолчанию, но для WooCommerce‑галерей требуется добавить атрибут loading="lazy" вручную.
• WebP‑конверсия – современные браузеры поддерживают WebP‑изображения, которые в среднем в 30 % легче JPEG.
• Сжатие через CDN – используем BunnyCDN для динамического сжатия и отдачи оптимального формата.

Код для добавления lazy‑load в галерею

add_filter( 'woocommerce_single_product_image_thumbnail_html', function( $html, $attachment_id ) {
    // Добавляем атрибут loading="lazy" к каждому 
    $html = preg_replace( '/<img/', '<img loading="lazy"', $html, 1 );
    return $html;
}, 10, 2 );

Этот фильтр работает как для основной картинки, так и для миниатюр в слайдере.

Отложенные AJAX‑запросы к сторонним сервисам

На страницах товаров часто вызываются скрипты отзывов, рекомендаций или аналитики. Если они загружаются синхронно, пользователь видит «зависание» до завершения всех запросов.

Перенос скриптов в конец body

add_action( 'wp_enqueue_scripts', function() {
    wp_dequeue_script( 'yith-wcwl' ); // пример: скрипт списка желаний
    wp_enqueue_script( 'yith-wcwl', plugins_url( '/assets/js/frontend.js', YITH_WCWL_PLUGIN_FILE ), array('jquery'), null, true );
});

Параметр true в wp_enqueue_script гарантирует, что скрипт будет загружен после основного контента.

Отложенная инициализация через IntersectionObserver

Создаём небольшой JS‑файл, который наблюдает за блоком «Отзывы» и инициализирует плагин только при появлении блока в зоне видимости.

document.addEventListener('DOMContentLoaded', function(){
    const reviews = document.querySelector('#reviews');
    if (!reviews) return;
    const observer = new IntersectionObserver((entries)=>{
        entries.forEach(entry=>{
            if(entry.isIntersecting){
                const script = document.createElement('script');
                script.src = 'https://example.com/reviews-widget.js';
                document.body.appendChild(script);
                observer.unobserve(reviews);
            }
        });
    });
    observer.observe(reviews);
});

Такой подход сокращает количество одновременных запросов и ускоряет Time‑to‑Interactive.

Кеширование и CDN: завершённый цикл ускорения

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

1. Включить Object Cache через плагин Redis Object Cache – сохраняет результаты запросов к базе, включая цены и наличие.
2. Подключить Full‑Page Cache (например, WP Rocket) и исключить страницы корзины и оформления.
3. Настроить CDN (BunnyCDN) для всех статических файлов: изображения, CSS, JS.

Комбинация этих методов позволяет сократить First Contentful Paint (FCP) до 1,2 сек.

Тестирование и мониторинг результатов

Оптимизацию нельзя считать завершённой без измерений. Используйте:

• PageSpeed Insights – сравните баллы до и после изменений.
• Плагин Query Monitor для контроля количества запросов к базе.
• Крон‑задачу, автоматически очищающую устаревшие транзиенты (см. Очистка базы данных WordPress).

Если FCP упал менее чем на 30 %, а количество запросов к базе уменьшилось на 20 % – значит, работа выполнена успешно.