Как удалить CSS и JS по условию в WordPress для ускорения сайта

Оптимизация загрузки CSS и JS файлов — одна из важных задач для ускорения работы WordPress-сайта. Часто темы и плагины подключают стили и скрипты на всех страницах, даже там, где они не нужны. Это увеличивает время загрузки и потребление ресурсов. В этой статье мы подробно разберём, как удалить CSS и JS по условию, чтобы загружать только действительно необходимые файлы.

Почему важно удалять CSS и JS по условию

Когда WordPress загружает лишние стили и скрипты, это приводит к нескольким проблемам:

• Увеличение времени загрузки страниц из-за ненужных HTTP-запросов.
• Излишняя нагрузка на сервер и клиентские устройства.
• Потенциальные конфликты между скриптами и стилями.
• Плохой пользовательский опыт и снижение позиций в поисковиках из-за скорости сайта.

Удаление неиспользуемых CSS и JS — один из простых и эффективных способов оптимизации.

Как определить, какие стили и скрипты можно отключить

Сначала нужно понять, какие CSS и JS загружаются на страницах сайта. Для этого используйте инструменты разработчика в браузере (F12) или специальные плагины, например, Query Monitor. Он показывает список подключаемых файлов и их источники.

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

Удаление CSS и JS по условию через functions.php

Самый распространённый способ — добавить код в файл functions.php вашей темы или в плагин-сниппет. Рассмотрим пример удаления скриптов и стилей, если мы находимся не на главной странице:

function clearfy_remove_scripts_styles_conditionally() {
    if ( !is_front_page() ) {
        // Отключаем скрипт с handle 'slider-script'
        wp_dequeue_script('slider-script');
        wp_deregister_script('slider-script');

        // Отключаем стиль с handle 'slider-style'
        wp_dequeue_style('slider-style');
        wp_deregister_style('slider-style');
    }
}
add_action('wp_enqueue_scripts', 'clearfy_remove_scripts_styles_conditionally', 100);

В этом коде wp_dequeue_script и wp_dequeue_style отключают загрузку файлов, а wp_deregister_script и wp_deregister_style удаляют регистрацию, чтобы полностью исключить их из очереди.

Как узнать handle скрипта или стиля

Handle — это уникальное имя, под которым скрипт или стиль зарегистрирован. Его можно увидеть в исходном коде темы или плагина, либо определить через плагин Query Monitor.

Удаление CSS и JS для WooCommerce и других плагинов

Многие плагины, например WooCommerce, подключают множество стилей и скриптов на все страницы. Чтобы отключить их на страницах, где они не нужны, используйте такой код:

function clearfy_disable_woocommerce_scripts_styles() {
    if ( function_exists('is_woocommerce') && !is_woocommerce() && !is_cart() && !is_checkout() ) {
        // Отключаем стили WooCommerce
        wp_dequeue_style('woocommerce-general');
        wp_dequeue_style('woocommerce-layout');
        wp_dequeue_style('woocommerce-smallscreen');

        // Отключаем скрипты WooCommerce
        wp_dequeue_script('wc-cart-fragments');
        wp_dequeue_script('woocommerce');
        wp_dequeue_script('wc-checkout');
        wp_dequeue_script('wc-add-to-cart');
    }
}
add_action('wp_enqueue_scripts', 'clearfy_disable_woocommerce_scripts_styles', 99);

Этот код отключит загрузку WooCommerce на всех страницах, кроме самой WooCommerce, корзины и оформления заказа.

Использование плагина Clearfy для оптимизации загрузки CSS и JS

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

Clearfy автоматически анализирует подключаемые ресурсы и позволяет выключать их в несколько кликов. Это отличный вариант для комплексной оптимизации.

Практические советы и рекомендации

При отключении CSS и JS по условию важно соблюдать осторожность:

• Тестируйте сайт после каждого изменения, чтобы избежать поломок дизайна и функционала.
• Используйте дочернюю тему или кастомный плагин для добавления кода, чтобы не потерять изменения при обновлениях.
• Не отключайте скрипты, если вы не уверены в их назначении.
• Для сложных условий используйте дополнительные функции WordPress (например, is_page(), is_singular(), is_post_type_archive()).

Пример отключения скриптов для конкретной страницы

function clearfy_remove_scripts_on_contact_page() {
    if ( is_page('contact') ) {
        wp_dequeue_script('some-unneeded-script');
        wp_dequeue_style('some-unneeded-style');
    }
}
add_action('wp_enqueue_scripts', 'clearfy_remove_scripts_on_contact_page', 100);

Здесь мы отключаем определённые файлы только на странице с ярлыком 'contact'.

Заключение

Удаление CSS и JS по условию — эффективный инструмент для оптимизации WordPress-сайта. Правильно настроив загрузку ресурсов, вы снизите время отклика, улучшите позиции в поиске и повысите удобство посетителей. Используйте кодовые решения или плагины вроде Clearfy, чтобы упростить процесс и добиться максимального результата.