В работе с WordPress часто возникает потребность оптимизировать загрузку сайта, убрав ненужные стили и скрипты, которые подключаются плагинами или темами по умолчанию. Это особенно важно для улучшения скорости загрузки и повышения производительности. В этой статье мы подробно разберем, как с помощью стандартных хуков WordPress можно эффективно удалить или отключить CSS и JS файлы, которые не нужны на конкретных страницах.
Почему важно удалять ненужные стили и скрипты
Каждый лишний CSS или JS файл увеличивает время загрузки страницы, потребляет трафик и может влиять на работу других скриптов. Многие плагины подключают свои ресурсы на всех страницах сайта, даже если функционал нужен только на одной из них. Например, плагин слайдера может подгружать скрипты на всех страницах, а слайдер используется только на главной. В результате страница загружается медленнее, и пользовательский опыт ухудшается.
Удаление ненужных ресурсов позволяет:
- Снизить время загрузки страниц;
- Уменьшить количество запросов к серверу;
- Избежать конфликтов между скриптами;
- Повысить оценку сайта в инструментах анализа производительности.
Базовые хуки для удаления стилей и скриптов в WordPress
Для работы со стилями и скриптами в WordPress используются хуки wp_enqueue_scripts (для фронтенда) и admin_enqueue_scripts (для админки). Чтобы удалить уже зарегистрированные или подключенные ресурсы, применяют функции wp_dequeue_style() и wp_dequeue_script(). Чтобы полностью удалить регистрацию, используется wp_deregister_style() и wp_deregister_script().
Важно вызывать эти функции на правильном этапе, обычно с приоритетом выше 10, чтобы гарантировать, что стили и скрипты уже были зарегистрированы.
Пример базового удаления скрипта
add_action('wp_enqueue_scripts', 'wpbono_remove_unnecessary_scripts', 20);
function wpbono_remove_unnecessary_scripts() {
wp_dequeue_script('plugin-slider-script');
wp_deregister_script('plugin-slider-script');
}В этом примере мы удаляем скрипт с идентификатором plugin-slider-script, который может быть подключен плагином слайдера.
Как определить идентификаторы стилей и скриптов для удаления
Чтобы удалить конкретный стиль или скрипт, нужно знать его handle — уникальный идентификатор, под которым он зарегистрирован в WordPress. Для этого можно использовать несколько способов:
- Посмотреть исходный код страницы и найти подключаемые файлы, затем сопоставить с именами в коде плагина или темы.
- Использовать плагины для отладки, например, Query Monitor, который показывает все зарегистрированные и подключенные стили и скрипты.
- Временно добавить вывод всех зарегистрированных скриптов в лог или на экран с помощью кода:
add_action('wp_enqueue_scripts', 'wpbono_list_all_scripts', 100);
function wpbono_list_all_scripts() {
global $wp_scripts;
foreach($wp_scripts->registered as $handle => $script) {
error_log('Script handle: ' . $handle);
}
}Так можно узнать точные идентификаторы, чтобы далее корректно их удалить.
Удаление стилей и скриптов на определенных страницах
Часто нужно убрать ресурсы только на отдельных страницах или типах записей, чтобы не ломать функционал там, где он нужен. Для этого используют условные теги WordPress — is_page(), is_single(), is_front_page() и другие.
Пример удаления стиля на всех страницах, кроме главной:
add_action('wp_enqueue_scripts', 'wpbono_remove_style_except_home', 20);
function wpbono_remove_style_except_home() {
if (!is_front_page()) {
wp_dequeue_style('plugin-special-style');
wp_deregister_style('plugin-special-style');
}
}Таким образом, мы сохраним стиль только на главной, а везде он не будет загружаться.
Практические примеры удаления стилей и скриптов популярных плагинов
WooCommerce
WooCommerce автоматически подключает множество стилей и скриптов на всех страницах, что не всегда оправдано, если магазин используется частично или определенные страницы не требуют этих ресурсов.
Чтобы отключить стили WooCommerce на всех страницах, кроме страниц магазина, корзины и оформления заказа, используем следующий код:
add_action('wp_enqueue_scripts', 'wpbono_clean_woocommerce_assets', 99);
function wpbono_clean_woocommerce_assets() {
if (!is_woocommerce() && !is_cart() && !is_checkout()) {
wp_dequeue_style('woocommerce-general');
wp_dequeue_style('woocommerce-layout');
wp_dequeue_style('woocommerce-smallscreen');
wp_dequeue_script('wc-cart-fragments');
wp_dequeue_script('woocommerce');
wp_dequeue_script('wc-checkout');
wp_dequeue_script('wc-add-to-cart');
}
}Contact Form 7
Плагин Contact Form 7 подключает стили и скрипты на всех страницах по умолчанию, что не всегда необходимо, если форма используется только на одной странице.
Удалим ресурсы Contact Form 7 на всех страницах, кроме страницы с ID 42:
add_action('wp_enqueue_scripts', 'wpbono_optimize_cf7_assets', 20);
function wpbono_optimize_cf7_assets() {
if (!is_page(42)) {
wp_dequeue_style('contact-form-7');
wp_dequeue_script('contact-form-7');
}
}Советы по правильному удалению стилей и скриптов
При удалении ресурсов важно убедиться, что вы не ломаете функционал сайта. Вот несколько рекомендаций:
- Всегда тестируйте изменения в разных браузерах и на разных страницах.
- Удаляйте только те стили и скрипты, в назначении которых вы уверены.
- Используйте условные теги, чтобы избежать удаления там, где ресурсы действительно нужны.
- Проверяйте зависимости скриптов — если один скрипт зависит от другого, удаление первичного может вызвать ошибки.
Создание универсальной функции для удаления ресурсов по списку
Для удобства можно написать функцию, которая принимает массив идентификаторов стилей и скриптов для удаления, и применяет их с условием по страницам.
function wpbono_dequeue_assets(array $styles = [], array $scripts = [], callable $condition = null) {
add_action('wp_enqueue_scripts', function() use ($styles, $scripts, $condition) {
if ($condition === null || call_user_func($condition)) {
foreach ($styles as $handle) {
wp_dequeue_style($handle);
wp_deregister_style($handle);
}
foreach ($scripts as $handle) {
wp_dequeue_script($handle);
wp_deregister_script($handle);
}
}
}, 20);
}
// Пример использования: удалить стили и скрипты Contact Form 7 на всех страницах, кроме страницы с ID 42
wpbono_dequeue_assets(
['contact-form-7'],
['contact-form-7'],
function() { return !is_page(42); }
);Такой подход позволяет централизованно управлять удалением ресурсов и делает код более чистым и поддерживаемым.
Выводы
Удаление ненужных CSS и JS файлов с помощью хуков WordPress — мощный инструмент оптимизации сайта. Правильное использование функций wp_dequeue_* и wp_deregister_* в сочетании с условными тегами позволяет значительно ускорить загрузку страниц и улучшить пользовательский опыт. Не забывайте тестировать изменения и использовать инструменты отладки для точного определения подключаемых ресурсов.