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

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

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

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

• Увеличивается время загрузки страниц.
• Увеличивается объём передаваемых данных.
• Появляются конфликты и сложности в отладке.

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

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

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

• Chrome DevTools Coverage: откройте DevTools (F12) -> вкладка Coverage и запустите запись, чтобы увидеть процент использования CSS и JS в загруженной странице.
• Плагины для аудита производительности: например, Query Monitor, P3 Profiler (устаревший, но иногда полезен).
• Онлайн-сервисы: такие как GTmetrix или Google PageSpeed Insights показывают рекомендации по оптимизации.

Автоматическое удаление неиспользуемых CSS и JS с помощью плагинов

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

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

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

Ручное отключение неиспользуемых CSS и JS через functions.php

Если вы предпочитаете контролировать всё кодом, можно отключать стили и скрипты по условию через хуки WordPress.

Пример функции с префиксом wpcoder_ для отключения скриптов и стилей на главной странице:

function wpcoder_dequeue_unused_assets() {
    if (is_front_page()) {
        // Отключаем скрипт и стиль плагина, которые не нужны на главной
        wp_dequeue_script('plugin-script-handle');
        wp_dequeue_style('plugin-style-handle');
    }
}
add_action('wp_enqueue_scripts', 'wpcoder_dequeue_unused_assets', 100);

Чтобы узнать хендлы загружаемых файлов, можно использовать плагин Query Monitor или посмотреть в коде темы и плагинов.

Отключение стилей темы на отдельных страницах

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

function wpcoder_conditionally_dequeue_styles() {
    if (!is_page('contacts')) { // отключим на всех страницах кроме контактов
        wp_dequeue_style('theme-main-style');
    }
}
add_action('wp_enqueue_scripts', 'wpcoder_conditionally_dequeue_styles', 20);

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

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

Оптимизация и объединение CSS и JS после удаления лишних файлов

После того, как вы удалили неиспользуемые файлы, можно дополнительно ускорить сайт, объединив и минифицировав CSS и JS.

• Плагины для оптимизации: Autoptimize, WP Rocket, Clearfy Pro.
• Автоматическая генерация критического CSS — для более быстрого рендеринга первых элементов страницы.
• Использование defer и async для скриптов, чтобы не блокировать загрузку страницы.

Пример добавления атрибута defer к скриптам с префиксом wpcoder_:

function wpcoder_add_defer_attribute($tag, $handle) {
    if (strpos($handle, 'wpcoder_') === 0) {
        return str_replace(' src', ' defer src', $tag);
    }
    return $tag;
}
add_filter('script_loader_tag', 'wpcoder_add_defer_attribute', 10, 2);

Примеры плагинов из WPSHOP для оптимизации загрузки ресурсов

Если вы используете Clearfy Pro, он включает функции отключения лишних скриптов и стилей, а также расширенную оптимизацию CSS/JS. Подробнее о возможностях: Clearfy Pro на WPSHOP.

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

Советы для поддержания чистоты CSS и JS в будущем

Чтобы не накапливался «мусор» с неиспользуемыми стилями и скриптами, придерживайтесь правил:

• Используйте плагины и темы, которые загружают ресурсы только там, где нужно.
• Регулярно проверяйте сайт с помощью Coverage и PageSpeed Insights.
• Удаляйте или отключайте плагины, которые не используете.
• Используйте кастомные функции с префиксом wpcoder_ для удобства поддержки кода.