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

Неиспользуемые CSS и JS-файлы существенно замедляют загрузку сайта на WordPress, увеличивая время отклика браузера и ухудшая пользовательский опыт. WP Rocket — мощный плагин для кеширования и оптимизации, который помогает решить эту проблему, но для полного контроля требуется дополнительная настройка и иногда использование сторонних методов. В этой статье подробно разберём, как выявить и удалить неиспользуемые CSS и JS с помощью WP Rocket и дополнительных инструментов.

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

Каждый лишний CSS или JS-файл увеличивает количество HTTP-запросов и общий размер страницы. Особенно это критично для мобильных устройств и медленных соединений. Удаление неиспользуемых стилей и скриптов:

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

Однако удаление этих файлов вручную — задача сложная, так как важно не нарушить работу сайта. WP Rocket предлагает встроенные инструменты, которые позволяют безопасно отложить или удалить неиспользуемые ресурсы.

Как WP Rocket помогает удалять неиспользуемые CSS и JS

WP Rocket включает функции оптимизации файлов с возможностью объединения и минификации, а также опцию Удаление неиспользуемого CSS (Remove Unused CSS). Она автоматически анализирует страницы и генерирует критические CSS, удаляя те стили, которые не нужны для начальной загрузки.

Для JavaScript WP Rocket предлагает отложенную загрузку скриптов (defer JS) и возможность исключать определённые скрипты из загрузки, что помогает избежать блокировки рендеринга.

Включение опции удаления неиспользуемого CSS в WP Rocket

Чтобы активировать эту функцию, перейдите в панель управления WordPress:

1. Настройки > WP Rocket > Оптимизация файлов;
2. Поставьте галочку напротив «Удалить неиспользуемый CSS»;
3. Сохраните изменения и очистите кэш.

WP Rocket начнёт анализ страниц и создаст необходимые критические CSS, которые будут загружаться в первую очередь, а остальной CSS — асинхронно.

Отложенная загрузка JavaScript и исключение скриптов

В том же разделе «Оптимизация файлов» можно включить опцию «Отложить JavaScript». Это позволяет задержать загрузку скриптов до тех пор, пока пользователь не начнёт взаимодействовать со страницей.

Если вы знаете, что некоторые скрипты не нужны на определённых страницах, вы можете исключить их из загрузки в настройках WP Rocket, добавив их имена или пути в поле исключений.

Дополнительные методы для удаления неиспользуемых CSS и JS

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

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

После установки и активации:

1. Перейдите к редактированию нужной страницы или записи;
2. В блоке Asset CleanUp увидите список всех стилей и скриптов;
3. Отключите те, которые не нужны для этой страницы;
4. Сохраните изменения.

Это значительно сокращает нагрузку и совместимо с WP Rocket.

Пример кода для удаления скриптов и стилей через functions.php

Если вы хотите программно отключить определённые CSS или JS, например, для определённых шаблонов, добавьте следующий код в functions.php вашей темы:

function wprocket_remove_unused_assets() {
    if (is_page('kontakt')) { // Замените 'kontakt' на нужный слаг страницы
        wp_dequeue_style('plugin-style-handle');
        wp_dequeue_script('plugin-script-handle');
    }
}
add_action('wp_enqueue_scripts', 'wprocket_remove_unused_assets', 100);

Где plugin-style-handle и plugin-script-handle — это идентификаторы стилей и скриптов, которые можно найти в исходном коде или документации плагина.

Особенности работы с критическим CSS и подводные камни

Удаление неиспользуемого CSS — сложный процесс, и иногда автоматические решения могут привести к визуальным багам, если критические стили будут удалены. Рекомендуется:

• Проверять сайт после включения опций на разных устройствах;
• Использовать режим инкогнито для тестирования загрузки;
• Исключать из удаления CSS плагинов и тем, отвечающих за дизайн;
• При необходимости использовать ручное добавление критического CSS.

WP Rocket позволяет добавлять дополнительные CSS в поле «Критический CSS» в настройках для исправления таких ситуаций.

Интеграция с другими плагинами для максимальной оптимизации

Для комплексной оптимизации скорости сайта рекомендуем сочетать WP Rocket с:

• Clearfy Pro — для отключения ненужных функций WordPress и минимизации загрузки;
• WPRemark — для оптимизации комментариев и снижения нагрузки;
• Asset CleanUp — для точечной оптимизации CSS и JS.

Это позволит добиться максимального ускорения без ущерба для функционала.