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

Проблема: замедленная загрузка страниц WooCommerce из-за скриптов

WooCommerce значительно увеличивает количество загружаемых скриптов и стилей на страницах магазина. Это часто приводит к замедлению загрузки страниц и ухудшению пользовательского опыта, особенно на мобильных устройствах. Отложенная загрузка (defer или async) скриптов — один из способов ускорить сайт. Однако применение отложенной загрузки к скриптам WooCommerce может нарушить функционал корзины и оформления заказа.

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

Перед оптимизацией нужно понять, какие скрипты замедляют сайт и как отложенная загрузка влияет на функционал:

• Используйте расширение браузера «Network» (Сеть) в Chrome или Firefox, чтобы посмотреть время загрузки JS-файлов и определить самые тяжелые.
• Проверяйте консоль браузера (Console) на наличие ошибок JavaScript после включения отложенной загрузки.
• Тестируйте ключевые сценарии WooCommerce: добавление товара в корзину, обновление корзины, оформление заказа, переключение вариаций товара.

Пример выявления проблемного скрипта:

jQuery.Deferred exception: $ is not a function TypeError: $ is not a function

Это указывает, что скрипт пытается использовать jQuery до того, как он загрузился, что часто случается при неправильной отложенной загрузке.

Пошаговое решение для безопасной отложенной загрузки скриптов WooCommerce

Шаг 1. Исключите из отложенной загрузки критичные для WooCommerce скрипты

Критичные скрипты WooCommerce:

• woocommerce.js
• cart-fragments.js
• add-to-cart.js

Их нельзя загружать с атрибутом defer или async, иначе функционал корзины и обновления частей страницы сломается.

Пример кода для исключения этих скриптов в functions.php:

function exclude_woocommerce_scripts_from_defer( $tag, $handle, $src ) {
    $exclude_handles = [ 'woocommerce', 'wc-cart-fragments', 'wc-add-to-cart' ];

    if ( in_array( $handle, $exclude_handles ) ) {
        return $tag; // возвращаем без изменений
    }

    if ( strpos( $tag, 'script' ) !== false ) {
        // добавляем defer к остальным скриптам
        return str_replace( ' src', ' defer src', $tag );
    }

    return $tag;
}
add_filter( 'script_loader_tag', 'exclude_woocommerce_scripts_from_defer', 10, 3 );

Шаг 2. Включите отложенную загрузку для остальных скриптов

Если вы используете WP Rocket, активируйте опцию отложенной загрузки JS, а затем добавьте исключения для WooCommerce скриптов в настройках. Если кодовая реализация, используйте фильтр, как показано выше.

Шаг 3. Тестирование и отладка

• Проверьте консоль браузера на ошибки JS.
• Добавьте в корзину несколько товаров, обновите страницу корзины, попробуйте оформить заказ.
• Используйте Chrome DevTools для проверки, что критичные скрипты не загружаются с defer.

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

Чтобы убедиться, что оптимизация прошла успешно, выполните следующие проверки:

• Скорость загрузки страниц улучшилась (проверьте с помощью Google PageSpeed Insights или GTmetrix).
• Функционал WooCommerce работает корректно: добавление в корзину, обновление корзины, оформление заказа.
• Отсутствие критических ошибок JavaScript в консоли.

Пример проверки, что скрипты WooCommerce не отложены (в консоли Chrome):

document.querySelectorAll('script[src*="woocommerce"]')
.forEach(s => console.log(s.defer)); // должно быть false для критичных

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

• Ошибка: Добавление defer к wc-cart-fragments.js
  Причина: Этот скрипт отвечает за обновление корзины через AJAX.
  Исправление: Исключите этот скрипт из отложенной загрузки.
• Ошибка: Использование async вместо defer для основных скриптов WooCommerce
  Причина: async загружает скрипт непредсказуемо, нарушая порядок.
  Исправление: Используйте только defer (или не используйте атрибут для критичных скриптов).
• Ошибка: Отсутствие проверки консоли на ошибки после оптимизации
  Причина: Пропущены ошибки JavaScript, которые ломают функционал.
  Исправление: Всегда проверяйте консоль и тестируйте пользовательские сценарии после изменений.

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

• Используйте дочернюю тему для внесения изменений в functions.php, чтобы избежать потери при обновлении.
• Не отключайте критичные скрипты WooCommerce, даже если они кажутся тяжелыми — лучше найти компромисс с отложенной загрузкой остальных.
• Регулярно очищайте кэш WP Rocket после внесения изменений в скрипты.
• Используйте инструменты профилирования (Query Monitor) для мониторинга нагрузки на сервер.
• Обратите внимание на совместимость с другими плагинами кеширования и оптимизации, чтобы избежать конфликтов.

Сравнение способов отложенной загрузки скриптов WooCommerce