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

Диагностика проблемы: зачем удалять неиспользуемые CSS и JS

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

• Chrome DevTools > Network — отображает загруженные файлы;
• Coverage (Chrome DevTools) — показывает процент использования CSS и JS на странице;
• Плагин Query Monitor — выявляет подключаемые скрипты и стили;
• Плагины для оптимизации, например, Asset CleanUp или Perfmatters — помогают отключать файлы.

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

Пошаговое решение: отключаем лишние CSS и JS в теме WordPress

1. Определите хендлы стилей и скриптов

В functions.php или в родительской теме найдите wp_enqueue_style и wp_enqueue_script. Например:

wp_enqueue_style('slick-css', get_template_directory_uri() . '/assets/slick.css', array(), '1.8.1');
wp_enqueue_script('slick-js', get_template_directory_uri() . '/assets/slick.min.js', array('jquery'), '1.8.1', true);

Здесь хендлы — slick-css и slick-js.

2. Условное отключение через wp_dequeue_style и wp_dequeue_script

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

function remove_unused_assets() {
    if ( !is_page('gallery') ) { // отключаем на всех страницах, кроме 'gallery'
        wp_dequeue_style('slick-css');
        wp_dequeue_script('slick-js');
    }
}
add_action('wp_enqueue_scripts', 'remove_unused_assets', 20);

Используйте условные теги WordPress (is_page(), is_single(), is_front_page() и т.д.) для точного контроля.

3. Проверка правильного подключения файлов

Убедитесь, что ваш код срабатывает после начальной регистрации скриптов и стилей, поэтому приоритет 20 в add_action важен.

Проверка результата после внедрения

После внесения изменений:

• Очистите кэш браузера и кеш плагинов кэширования;
• Откройте страницу, где должны быть отключены файлы, и проверьте в Chrome DevTools > Network, что CSS и JS не загружены;
• Вкладка Coverage покажет уменьшение неиспользуемого кода;
• Проверьте функциональность сайта, чтобы убедиться, что отключение не сломало интерфейс.

Частые ошибки и как их исправить

• Неправильный хендл: если указать неправильное имя, скрипт не отключится. Проверьте точное имя в wp_enqueue_* вызовах.
• Неверный приоритет хука: если ваш wp_dequeue_* срабатывает слишком рано, скрипты еще не подключены. Используйте приоритет от 20 и выше.
• Отключение нужных скриптов: если условие слишком общее, может сломаться функционал. Тестируйте сайт после изменений.
• Кэширование: старые версии файлов в кэше браузера или плагина могут мешать проверке. Обязательно очистите кэш.

Практические советы по безопасности и производительности

• Не отключайте скрипты, отвечающие за безопасность, например, nonce или AJAX-обработчики.
• Отключайте сторонние библиотеки только если уверены, что они не используются на странице.
• Используйте wp_register_script и wp_register_style для предварительной регистрации и подключения по условию.
• Для сложных условий используйте фильтры и переменные, чтобы централизованно управлять подключением.

Сравнение способов удаления неиспользуемого CSS/JS