Загружаем скрипты и стили WooCommerce только на его страницах

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

woocommerce-thumb[1]

Какие скрипты WooCommerce мы будем убирать?

woocommerce-param-junk-300x205[1]

Откройте ваш сайт на WordPress, на котором установлен и активирован плагин WooCommerce. Посмотрите в исходный код и вы увидите множество файлов JavaScript и CSS, относящихся к WooCommerce, наряду с метатегом генератора, а также большой блок параметров woocommerce (на скриншоте).

Скрипты

  • woocommerce.min.js
  • checkout.js
  • add-to-cart.min.js
  • jquery.cookie.min,js
  • cart-fragments.min.js
  • jquery.blockUI.min.js
  • jquery.placeholder.min.js
  • … еще?!

woo-scripts[1]

Стили

  • woocommerce.css
  • Всяческие стили lightbox (prettyphoto)
  • Пользовательские стили CSS для WooCommerce
  • … возможные дополнительные CSS в зависимости от вашего сайта.

Как вы видите, список достаточно внушительный. Все эти скрипты действительно могут добавить дополнительное время загрузки вашего сайта. Медленные сайты приводят к снижению количества посетителей, а также снижению позиций в поисковых системах. Также, многие владельцы сайтов не любят мета теги, указывающие на то, каким инструментом для продаж пользуется сайт.

Давайте выясним, как же в действительности влияет WooCommerce на скорость загрузки страниц на тестовом сайте.

До оптимизации скриптов WooCommerce

pre-woocommerce-optimization-stats[1]

Сайт тестировался с помощью инструмента webpagetest.org для того, чтобы замерить результаты. Из этого теста видно, что сайт «весит» 1.6 MB и выполняется 75 запросов. Этот сайт расположен на мощном хостинге!

После оптимизации скриптов WooCommerce
post-woocommerce-optimization-stats[1]

Мы снизили время загрузки с 7.2 секунд до 5.8 …. неплохо!

Вы видите, что после оптимизации количество запросов упало на 9, с 75 до 66. Также сократился «вес» страницы, и теперь сайт «весит» 1.5 mb. Самое удивительное, что время загрузки сократилось аж на 1.4 секунды!

Время загрузки, пусть и не самое лучшее для сайта, всё же превосходит то, что было до оптимизации и модификации скриптов. Самое интересное в этом всем, что WooCommerce продолжает нормально работать, посетители радуются быстро загружаемому сайту, а владельцы подсчитывают прибыль :)

Код для оптимизации ваших скриптов WooCommerce

Следующий код отменяет загрузку стилей и скриптов на страницах, не относящихся к WooCommerce. В виду того, что он зависит от темы, рекомендуется добавлять его в файл functions.php вашей темы.

Добавлем следующий код в файл functions.php темы

<?php
/**
* Оптимизация скриптов WooCommerce
* Убираем WooCommerce Generator tag, стили, и скрипты для страниц, не относящихся к WooCommerce.
*/
add_action( 'wp_enqueue_scripts', 'child_manage_woocommerce_styles', 99 );
 
function child_manage_woocommerce_styles() {
    //убираем generator meta tag
    remove_action( 'wp_head', array( $GLOBALS['woocommerce'], 'generator' ) );
 
    //для начала проверяем, активен ли WooCommerce, дабы избежать ошибок
    if ( function_exists( 'is_woocommerce' ) ) {
        //отменяем загрузку скриптов и стилей
        if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
            wp_dequeue_style( 'woocommerce_frontend_styles' );
            wp_dequeue_style( 'woocommerce_fancybox_styles' );
            wp_dequeue_style( 'woocommerce_chosen_styles' );
            wp_dequeue_style( 'woocommerce_prettyPhoto_css' );
            wp_dequeue_script( 'wc_price_slider' );
            wp_dequeue_script( 'wc-single-product' );
            wp_dequeue_script( 'wc-add-to-cart' );
            wp_dequeue_script( 'wc-cart-fragments' );
            wp_dequeue_script( 'wc-checkout' );
            wp_dequeue_script( 'wc-add-to-cart-variation' );
            wp_dequeue_script( 'wc-single-product' );
            wp_dequeue_script( 'wc-cart' );
            wp_dequeue_script( 'wc-chosen' );
            wp_dequeue_script( 'woocommerce' );
            wp_dequeue_script( 'prettyPhoto' );
            wp_dequeue_script( 'prettyPhoto-init' );
            wp_dequeue_script( 'jquery-blockui' );
            wp_dequeue_script( 'jquery-placeholder' );
            wp_dequeue_script( 'fancybox' );
            wp_dequeue_script( 'jqueryui' );
        }
    }
 
}

После того, как вы добавите код, обновите исходный код страниц, не относящихся к WooCommerce. Вы увидите, что все скрипты, стили и метатеги исчезли. Также страницы должны загружаться ощутимо быстрее. Если же вам нужны определенные скрипты типа jQuery UI или FancyBox, просто закомментируйте соответствующие строки в коде.

Обратите внимание, что мы используем условные операторы :

! is_woocommerce() &amp;&amp; ! is_cart() &amp;&amp; ! is_checkout()

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

!is_home

Надеемся, что статья окажется вам полезной и ускорит загрузку ваших страниц.

По всем вопросам и отзывам просьба писать в комментарии ниже.

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

VN:F [1.9.22_1171]
Rating: 5.0/5 (3 votes cast)

Об авторе ADv

Занимаюсь разработкой сайтов и магазинов на WordPress. Оказываю платные помощь и консультации. Skype: advokat_b
  • Александр

    Как правильно скопировать код?

    После внесения кода в файл- сайт перестал открываться: children-love.ru
    Пришлось снова убрать.
    Где может быть ошибка?
    Код нужно вносить в самом начале файла?

    (Я убрал, разумеется, нумерацию при копировании.)

    Спасибо

  • Guest

    скопировать надо без первой строки
    Но к сожалению у меня не убрались скрипты на других страницах. Или это визуально не заметить?

    • ADv

      Заметить можно в исходном коде. Какую версию WC используете?

      • Николай

        Последнию 2.2.8

  • Сергей

    А у меня, после добавления этого кода, грузится все кроме страницы магазина.

    • ADv

      Вероятно, у вас свежая версия вуу и код не срабатывает

  • Сергей

    Подскажите, как через functions.php изменить в корзине надпись на кнопке с «перейти к оплате» на «оформить заявку». WC 2.3.7.

    • ADv

      папка темыwoocommercecheckoutpayment.php ищите строку echo apply_filters( ‘woocommerce_order_button_html’, » );

  • Vova

    Можете подсказать? Как можно реализовать увеличение фото миниатюры записи так, как например, на wildberries.ru сделано? Подключал различные плагины. Самый подходящий Ultimate WooCommerce CloudZoom for Product Images но он барахлит что то: то фото дублирует, то окно скачет по экрану. Можете подсказать решение. Пишите на мыло о цене договоримся.

Scroll To Top