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

Диагностика проблемы медленной загрузки страницы товара с вариациями

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

Для диагностики используйте следующие инструменты и подходы:

• Профилирование запросов к базе данных с помощью Query Monitor — выявляет медленные SQL-запросы, связанные с вариациями.
• Проверка времени загрузки и размера страницы через Chrome DevTools (Network вкладка) — выявляет медленные запросы и тяжелые ресурсы.
• Отключение сторонних плагинов, связанных с вариациями или фронтендом, чтобы исключить конфликт.
• Логирование запросов Ajax и их времени, если вариации загружаются динамически.

Типичные узкие места

• Генерация всех вариаций в массиве сразу через get_available_variations(), что приводит к большим объемам данных.
• Отсутствие кэширования вариаций.
• Подключение тяжелых скриптов и стилей.

Пошаговое решение

1. Ограничение выборки вариаций и их кэширование

Вместо вызова $product->get_available_variations() без параметров, который генерирует массив всех вариаций, используйте кэширование с Transients API. Это существенно уменьшит нагрузку при повторных запросах.

function get_cached_variations( $product_id ) {
    $transient_key = 'wc_variations_' . $product_id;
    $variations = get_transient( $transient_key );
    if ( false === $variations ) {
        $product = wc_get_product( $product_id );
        if ( ! $product || ! $product->is_type( 'variable' ) ) {
            return [];
        }
        $variations = $product->get_available_variations();
        set_transient( $transient_key, $variations, HOUR_IN_SECONDS );
    }
    return $variations;
}

Вызов функции в шаблоне заменит прямое получение вариаций. При обновлении товара кэш нужно сбрасывать, например, через хук save_post_product.

2. Подгрузка вариаций через Ajax по частям

Если вариаций очень много, лучше не загружать их все сразу, а реализовать постраничную или ленивую загрузку через Ajax. Это разгрузит фронтенд и сервер.

Пример регистрации Ajax-обработчика:

add_action( 'wp_ajax_load_product_variations', 'ajax_load_product_variations' );
add_action( 'wp_ajax_nopriv_load_product_variations', 'ajax_load_product_variations' );

function ajax_load_product_variations() {
    if ( ! isset( $_GET['product_id'] ) || ! is_numeric( $_GET['product_id'] ) ) {
        wp_send_json_error( 'Неверные параметры' );
    }
    $product_id = intval( $_GET['product_id'] );
    $page = isset( $_GET['page'] ) ? max( 1, intval( $_GET['page'] ) ) : 1;
    $per_page = 20; // количество вариаций на страницу

    $product = wc_get_product( $product_id );
    if ( ! $product || ! $product->is_type( 'variable' ) ) {
        wp_send_json_error( 'Товар не найден или не переменный' );
    }

    $all_variations = $product->get_available_variations();
    $offset = ( $page - 1 ) * $per_page;
    $paged_variations = array_slice( $all_variations, $offset, $per_page );

    wp_send_json_success( $paged_variations );
}

На фронтенде надо вызвать этот Ajax с параметрами product_id и page, и динамически обновлять отображение вариаций.

3. Отключение ненужных скриптов и стилей на странице товара

WooCommerce подключает много ресурсов, часть из которых не всегда нужна. Вы можете отключить их выборочно, чтобы снизить нагрузку.

function dequeue_woocommerce_scripts_styles() {
    if ( ! is_product() ) {
        wp_dequeue_style( 'woocommerce-layout' );
        wp_dequeue_style( 'woocommerce-smallscreen' );
        wp_dequeue_style( 'woocommerce-general' );
        wp_dequeue_script( 'wc-add-to-cart-variation' );
    }
}
add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_scripts_styles', 99 );

Обратите внимание, что скрипт wc-add-to-cart-variation нужен именно на странице товара вариаций, отключать его там нельзя.

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

• Повторите замеры времени загрузки страницы товара в Chrome DevTools, должно быть уменьшение времени ответа и размера загрузки.
• Проверьте в Query Monitor уменьшение количества и времени SQL-запросов, связанных с вариациями.
• Убедитесь, что все вариации корректно отображаются, в том числе при навигации по страницам, если используется Ajax.

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

• Кэш не сбрасывается после обновления товара — решается добавлением очистки транзиентов в хук save_post_product.
  

  add_action( 'save_post_product', function( $post_id ) {
      delete_transient( 'wc_variations_' . $post_id );
  });

• Ajax не работает из-за отсутствия nonce или неправильного URL — обязательно используйте wp_localize_script для передачи ajax_url и nonce на фронтенд.
• Отключение скриптов ломает функционал выбора вариаций — отключайте только те скрипты, которые не нужны на странице товара, проверяйте работу на тестовом стенде.

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

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

Сравнение вариантов решения проблемы