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

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

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

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

Удаление неиспользуемых файлов помогает:

• Ускорить загрузку страниц;
• Снизить нагрузку на сервер;
• Улучшить показатели Core Web Vitals;
• Повысить позиции в поисковых системах;
• Сэкономить трафик посетителей.

Способы автоматического удаления неиспользуемых CSS и JS

1. Использование плагина Asset CleanUp

Asset CleanUp — популярный плагин для управления загрузкой CSS и JS. Он позволяет отключать ненужные скрипты и стили на отдельных страницах или глобально.

Основные возможности:

• Сканирование страниц и выявление подключённых ресурсов;
• Отключение CSS и JS по URL, типу записи, роли пользователя;
• Минификация и объединение файлов;
• Поддержка WooCommerce и других популярных плагинов.

Для установки:

wp plugin install asset-cleanup --activate

После активации в админке откройте любую страницу сайта и внизу увидите метабокс Asset CleanUp, где можно отключать лишние ресурсы.

2. Плагин Clearfy Pro для оптимизации загрузки

Clearfy Pro — это комплексный плагин для оптимизации WordPress, который имеет модуль управления загрузкой CSS и JS. Он автоматически отключает скрипты плагинов, если они не нужны на странице.

Преимущества Clearfy Pro:

• Автоматическое определение неиспользуемых ресурсов;
• Интеграция с популярными плагинами и темами;
• Дополнительные функции безопасности и SEO-оптимизации.

Подробнее и купить Clearfy Pro можно на официальной странице.

3. Кастомное отключение скриптов и стилей с помощью кода

Если вы предпочитаете самостоятельное решение, можно программно отключать CSS и JS с помощью хуков wp_dequeue_style и wp_dequeue_script. Главное — определить, какие ресурсы не нужны на конкретной странице.

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

function wpaddons_dequeue_assets() {
    if (is_front_page()) {
        wp_dequeue_style('plugin-style-handle');
        wp_dequeue_script('plugin-script-handle');
    }
}
add_action('wp_enqueue_scripts', 'wpaddons_dequeue_assets', 100);

Для определения handle можно посмотреть в исходном коде страницы или в файлах плагина/темы.

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

Для выявления лишних ресурсов удобно использовать инструменты браузера и сервисы:

• Chrome DevTools — вкладка Network и Coverage показывает, какой процент кода используется;
• Plugin Organizer — помогает управлять активацией плагинов на страницах;
• Query Monitor — анализирует запросы и скрипты;
• GTmetrix и PageSpeed Insights — дают рекомендации по оптимизации.

Рекомендации по безопасному отключению CSS и JS

При отключении будьте осторожны, чтобы не сломать функционал сайта. Рекомендуется:

• Делать изменения на тестовом сайте;
• Отключать ресурсы поэтапно;
• Проверять работу сайта на разных устройствах;
• Использовать дочернюю тему для кастомных функций;
• Сохранять резервные копии.

Автоматизация через WP-Cron и кастомный плагин

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

Пример базового кода плагина для автоматического отключения CSS/JS:

<?php
/**
 * Plugin Name: WPAddons Asset Optimizer
 */

function wpaddons_asset_optimizer() {
    if (!is_admin()) {
        // Пример: отключаем скрипт на всех страницах, кроме страницы контактов
        if (!is_page('contact')) {
            wp_dequeue_script('contact-form-7');
            wp_dequeue_style('contact-form-7');
        }
    }
}
add_action('wp_enqueue_scripts', 'wpaddons_asset_optimizer', 100);

// Планирование задачи для более сложной логики можно добавить через wp_schedule_event
?>

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

Заключение

Удаление неиспользуемых CSS и JS — важный шаг к оптимизации WordPress-сайта. Используйте готовые плагины, такие как Asset CleanUp и Clearfy Pro, для удобства и безопасности. Для опытных разработчиков — создавайте кастомные решения с помощью хуков и WP-Cron. Регулярный аудит и оптимизация ресурсов существенно улучшат скорость и стабильность вашего сайта.