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

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

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

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

• Увеличению размера страницы и времени загрузки;
• Ненужной нагрузке на сервер и пользователя;
• Потере баллов в PageSpeed Insights и других инструментах оптимизации;
• Потере конверсий из-за медленной работы сайта.

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

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

Использование плагинов

Для большинства пользователей самый простой способ — использовать плагины, которые позволяют отключать загрузку CSS и JS на выбранных страницах. Например, популярные решения:

• Asset CleanUp — позволяет отключать стили и скрипты по URL, по типу страницы, по роли пользователя;
• Perfmatters — платный плагин с удобным управлением загрузкой ассетов;
• Clearfy Pro — универсальный плагин для оптимизации WordPress, включает возможность отключения лишних скриптов и стилей, а также множество других функций для ускорения сайта. Подробнее на wpshop.ru.

Плагины значительно экономят время и подходят для большинства случаев.

Ручное отключение через functions.php

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

Пример функции wpexpert_remove_unused_assets(), которая отключает скрипты и стили плагина Contact Form 7 на всех страницах, кроме страницы контактов:

function wpexpert_remove_unused_assets() {
    if ( ! is_page('contact') ) {
        wp_dequeue_style('contact-form-7');
        wp_dequeue_script('contact-form-7');
    }
}
add_action('wp_enqueue_scripts', 'wpexpert_remove_unused_assets', 100);

В этом примере мы проверяем, что текущая страница не "contact", и если это так, отключаем стили и скрипты Contact Form 7. Аналогично можно отключать другие стили и скрипты, зная их идентификаторы.

Как определить ID стилей и скриптов для отключения

Чтобы узнать, какому плагину или теме принадлежит конкретный CSS или JS, и каков его ID для функции wp_dequeue_style или wp_dequeue_script, можно:

• Посмотреть исходный код страницы и найти ссылки на CSS/JS файлы — в коде обычно указывается ID в параметре id= у тега <link> или <script>.
• Использовать инструменты разработчика браузера (F12) и вкладку "Network" или "Elements".
• Открыть исходники плагина или темы, где обычно в функции wp_enqueue_style или wp_enqueue_script указывается ID.

Пример из Contact Form 7:

wp_enqueue_style('contact-form-7');
wp_enqueue_script('contact-form-7');

Советы по безопасности и совместимости при отключении скриптов

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

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

Пример комплексного решения для удаления неиспользуемых CSS и JS

Ниже приведён пример функции, которая отключает несколько стилей и скриптов на страницах блога, где они не нужны:

function wpexpert_optimize_assets() {
    // Отключить стили слайдера на страницах блога
    if ( is_home() || is_archive() ) {
        wp_dequeue_style('slick-carousel');
        wp_dequeue_script('slick-carousel');
    }

    // Отключить стили и скрипты плагина WooCommerce на страницах без товаров
    if ( ! is_woocommerce() && ! is_cart() && ! is_checkout() ) {
        wp_dequeue_style('woocommerce-general');
        wp_dequeue_script('woocommerce');
    }
}
add_action('wp_enqueue_scripts', 'wpexpert_optimize_assets', 100);

В этом примере мы отключаем тяжелые ассеты там, где они не нужны, что значительно ускоряет загрузку страниц.

Заключение

Удаление неиспользуемых CSS и JS — важный шаг для оптимизации WordPress-сайта. Это можно сделать как с помощью плагинов, так и вручную через functions.php. Главное — тщательно тестировать и не отключать критичные для работы сайта файлы. Для комплексного оптимизационного решения и удобного управления скриптами рекомендуем обратить внимание на плагин Clearfy Pro от WPShop.