Как удалить ненужные стили и скрипты в WordPress для ускорения сайта

Почему важно удалять ненужные стили и скрипты в WordPress

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

Удаление лишних стилей и скриптов помогает уменьшить количество HTTP-запросов и общий размер загружаемых ресурсов. В итоге снижается нагрузка на сервер и ускоряется отображение контента.

Кроме того, это положительно отражается на SEO-показателях — поисковые системы учитывают скорость загрузки страниц при ранжировании.

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

Для начала необходимо понять, какие именно CSS и JS загружаются на сайте и какие из них реально используются. Для этого можно воспользоваться следующими инструментами:

• Браузерные инструменты разработчика (Chrome DevTools, Firefox Developer Tools) — вкладка Network покажет все загружаемые ресурсы.
• Плагины для оптимизации — например, Asset CleanUp или Perfmatters, которые умеют показывать список загружаемых файлов на каждой странице.
• Расширения для браузера — например, PageSpeed Insights, которые анализируют ресурсы и показывают блокирующие CSS и JS.

После идентификации можно переходить к удалению.

Удаление ненужных стилей и скриптов средствами WordPress

WordPress предоставляет функции для управления подключением стилей и скриптов — wp_enqueue_style и wp_enqueue_script. Чтобы убрать ненужные файлы, нужно использовать wp_dequeue_style и wp_dequeue_script.

Например, если плагин подключает скрипт с хендлом contact-form-7, но форма используется только на странице контактов, можно отключить этот скрипт на всех остальных страницах.

Пример кода для удаления скриптов и стилей на всех страницах, кроме одной

function wpdream_remove_unused_assets() {
    if (!is_page('contact')) { // Замените 'contact' на slug вашей страницы
        wp_dequeue_script('contact-form-7');
        wp_dequeue_style('contact-form-7');
    }
}
add_action('wp_enqueue_scripts', 'wpdream_remove_unused_assets', 100);

Ключевой момент — использовать приоритет 100 и выше, чтобы наш код сработал после того, как плагины и тема зарегистрируют свои стили и скрипты.

Как найти правильный хендл

Чтобы узнать, под каким именем подключается скрипт или стиль, можно временно добавить следующий код в файл functions.php:

function wpdream_list_all_scripts_styles() {
    global $wp_styles, $wp_scripts;
    echo '<pre>';
    echo "Стили:\n";
    foreach ($wp_styles->queue as $handle) {
        echo $handle . "\n";
    }
    echo "\nСкрипты:\n";
    foreach ($wp_scripts->queue as $handle) {
        echo $handle . "\n";
    }
    echo '</pre>';
}
add_action('wp_print_scripts', 'wpdream_list_all_scripts_styles');

После определения хендла можно безопасно отключить нужные ресурсы.

Автоматизация с помощью плагинов

Если вы не хотите писать код вручную, используйте специализированные плагины:

• Asset CleanUp: Позволяет просматривать и отключать CSS и JS на отдельных страницах через удобный интерфейс.
• Perfmatters: Легкий плагин для оптимизации загрузки, который позволяет отключать ненужные скрипты и стили, а также отключать функции WordPress, например эмодзи.
• Flying Scripts и Autoptimize: Позволяют оптимизировать и отложить загрузку скриптов.

Использование плагинов удобно, но всегда стоит проверять, что отключение не ломает функционал сайта.

Особенности удаления стилей и скриптов из WooCommerce и других крупных плагинов

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

function wpdream_remove_woocommerce_assets() {
    if (!is_woocommerce() && !is_cart() && !is_checkout()) {
        wp_dequeue_style('woocommerce_frontend_styles');
        wp_dequeue_style('woocommerce-general');
        wp_dequeue_style('woocommerce-layout');
        wp_dequeue_script('wc-cart-fragments');
    }
}
add_action('wp_enqueue_scripts', 'wpdream_remove_woocommerce_assets', 99);

Это позволяет значительно снизить нагрузку на страницы без магазина.

Советы по безопасности и тестированию

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

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

Лучше отключать ресурсы поэтапно, чтобы быстро определить, что может сломаться.

Выводы и рекомендации

Удаление ненужных стилей и скриптов — важный шаг в оптимизации WordPress сайта. Это помогает ускорить загрузку, улучшить пользовательский опыт и повысить SEO.

Для этого используйте как ручное удаление через wp_dequeue_style и wp_dequeue_script, так и плагины для удобства. Не забывайте тестировать сайт после внесения изменений.

Для сложных проектов стоит рассмотреть комплексные решения по оптимизации, включающие минификацию, отложенную загрузку и использование CDN.