В современных проектах на WordPress часто возникает задача оптимизации загрузки страниц за счёт отключения ненужных CSS и JS файлов, которые подключаются плагинами или темами. Это особенно актуально, если плагин загружает свои скрипты на всех страницах, а используются они только на одной или нескольких. В данной статье подробно разберём, как selectively отключать стили и скрипты на отдельных страницах WordPress с практическими примерами кода.
Почему важно отключать CSS и JS на ненужных страницах
Каждый лишний CSS или JS-файл увеличивает время загрузки страницы, повышает количество HTTP-запросов и замедляет отрисовку. Если плагин подключает свои стили и скрипты на весь сайт, а они нужны только, например, на странице с формой, это неэффективно и снижает скорость.
Отключение неиспользуемых ресурсов помогает:
- Уменьшить объём загружаемых данных
- Сократить время отклика сервера и браузера
- Улучшить показатели Core Web Vitals и SEO
- Снизить вероятность конфликтов CSS и JS
При этом задача стоит так: отключить CSS/JS плагина на всех страницах кроме тех, где они действительно нужны.
Как определить, какие стили и скрипты загружаются
Для начала нужно знать, какие именно ресурсы подключаются и под каким именем. Это можно сделать несколькими способами:
- Просмотр исходного кода страницы (Ctrl+U) и поиск ссылок на CSS и JS
- Использование браузерных DevTools (вкладка Network и Sources)
- Использование плагинов для WordPress, например, Query Monitor, который показывает зарегистрированные и загруженные скрипты и стили
Обратите внимание на handle (идентификатор) стиля или скрипта — именно он нужен для отключения.
Отключение CSS и JS на отдельных страницах с помощью wp_dequeue_style и wp_dequeue_script
WordPress предоставляет функции wp_dequeue_style и wp_dequeue_script для удаления уже зарегистрированных стилей и скриптов из очереди загрузки. Чтобы это сделать выборочно, нужно использовать хуки и условные теги.
Приведём пример кода в functions.php вашей темы или в кастомном плагине:
function wpblock_dequeue_assets() {
// Проверяем, что мы не на странице с ID 42, где нужны скрипты
if (!is_page(42)) {
wp_dequeue_style('plugin-style-handle');
wp_dequeue_script('plugin-script-handle');
}
}
add_action('wp_print_scripts', 'wpblock_dequeue_assets', 100);
В этом примере мы отключаем стили и скрипты плагина на всех страницах, кроме страницы с ID 42. Замените plugin-style-handle и plugin-script-handle на реальные имена, которые вы узнали ранее.
Почему используем хук wp_print_scripts с приоритетом 100
Поскольку скрипты и стили регистрируются и ставятся в очередь на ранних этапах, чтобы их удалить, нужно дождаться, когда они уже добавлены, и только потом их убрать. Хук wp_print_scripts с высоким приоритетом — оптимальное место для этого.
Более сложные условия: отключение по шаблону URL и типу записи
Иногда нужно отключать ресурсы не только по ID страницы, но и по типу записи, или по части URL. Для этого используются условные теги WordPress и функции PHP:
function wpblock_conditional_dequeue() {
if (is_singular('product') || is_page_template('template-contact.php')) {
// Оставляем скрипты на страницах товаров и странице контактов
return;
}
// Везде, кроме указанных, отключаем
wp_dequeue_style('plugin-style-handle');
wp_dequeue_script('plugin-script-handle');
}
add_action('wp_print_scripts', 'wpblock_conditional_dequeue', 100);
Такой подход даёт гибкость в управлении загрузкой ресурсов.
Использование плагина Clearfy Pro для управления загрузкой CSS и JS
Если вы не хотите писать код вручную, можно воспользоваться плагином Clearfy Pro. Он позволяет в удобном интерфейсе отключать загрузку стилей и скриптов плагинов на выбранных страницах, типах записей или условиях.
Преимущества Clearfy Pro:
- Простой интерфейс без необходимости писать код
- Оптимизация скорости сайта за счёт отключения ненужных ресурсов
- Совместимость с большинством популярных плагинов и тем
Это отличный выбор для тех, кто хочет быстро и безопасно оптимизировать сайт.
Пример: отключаем стили и скрипты плагина Contact Form 7 на всех страницах кроме страницы контактов
Contact Form 7 часто подключает свои стили на весь сайт, что не всегда нужно. Предположим, страница контактов имеет ID 12. Вот пример кода:
function wpblock_dequeue_cf7_assets() {
if (!is_page(12)) {
wp_dequeue_style('contact-form-7');
wp_dequeue_script('contact-form-7');
}
}
add_action('wp_print_scripts', 'wpblock_dequeue_cf7_assets', 100);
После добавления этого кода стили и скрипты Contact Form 7 будут загружаться только на странице контактов, что улучшит скорость остальных страниц.
Подводные камни и полезные советы
При отключении скриптов и стилей не забывайте:
- Тестировать сайт после изменений, чтобы не сломать функционал
- Проверять зависимости — если скрипт требуется другому, отключение может вызвать ошибки
- Использовать дебаг-плагины типа Query Monitor для анализа загрузки ресурсов
- Кэшировать сайт и браузер после внесения изменений
Также можно комбинировать отключение с отложенной загрузкой (lazy load) и оптимизацией минификации CSS/JS.