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

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

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

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

• Chrome DevTools: вкладка Network — отфильтруйте по CSS и JS, смотрите размеры и время загрузки;
• Google PageSpeed Insights: показывает рекомендации по удалению неиспользуемого кода;
• Plugin Query Monitor: отслеживает, какие скрипты и стили подключаются на странице;
• Asset CleanUp (плагин) — визуальное отключение лишних файлов.

Пошаговое решение удаления лишних стилей и скриптов

1. Определение лишних файлов

Включите WP_DEBUG и откройте консоль браузера. Проверьте, какие стили и скрипты подключаются на странице. Сравните с тем, что реально используется.

2. Отключение через functions.php

Для удаления скриптов и стилей используйте функцию wp_dequeue_script и wp_dequeue_style. Добавьте следующий код в functions.php дочерней темы или в плагин:

function remove_unused_assets() {
    if (is_page('contact')) { // например, отключаем на странице контактов
        wp_dequeue_style('slick-css');
        wp_dequeue_script('slick-js');
    }
    if (!is_singular('product')) { // отключаем WooCommerce скрипты на не товарных страницах
        wp_dequeue_script('woocommerce');
        wp_dequeue_style('woocommerce-layout');
    }
}
add_action('wp_enqueue_scripts', 'remove_unused_assets', 100);

Обратите внимание на приоритет 100, чтобы отключения сработали после регистрации файлов.

3. Условное подключение ресурсов

Перенесите регистрацию и подключение CSS/JS в условные конструкции, чтобы они загружались только там, где нужны:

function theme_enqueue_scripts() {
    if (is_singular('product')) {
        wp_enqueue_style('woocommerce-layout');
        wp_enqueue_script('woocommerce');
    }
}
add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');

4. Использование плагинов для анализа и оптимизации

Если ручное отключение слишком трудоёмко, используйте плагин Clearfy Pro. Он позволяет автоматически удалять неиспользуемые скрипты и стили и оптимизировать загрузку.

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

• Откройте сайт в Chrome DevTools, вкладка Network, проверьте уменьшение количества загружаемых CSS и JS.
• Запустите Google PageSpeed Insights — должно улучшиться время загрузки и уменьшиться объем загружаемых данных.
• Протестируйте функционал страниц, чтобы убедиться, что отключение не сломало важные скрипты.

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

• Отключение нужных скриптов: если отключить скрипты, которые нужны плагинам или теме, функционал сломается. Проверяйте зависимости и тестируйте все страницы.
• Неправильный приоритет хука: если приоритет слишком низкий, отключение не сработает. Используйте приоритет 100 или выше.
• Подключение скриптов вне wp_enqueue_scripts: некоторые темы подключают скрипты напрямую в шаблонах. Тогда отключить их через хуки не получится — придется править тему.

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

• Избегайте прямого подключения скриптов через <script> или <link> в шаблонах — используйте wp_enqueue.
• Используйте минификацию CSS и JS, но не объединяйте слишком много файлов — это усложнит кеширование.
• Кэшируйте статические ресурсы через сервер или плагины кеширования.
• Регулярно проверяйте подключаемые ресурсы после обновлений темы и плагинов.

Сравнение способов отключения лишних скриптов и стилей