WooCommerce: решение проблемы замедления отображения страницы товара при большом количестве вариаций

Диагностика проблемы с производительностью страницы товара в WooCommerce

Если вы заметили, что страницы товаров с большим количеством вариаций загружаются медленно, скорее всего, проблема связана с объемом данных, которые WooCommerce загружает и обрабатывает на клиентской стороне. Каждая вариация — это отдельный набор атрибутов и цен, который подгружается при генерации страницы. При тысячах вариаций это приводит к тяжелым скриптам, большому объему JSON и значительной нагрузке на сервер и браузер.

Чтобы подтвердить проблему, выполните следующие шаги:

• Откройте страницу товара с большим количеством вариаций в режиме инкогнито.
• Используйте инструменты разработчика (Chrome DevTools, вкладка Network) для анализа загрузки страницы: обратите внимание на размер скриптов и время загрузки.
• Проверьте вкладку Performance, чтобы увидеть, сколько времени уходит на рендеринг страницы и обработку событий JavaScript.
• Проверьте в консоли браузера наличие ошибок или предупреждений, связанных с памятью или тайм-аутами.

Почему WooCommerce замедляет страницу с большим числом вариаций

Основные причины замедления:

• Генерация JSON с данными всех вариаций и вставка их в HTML страницы (обычно в wp_localize_script или inline-скрипт).
• Обработка этих данных на фронтенде для взаимодействия с выбором вариаций.
• Вычисления и проверка доступности вариаций в PHP при загрузке страницы.
• Отсутствие кэширования данных вариаций.

Пошаговое решение: оптимизация загрузки вариаций

1. Отключаем автоматическую загрузку всех вариаций

По умолчанию WooCommerce подгружает все вариации сразу. Можно отключить эту функцию, чтобы загружать вариации динамически через AJAX по запросу пользователя.

add_filter('woocommerce_ajax_variation_threshold', '__return_zero');

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

add_filter('woocommerce_product_variation_get_children', function($children, $product) {
    if ($product->is_type('variable')) {
        return [];
    }
    return $children;
}, 10, 2);

2. Реализуем подгрузку вариаций через AJAX

Создаем кастомный AJAX-хендлер, который будет возвращать вариации по запросу.

add_action('wp_ajax_get_variations', 'load_variations_ajax');
add_action('wp_ajax_nopriv_get_variations', 'load_variations_ajax');

function load_variations_ajax() {
    if (empty($_POST['product_id'])) {
        wp_send_json_error('No product ID');
    }
    $product_id = intval($_POST['product_id']);
    $product = wc_get_product($product_id);
    if (!$product || !$product->is_type('variable')) {
        wp_send_json_error('Invalid product');
    }
    $variations = [];
    foreach ($product->get_children() as $variation_id) {
        $variation = wc_get_product($variation_id);
        $variations[] = [
            'id' => $variation->get_id(),
            'attributes' => $variation->get_attributes(),
            'price' => $variation->get_price_html(),
            'is_in_stock' => $variation->is_in_stock(),
        ];
    }
    wp_send_json_success($variations);
}

3. Подключаем AJAX-запрос на фронтенде

Добавьте скрипт, который по событию (например, при выборе основных атрибутов) запрашивает вариации у сервера.

jQuery(document).ready(function($) {
    var productId = wc_add_to_cart_params.product_id || $('form.variations_form').data('product_id');
    $.ajax({
        url: wc_add_to_cart_params.ajax_url,
        method: 'POST',
        data: {
            action: 'get_variations',
            product_id: productId
        },
        success: function(response) {
            if(response.success) {
                console.log('Variations loaded:', response.data);
                // Тут пишем логику для обработки вариаций и обновления UI
            } else {
                console.error('Failed to load variations:', response.data);
            }
        }
    });
});

Проверка результата после внедрения

• Обновите страницу товара с большим количеством вариаций.
• Откройте вкладку Network в DevTools и убедитесь, что данные вариаций не загружаются сразу (нет большого JSON в исходном коде).
• Проверьте, что вариации подгружаются через AJAX (ищите запрос get_variations).
• Измерьте время загрузки страницы до и после оптимизации — оно должно значительно уменьшиться.
• Убедитесь, что функционал выбора вариаций работает корректно.

Частые ошибки и как их исправить

• Ошибка: AJAX-запрос не возвращает данные.
  Причина: Неправильный product_id или отсутствует обработчик AJAX.
  Решение: Проверьте, что product_id передается корректно и хуки wp_ajax_* зарегистрированы.
• Ошибка: Скрипт не подключается на странице.
  Причина: Не вызван wp_enqueue_script или неправильно переданы параметры.
  Решение: Зарегистрируйте и подключите скрипт через wp_enqueue_script, передайте ajax_url через wp_localize_script.
• Ошибка: Потеря функционала выбора вариаций.
  Причина: Неправильная обработка данных вариаций на фронтенде.
  Решение: Реализуйте логику выбора вариаций с учетом загруженных данных, либо используйте готовые решения с кастомным AJAX.

Практические советы по безопасности и производительности

• Проверяйте nonce в AJAX-запросах для предотвращения CSRF-атак.
• Кэшируйте результаты AJAX-запросов на сервере, если вариации не меняются часто.
• Минимизируйте объем данных, передаваемых в AJAX (не отправляйте лишние поля).
• Используйте дебаунсинг (debounce) при повторных запросах для снижения нагрузки.
• Логируйте ошибки AJAX для быстрого выявления проблем.

Сравнение подходов к загрузке вариаций