WooCommerce — самый популярный плагин WordPress для настройки интернет-магазина. Поскольку он создан тем же разработчиком WordPress, он без проблем работает для удовлетворения потребностей малого и крупного бизнеса. Однако проблема заключается в другом: WooCommerce значительно снизит скорость загрузки страниц вашего сайта. Лучший вариант — отключить стили и скрипты WooCommerce для постов WordPress, которые вам не нужны. Таким образом, вы можете использовать возможности WooCommerce, а также быстро загружать сообщения.
Сценарий улучшения
Плагин WooCommerce предназначен для физического бизнеса, который поддерживает доставку, налогообложение и т. д. Итак, если у вас есть полноценный магазин электронной коммерции, вы не можете сделать много улучшений, поскольку каждая страница продукта на вашем сайте нуждается в плагине. Возможно, вам придется использовать хостинговые компании, оптимизированные для WooCommerce, чтобы ускорить загрузку страниц вашего продукта. Вы можете прочитать нашу статью о том, как исправить медленную скорость загрузки страниц с помощью плагина WooCommerce.
Однако в этой статье мы обсудим другой сценарий, с которым сталкиваются блоггеры. Многие блоггеры используют коммерческие темы, оптимизированные для плагина WooCommerce. Поэтому они быстро начнут использовать плагин для продажи простых цифровых продуктов, таких как электронные книги, не зная предполагаемой цели плагина. Например, нет смысла использовать WooCommerce, когда у вас 10 страниц товаров и 1000 обычных постов. Что происходит в этом случае, так это то, что все 1000 сообщений будут загружать файлы CSS и JS плагина WooCommerce, что снижает общую скорость сайта.
Это связано с тем, что плагин WooCommerce не позволяет отключить ресурсы, загруженные на страницы, на которых вы собираетесь продавать какие-либо продукты. Причина также очевидна в том, что на многих сайтах есть кнопка корзины на верхней панели навигации, поэтому для динамического обновления сведений о заказе требуются ресурсы плагина. В нашей предыдущей статье мы объясняли AJAX-вызовы корзины и их влияние на скорость. Если вы действительно хотели использовать WooCommerce, но хотели избавиться от CSS и JS плагина на обычных постах/страницах, тогда воспользуйтесь одним из следующих вариантов.
Кроме того, Google PageSpeed Insights предупредит вас об удалении неиспользуемых CSS и JS на странице, что резко снизит показатель скорости.
Стили и скрипты WooCommerce
Давайте сначала проверим ресурсы, загруженные плагином. Вы можете просто отключить любой плагин кэширования на своем сайте и проверить исходный код активной страницы. Вы можете выбрать пост или страницу, где нет корзины, блоков WooCommerce или товаров. В Chrome это должно выглядеть примерно так, как показано ниже.
Плагин загружает файлы CSS/JS из /wp-content/plugins/WooCommerce/assets/ и стили блоков из /wp-content/plugins/WooCommerce/packages/WooCommerce-blocks/build. Поскольку на странице нет товара или корзины, предназначенной для продажи товара, все приведенные ниже ресурсы просто бесполезны.
| Ресурсы WooCommerce | Тип |
| /wp-content/plugins/woocommerce/assets/css/woocommerce-layout.css?ver=5.7.1 | CSS |
| /wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css?ver=5.7.1 | CSS |
| /wp-content/plugins/woocommerce/assets/css/twenty-twenty-one.css?ver=5.7.1 | CSS |
| /wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js?ver=5.7.1 | JS |
| /wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js?ver=5.7.1 | JS |
| /wp-content/plugins/woocommerce/assets/js/js-cookie/js.cookie.min.js?ver=2.1.4-wc.5.7.1 | JS |
| /wp-content/plugins/woocommerce/packages/woocommerce-blocks/build/wc-blocks-style.css?ver=5.7.2 | JS |
| /wp-content/plugins/woocommerce/packages/woocommerce-blocks/build/wc-blocks-vendors-style.css?ver=5.7.2 | JS |
Примечание: Вышеуказанные файлы есть на версии 5.7.2 на теме двадцать двадцать один. Вы можете увидеть версию плагина, установленную на вашем сайте, и различные файлы CSS в зависимости от настроек WooCommerce вашей темы. Кроме того, вы также можете увидеть такие шрифты, как woocommerce.woff, загруженные плагином.
Отключить стили и скрипты WooCommerce
Мы объясним следующие варианты отключения стилей и скриптов WooCommerce в сообщениях WordPress, которые не имеют материалов, связанных с продуктом.
Хорошая новость заключается в том, что в WordPress есть плагины для отключения неиспользуемых CSS и JS на вашем сайте.
Вариант №1 — Использование плагина Perfmatters Premium
Perfmatters — это плагин премиум-класса, который может помочь вам оптимизировать плагин WooCommerce. Причина, по которой мы упоминаем Perfmatters в качестве первого варианта, заключается в том, что вы можете отключить стили и скрипты WooCommerce для всех сообщений/страниц всего сайта несколькими щелчками мыши. Это настоятельно рекомендуется для новичков, которые не хотят редактировать код или тратить слишком много времени на бесплатные плагины. Кроме того, вы также можете использовать параметр «Диспетчер сценариев» в Perfmatters, чтобы отключить неиспользуемые файлы CSS и JS для каждого поста/страницы.
Плагин будет стоить вам 24,95 доллара США с бесплатными обновлениями и поддержкой в течение одного года. После установки плагина активируйте лицензию для получения обновлений.
Теперь проверьте любой исходный код вашего сообщения. Как вы можете видеть на снимке экрана ниже, все стили и скрипты отключены и загружается только шрифт WooCommerce.
Плагин также предлагает диспетчер сценариев, который полезен, когда вы хотите удалить стили/скрипты для каждого поста. Во-первых, вы должны включить «Диспетчер сценариев» в разделе «Параметры > Активы».
При редактировании поста нажмите «Менеджер скриптов» в верхней панели администратора и отключите ненужные стили и скрипты.
Отключите все стили/скрипты WooCommerce и выберите «Местоположения» как «Везде». Вы можете предоставить исключения в виде продуктов, категорий продуктов и тегов продуктов, чтобы эти стили/скрипты при необходимости загружались на страницы продуктов. В противном случае вы можете полностью отключить ресурсы WooCommerce на всем сайте. Сохраните настройки и закройте диспетчер сценариев, щелкнув соответствующий параметр на панели администратора.
Теперь вы можете проверить источник, чтобы убедиться, что все стили и сценарии WooCommerce, включая стили блоков, удалены, кроме шрифта. При необходимости вы можете предварительно загрузить файл шрифта в разделе «Параметры > Предварительная загрузка», чтобы избежать проблем с предварительной загрузкой ключевых запросов в Google PageSpeed Insights. Помните, хотя у вас нет диспетчера сценариев для отключения WooCommerce, он необходим, когда вы хотите отключить ресурсы из других плагинов, таких как Contact Form 7.
Вариант №2. Использование бесплатного плагина Asset CleanUp
Если вы не хотите использовать плагин премиум-класса, вы можете попробовать плагин Asset CleanUp: Page Speed Booster. Это частично бесплатный плагин, который предлагает аналогичную функцию, такую как Perfmatters Script Manager.
В любое время вы можете удалить настройки, перейдя в раздел «Очистка ресурсов» > «Массовые изменения» на вкладке «Сообщения, страницы и пользовательские типы сообщений».
Вариант №3. Ручной метод
Последний вариант — вручную отредактировать файл темы, чтобы отключить стили и скрипты WooCommerce. Поскольку редактировать файлы темы не рекомендуется, вы можете использовать дочернюю тему.
/** Отключить стили и скрипты WooCommerce*/ add_action(‘wp_enqueue_scripts’, ‘dequeue_woocommerce_styles_scripts’, 99 ); function dequeue_woocommerce_styles_scripts() { if ( function_exists( ‘is_woocommerce’ ) ) { if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) { # Стили wp_dequeue_style( ‘woocommerce-general’ ); wp_dequeue_style («woocommerce-layout»); wp_dequeue_style («woocommerce-smallscreen»); 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-добавить в корзину’); wp_dequeue_script(‘wc-cart-fragments’); wp_dequeue_script(‘wc-checkout’); wp_dequeue_script(‘wc-добавить-в-корзину-вариант’); wp_dequeue_script(‘wc-single-product’); wp_dequeue_script(‘туалет-корзина’); wp_dequeue_script(‘wc-выбранный’); wp_dequeue_script(‘woocommerce’); wp_dequeue_script («красивая фотография»); wp_dequeue_script(‘prettyPhoto-init’); wp_dequeue_script(‘jquery-blockui’); wp_dequeue_script(‘jquery-placeholder’); wp_dequeue_script(‘fancybox’); wp_dequeue_script(‘jqueryui’); } } } /** Отключить стили блоков WooCommerce */ function disable_woocommerce_block_styles() { wp_dequeue_style(‘wc-blocks-style’); } add_action(‘wp_enqueue_scripts’, ‘disable_woocommerce_block_styles’);
Проверьте исходный код вашего сообщения, чтобы убедиться, что все стили и скрипты WooCommerce отключены. Вы увидите только, что файл шрифта загружается плагином.
Заключительные слова
Как видите, есть несколько способов отключить стили и скрипты WooCommerce. Хотя использовать премиальный плагин Perfmatters легко, он отдельно загружает файл шрифта woocommerce.woff. Бесплатный плагин и ручные опции помогут вам полностью избавиться от наворотов WooCommerce на страницах, где они вам не нужны. Для всех параметров вам может потребоваться тщательно проверить настройки / код и периодически просматривать их, поскольку WooCommerce постоянно меняет настройки.