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

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

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

Откройте ваш сайт на 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
• … еще?!

Стили

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

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

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

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

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

После оптимизации скриптов WooCommerce

Мы снизили время загрузки с 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() && ! is_cart() && ! is_checkout()

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

!is_home

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

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

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