Диагностика проблемы: как определить, что WooCommerce загружает лишние скрипты и стили
WooCommerce по умолчанию подключает свои CSS и JS файлы на всех страницах сайта, даже если функционал магазина используется только на нескольких страницах. Это увеличивает время загрузки страниц, расход трафика и замедляет рендеринг. Чтобы проверить, загружаются ли лишние скрипты и стили, используйте инструменты разработчика браузера (Chrome DevTools, вкладка Network и Sources) и плагины типа Query Monitor.
Особенно это заметно, если ваш сайт — это лендинг или блог с минимальной интеграцией WooCommerce. При больших проектах лишние запросы негативно влияют на скорость и SEO.
Пошаговое решение: отключаем ненужные скрипты и стили WooCommerce
1. Определяем страницы с активным WooCommerce функционалом
Для большинства проектов это страницы магазина, товара, корзины и оформления заказа. В коде проверяем с помощью условных тегов:
if ( function_exists( 'is_woocommerce' ) && is_woocommerce() ) {
// Страницы WooCommerce
}2. Отключаем скрипты и стили по умолчанию на всех страницах
Добавьте следующий код в functions.php вашей темы или в плагин-сниппет:
function wpclean_disable_woocommerce_assets() {
if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() && ! is_account_page() ) {
// Отключаем стили WooCommerce
wp_dequeue_style( 'woocommerce-general' );
wp_dequeue_style( 'woocommerce-layout' );
wp_dequeue_style( 'woocommerce-smallscreen' );
// Отключаем скрипты WooCommerce
wp_dequeue_script( 'woocommerce' );
wp_dequeue_script( 'wc-cart-fragments' );
}
}
add_action( 'wp_enqueue_scripts', 'wpclean_disable_woocommerce_assets', 99 );3. Проверяем дополнительные плагины WooCommerce
Если у вас есть расширения WooCommerce, они тоже могут подключать свои ассеты. Для каждого плагина нужно аналогично найти ID скриптов и стилей и отключить их условно.
Проверка результата после внедрения
- Откройте любую страницу без WooCommerce функционала (например, главную или блог).
- Включите инструменты разработчика и перейдите на вкладку Network.
- Обновите страницу и отфильтруйте ресурсы по типу CSS и JS.
- Убедитесь, что файлы
woocommerce.cssиwoocommerce.jsне загружаются. - Запустите тест скорости через Google PageSpeed Insights или GTmetrix — должно быть улучшение в скорости загрузки и уменьшении количества запросов.
Частые ошибки и как их исправить
Ошибка 1: Отключение ассетов ломает страницы WooCommerce
Причина: условие в коде не учитывает все страницы WooCommerce. Проверьте, добавлены ли проверки для is_cart(), is_checkout(), is_account_page(). Добавьте их, чтобы скрипты и стили загружались там, где они нужны.
Ошибка 2: Скрипты загружаются от плагинов-расширений
Причина: в коде отключены только базовые WooCommerce ассеты. Используйте плагин Query Monitor, чтобы увидеть ID скриптов/стилей, и добавьте аналогичное отключение с помощью wp_dequeue_script и wp_dequeue_style.
Ошибка 3: Кэширование мешает видеть результат
Очистите все кеши сайта (плагинов кеширования, серверные, CDN) и браузера для проверки изменений.
Практические советы по безопасности и производительности
- Отключение ненужных скриптов и стилей снижает нагрузку на сервер и ускоряет загрузку, что положительно влияет на SEO и UX.
- Не отключайте скрипты и стили на страницах, где используется WooCommerce, иначе функционал может сломаться.
- Рекомендуется тестировать изменения в staging-среде перед внедрением на продакшн.
- Используйте плагины кеширования вместе с этим методом, чтобы дополнительно ускорить загрузку.
Сравнение вариантов отключения WooCommerce ассетов
| Метод | Плюсы | Минусы | Пример использования |
|---|---|---|---|
| Плагин (Asset CleanUp, Perfmatters) | Простой интерфейс, гибкость | Дополнительные плагины, нагрузка | UI для отключения скриптов/стилей |
| Код в functions.php | Нет лишних плагинов, полный контроль | Требует знаний, риск ошибок | Пример кода выше |
| Хардкодинг в теме | Максимальная оптимизация | Сложно сопровождать, зависит от темы | Встроенный в тему код |