Как удалить тормозящие AJAX-запросы в WooCommerce на мобильных устройствах

Диагностика проблемы медленной работы WooCommerce на мобильных устройствах

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

• Открыть мобильную версию сайта в браузере (например, Chrome DevTools с эмуляцией мобильного устройства);
• Перейти на страницу с продуктами или корзиной;
• Включить вкладку Network и отфильтровать запросы по XHR;
• Посмотреть время отклика AJAX-запросов, их количество и частоту вызовов;
• Обратить внимание на дублирующиеся или избыточные запросы, которые необязательно должны выполняться.

Типичные причины избыточных AJAX-запросов в WooCommerce на мобильных устройствах

• Тема или плагины не оптимизированы и вызывают AJAX по событиям, которые можно обработать локально;
• Некорректная настройка мини-корзины, которая обновляется слишком часто;
• Плохая реализация фильтров товаров, вызывающая множественные запросы при каждом изменении;
• Конфликты плагинов, приводящие к повторным запросам;
• Отсутствие кеширования ответов AJAX или неподходящий кеш для мобильных запросов.

Пошаговое решение: как уменьшить и оптимизировать AJAX-запросы WooCommerce на мобильных

1. Отключаем избыточные AJAX-обработчики в теме или плагинах

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

if(window.matchMedia("(max-width: 768px)").matches) {
  // Отключаем обновление мини-корзины по ховеру
  jQuery(document).off('mouseenter', '.mini-cart');
}

2. Оптимизируем обработку фильтров товаров

Часто AJAX-запросы вызываются при каждом изменении фильтра (checkbox, select). Чтобы уменьшить количество запросов, можно добавить задержку и отправлять запрос только после того, как пользователь закончил выбор:

let filterTimeout;
jQuery('.filter-input').on('change', function() {
  clearTimeout(filterTimeout);
  filterTimeout = setTimeout(() => {
    // Вызов AJAX для обновления товаров
    updateProducts();
  }, 500); // Задержка 500 мс
});

3. Используем серверное кеширование и кеширование AJAX-ответов

Настройте кеширование частых AJAX-ответов, особенно для запросов с фильтрами и мини-корзиной. Если используете плагин кеширования (например, WP Rocket, LiteSpeed Cache), убедитесь, что AJAX-запросы кешируются или оптимизированы на сервере.

4. Отключаем AJAX для неключевых элементов на мобильных

Если какие-то AJAX-функции не критичны для мобильного интерфейса, отключите их с помощью фильтров в functions.php:

function disable_ajax_on_mobile() {
  if(wp_is_mobile()) {
    // Отключаем обновление мини-корзины через AJAX
    remove_action('wp_footer', 'woocommerce_mini_cart_fragments');
  }
}
add_action('wp', 'disable_ajax_on_mobile');

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

• Повторите диагностику в Chrome DevTools на эмуляции мобильного устройства;
• Проверьте количество и время отклика AJAX-запросов — их должно стать меньше;
• Проверьте функциональность сайта: добавление товара, фильтры, обновление корзины должны работать корректно и быстрее;
• Проверьте работу сайта на реальном мобильном устройстве с медленным соединением.

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

• Удаление нужных AJAX-обработчиков: отключение слишком агрессивное может сломать функционал. Исправление — тестируйте каждое отключение отдельно.
• Игнорирование кеширования: без кеша на сервере AJAX-запросы могут оставаться тяжелыми. Исправление — настройте кеширование и проверьте заголовки ответов.
• Задержка слишком маленькая или отсутствует: если debounce не используется при фильтрах, запросы идут слишком часто. Исправление — добавьте задержку 300-500 мс.
• Отключение AJAX на десктопе вместе с мобильным: используйте wp_is_mobile() или JS media queries для точечного отключения.

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

• Проверяйте nonce в AJAX-запросах, чтобы избежать CSRF-атак;
• Используйте wp_localize_script для передачи nonce и URL AJAX в JS;
• Оптимизируйте PHP-обработчики AJAX, минимизируйте запросы к базе данных;
• Пользуйтесь плагинами кеширования, поддерживающими WooCommerce и AJAX;
• Используйте CDN для статических ресурсов и сократите количество запросов;
• Периодически очищайте кэш и обновляйте плагины, чтобы избежать багов.

Сравнение подходов к оптимизации AJAX в WooCommerce на мобильных