Одной из частых проблем при оптимизации WordPress-сайтов является наличие неиспользуемых CSS и JavaScript-файлов. Они замедляют загрузку страниц, увеличивают объем передаваемых данных и ухудшают пользовательский опыт. В этой статье подробно рассмотрим, как эффективно выявлять и удалять неиспользуемые стили и скрипты с помощью плагина Clearfy Pro, а также приведём примеры кода для тонкой настройки загрузки ресурсов.
Почему важно удалять неиспользуемые CSS и JS в WordPress
Когда тема или плагины подключают свои скрипты и стили на всех страницах сайта без исключения, это приводит к избыточной загрузке ресурсов. Например, скрипт слайдера может подключаться на всех страницах, хотя используется только на главной. Это увеличивает время загрузки, снижает скорость и влияет на SEO.
Удаление неиспользуемых стилей помогает уменьшить количество HTTP-запросов и вес страниц. В итоге сайт становится быстрее, что положительно сказывается на конверсии и позиции в поисковой выдаче.
Однако вручную искать и отключать лишние файлы — трудоёмко и рискованно. Для этого есть удобные инструменты, например, Clearfy Pro.
Как Clearfy Pro помогает оптимизировать загрузку CSS и JS
Clearfy Pro — мощный плагин для оптимизации WordPress, который умеет:
- Автоматически выявлять неиспользуемые стили и скрипты;
- Отключать загрузку CSS и JS на выбранных страницах или для определённых типов записей;
- Объединять и минифицировать файлы для ускорения;
- Управлять загрузкой ресурсов без необходимости писать код.
Для начала работы установите и активируйте плагин с официального источника.
Настройка отключения неиспользуемых стилей и скриптов
В административной панели Clearfy Pro перейдите в раздел Оптимизация > Управление загрузкой CSS/JS. Там вы увидите список подключаемых файлов с возможностью отключить их на страницах, где они не нужны.
Например, чтобы отключить стили плагина слайдера на всех страницах, кроме главной, используйте настройки условного отключения. Это позволит загрузить CSS и JS только там, где они действительно используются.
Пример программного отключения скриптов и стилей в functions.php
Если вы хотите дополнительно контролировать загрузку ресурсов программно, добавьте следующий код в functions.php вашей темы или в отдельный плагин:
function wpskins_ru_dequeue_unneeded_scripts() {
if ( !is_front_page() ) {
wp_dequeue_style('slider-style');
wp_dequeue_script('slider-script');
}
}
add_action('wp_enqueue_scripts', 'wpskins_ru_dequeue_unneeded_scripts', 100);
Здесь 'slider-style' и 'slider-script' — это идентификаторы (handle) стилей и скриптов, которые вы хотите отключить на всех страницах, кроме главной. Их можно узнать через инспектор браузера или в коде плагина/темы.
Как найти handle стилей и скриптов для отключения
Чтобы определить, какие ресурсы подключены, можно использовать:
- Панель разработчика в браузере (вкладка Network или Sources);
- Плагины, например, Query Monitor, который показывает зарегистрированные и подключённые CSS/JS;
- Код темы/плагина с вызовами
wp_enqueue_styleиwp_enqueue_script.
Дополнительные советы по оптимизации загрузки ресурсов
Использование отложенной загрузки и асинхронных скриптов
Clearfy Pro также позволяет включать опции для добавления атрибутов defer и async к тегам скриптов. Это уменьшает блокировку рендеринга и ускоряет отображение страницы.
Объединение и минификация CSS и JS
Для дальнейшего уменьшения количества запросов стоит объединять и минифицировать файлы. Clearfy Pro имеет встроенные инструменты для этого, которые работают без конфликтов с большинством тем и плагинов.
Интеграция Clearfy Pro с темами и плагинами WPSkin
Если вы используете темы Reboot или Root от WPSkin, Clearfy Pro отлично сочетается с ними и помогает убрать лишние стили, которые могут добавлять темы по умолчанию. Это особенно полезно для создания лёгких и быстрых сайтов с кастомными скинами.
Также можно использовать Clearfy Pro вместе с плагинами, например, WPRemark для отзывов или WPStories — для сторис, где важно минимизировать загрузку внешних стилей и скриптов ради скорости.