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

Проблема: избыточная загрузка CSS и JS файлов в WordPress

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

Диагностика неиспользуемых скриптов и стилей

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

• Инструменты разработчика браузера: во вкладке Network можно увидеть все загружаемые ресурсы. Вкладка Coverage (в Chrome) покажет процент использования CSS и JS.
• Плагины для анализа: Asset CleanUp или Perfmatters позволяют выявлять и отключать неиспользуемые файлы.
• Ручной аудит кода: просмотр functions.php и плагинов на предмет регистрации и подключения стилей и скриптов.

Пример: использование Coverage в Chrome

1. Откройте сайт в Chrome.

2. Нажмите F12 для открытия консоли разработчика.

3. В панели выберите вкладку "Coverage" (если нет – нажмите Ctrl+Shift+P и введите "Show Coverage").

4. Нажмите стрелку обновления, чтобы просканировать загрузку.

5. Анализируйте файлы с низким использованием (например, под 10%).

Пошаговое решение: отключение неиспользуемых скриптов и стилей

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

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

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

Замените plugin-style-handle и plugin-script-handle на реальные handles, которые можно узнать через инструменты разработчика или просмотром кода плагина.

Как найти handle подключаемого скрипта или стиля

wp_enqueue_script и wp_enqueue_style, первый параметр – handle.
• Используйте плагин Query Monitor для просмотра всех подключаемых ресурсов и их handle.

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

После добавления фильтра:

• Очистите кеш браузера и кеш сайта (если есть).
• Снова сделайте аудит через Chrome DevTools Coverage – соответствующие файлы должны не загружаться на страницах, где вы отключили их.
• Проверьте функционал страниц, чтобы не нарушить работу сайта.
• Измерьте скорость загрузки страниц с помощью PageSpeed Insights до и после оптимизации.

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

• Отключение скриптов, нужных для работы страницы: приводит к ошибкам в функционале. Решение – отключать только те скрипты, которые точно не используются на конкретных страницах.
• Неправильное указание handle: скрипты и стили не отключаются. Проверяйте handle в исходниках или через Query Monitor.
• Использование приоритета хука ниже 100: ваши вызовы wp_dequeue могут сработать до подключения скриптов, поэтому ставьте приоритет 100 или выше.
• Кеширование: старые версии скриптов могут загружаться из кеша – всегда очищайте кеш и используйте режим инкогнито для теста.

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

• Минимизируйте подключения: отключайте не только крупные библиотеки, но и мелкие скрипты, если они не нужны.
• Объединяйте и минифицируйте CSS и JS: после удаления лишних подключений, используйте плагины типа Autoptimize или WP Rocket для объединения и минификации.
• Загружайте скрипты асинхронно или с отложенной загрузкой: для снижения времени рендеринга страницы.
• Используйте Child Theme: чтобы вносить изменения в enqueue/dequeue без риска потерять их при обновлении темы.

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

Метод	Преимущества	Недостатки
Плагины управления ассетами (Asset CleanUp, Perfmatters)	Простой интерфейс, быстрое отключение без кода	Могут влиять на производительность, платные версии с расширенным функционалом
Ручное отключение через wp_dequeue_*	Точный контроль, легкая адаптация под задачи, без зависимостей	Требует знаний PHP, риски ошибок при неправильной логике
Полное отключение плагинов или функций	Удаляет нагрузку полностью	Может привести к потере функционала