Оптимизация загрузки CSS и JavaScript в WordPress — одна из важных задач для ускорения сайта и улучшения пользовательского опыта. Часто темы и плагины подключают стили и скрипты на все страницы сайта, даже если они нужны только на одной или нескольких. Это замедляет загрузку страниц и снижает производительность.
Почему важно удалять ненужные CSS и JS на отдельных страницах
Когда WordPress загружает тему или плагин, он подключает необходимые CSS и JS файлы через функцию wp_enqueue_style и wp_enqueue_script. Однако эти подключения обычно глобальные и не учитывают, нужны ли эти файлы на конкретной странице. В результате пользователи загружают лишние данные, что увеличивает время загрузки и расход трафика.
Удаление ненужных файлов на отдельных страницах помогает:
- Уменьшить размер загружаемых данных
- Ускорить отображение страницы
- Снизить количество конфликтов между скриптами
- Повысить показатели Core Web Vitals и SEO
Например, если плагин слайдера подключает свои скрипты на всех страницах, а слайдер есть только на главной, то есть смысл их отключить на всех остальных.
Как определить, какие CSS и JS можно удалить
Для начала нужно понять, какие стили и скрипты загружаются и на каких страницах. Это можно сделать с помощью инструментов браузера (Chrome DevTools) в разделе Network и Sources, а также плагинов для администрирования:
- Query Monitor — показывает все подключаемые скрипты и стили
- Asset CleanUp — позволяет отключать стили и скрипты прямо из админки
После анализа нужно составить список тех файлов, которые не нужны на конкретных страницах.
Способы удаления CSS и JS из отдельных страниц WordPress
1. Отключение через хук wp_enqueue_scripts
Самый распространённый способ — использовать условные теги WordPress для проверки текущей страницы и отключать стили/скрипты с помощью функции wp_dequeue_style и wp_dequeue_script.
Пример функции для отключения CSS и JS на страницах, кроме главной:
function wpthemes_dequeue_assets() {
if ( !is_front_page() ) {
wp_dequeue_style( 'plugin-style-handle' );
wp_dequeue_script( 'plugin-script-handle' );
}
}
add_action( 'wp_enqueue_scripts', 'wpthemes_dequeue_assets', 100 );Здесь 'plugin-style-handle' и 'plugin-script-handle' — это идентификаторы стилей и скриптов, которые нужно отключить. Их можно узнать из кода темы/плагина или через Query Monitor.
2. Условное отключение по ID поста, шаблону или типу записи
Можно делать более тонкую настройку, например отключать на страницах с определённым ID или типом записи:
function wpthemes_dequeue_assets_by_page() {
if ( is_page( 42 ) || is_singular( 'product' ) ) {
wp_dequeue_style( 'some-style' );
wp_dequeue_script( 'some-script' );
}
}
add_action( 'wp_enqueue_scripts', 'wpthemes_dequeue_assets_by_page', 100 );Так вы можете полностью контролировать, где именно будут загружаться ресурсы.
3. Использование плагинов для управления ресурсами
Если не хотите писать код, можно использовать плагины, которые предоставляют удобный интерфейс для отключения CSS и JS:
Они показывают список всех подключаемых файлов и позволяют отключать их на выбранных страницах. Однако, если нужна гибкая логика — лучше писать функции.
Особенности работы с темами WPShop
Если вы используете темы от WPShop, например Reboot или Root, обратите внимание, что некоторые стили и скрипты могут подключаться динамически через их собственные хуки. В этом случае отключение через стандартные wp_dequeue_ функции может не сработать.
Для таких тем стоит изучить документацию или обратиться к поддержке, чтобы узнать правильные фильтры и хуки для отключения ресурсов.
Пример комплексного решения удаления CSS и JS
Ниже пример функции, которая отключает стили и скрипты на всех страницах, кроме главной и страницы контактов (ID 10):
function wpthemes_dequeue_unnecessary_assets() {
if ( !is_front_page() && !is_page( 10 ) ) {
wp_dequeue_style( 'contact-form-7' );
wp_dequeue_script( 'contact-form-7' );
wp_dequeue_style( 'example-plugin-style' );
wp_dequeue_script( 'example-plugin-script' );
}
}
add_action( 'wp_enqueue_scripts', 'wpthemes_dequeue_unnecessary_assets', 100 );Не забудьте заменить 'contact-form-7' и другие на реальные хендлы ваших стилей и скриптов.
Советы по поиску хендлов стилей и скриптов
Чтобы точно узнать, какие идентификаторы использовать в wp_dequeue_style и wp_dequeue_script, выполните следующие действия:
- Откройте админку WordPress и активируйте плагин Query Monitor.
- Перейдите на страницу сайта, где загружаются нужные скрипты.
- В панели Query Monitor выберите раздел Scripts & Styles. Там будет список всех подключенных ресурсов с их хендлами.
- Используйте эти хендлы в коде отключения.
Заключение по теме
Удаление ненужных CSS и JS из отдельных страниц WordPress — важный шаг для оптимизации сайта. Это повысит скорость загрузки, улучшит опыт пользователей и поможет в SEO. Используйте условные теги, хук wp_enqueue_scripts и функции wp_dequeue_style, wp_dequeue_script для тонкой настройки загрузки ресурсов. Если не хотите писать код, попробуйте плагины Asset CleanUp или WP Asset Clean Up.