Как удалить неиспользуемые стили и скрипты из отдельных страниц WordPress

Диагностика проблемы: зачем удалять лишние стили и скрипты

Часто в WordPress темы и плагины подключают CSS и JS файлы глобально — на всех страницах сайта, даже если они нужны только для одной конкретной страницы или шаблона. Это приводит к увеличению времени загрузки страниц и ухудшению показателей Core Web Vitals. Чтобы оптимизировать скорость, нужно удалить неиспользуемые ресурсы на страницах, где они не нужны.

Как определить, какие стили и скрипты грузятся и где

Для начала нужно понять, какие именно CSS и JS подключаются на страницах и не используются.

• Воспользуйтесь инструментом разработчика в браузере: во вкладке Network фильтруйте по CSS и JS, посмотрите, какие файлы загружаются на разных типах страниц.
• Плагин Query Monitor: показывает список всех подключенных стилей и скриптов, с указанием источника.
• Плагины для оптимизации: например, Clearfy Pro (https://wpshop.ru/plugins/clearfy?utm_source=wp-themes.ru&utm_medium=article&utm_campaign=kak-udalit-neispolzuemye-stili-i-skripty-iz-otdelnyh-stranic-wordpress) помогает выявлять и отключать избыточные ресурсы.

Пошаговое решение: отключаем стили и скрипты в functions.php

Для удаления подключений используйте хуки wp_dequeue_style и wp_dequeue_script. Пример отключения на страницах, кроме главной:

function wp_remove_unused_assets() {
    if ( ! is_front_page() ) {
        wp_dequeue_style( 'plugin-style-handle' );
        wp_dequeue_script( 'plugin-script-handle' );
    }
}
add_action( 'wp_print_scripts', 'wp_remove_unused_assets', 100 );
add_action( 'wp_print_styles', 'wp_remove_unused_assets', 100 );

Обратите внимание, что 'plugin-style-handle' и 'plugin-script-handle' нужно заменить на реальные хендлы стилей и скриптов. Их можно узнать через Query Monitor или просмотром исходного кода функции wp_enqueue_style/wp_enqueue_script в плагине/теме.

Отключение загрузки на конкретных типах страниц

function wp_conditionally_remove_assets() {
    if ( is_page( 42 ) || is_singular( 'product' ) ) {
        wp_dequeue_style( 'some-style' );
        wp_dequeue_script( 'some-script' );
    }
}
add_action( 'wp_print_scripts', 'wp_conditionally_remove_assets', 100 );
add_action( 'wp_print_styles', 'wp_conditionally_remove_assets', 100 );

Здесь стили и скрипты удаляются только на странице с ID 42 и для товаров WooCommerce.

Проверка результата после внедрения

• Очистите кеш сайта и браузера.
• Используйте Инструменты разработчика — вкладка Network — проверьте, что файлы не загружаются на нужных страницах.
• Запустите Google PageSpeed Insights или Lighthouse — посмотрите, уменьшилось ли количество запросов и улучшились ли метрики.
• Проверьте функциональность страниц, чтобы отключение не сломало важные скрипты.

Частые ошибки и как их исправить

• Неправильный хендл скрипта или стиля: если хендл указан неверно, отключение не сработает. Используйте Query Monitor для точного определения.
• Отключение необходимых скриптов: иногда скрипты нужны для AJAX-запросов или динамических элементов. Проверяйте функционал после отключения.
• Отсутствие приоритета в хуках: хук должен иметь приоритет не меньше 100, чтобы отключать после подключения скриптов.
• Кеширование: забывают очистить кеш, поэтому изменения не видны.

Практические советы по безопасности и производительности

• Не отключайте скрипты и стили плагинов WooCommerce или критичных плагинов без понимания их роли.
• Используйте детальные условия is_page(), is_singular(), is_post_type_archive() для точечной оптимизации.
• Используйте плагины оптимизации (например, Clearfy Pro) для комплексного подхода к удалению лишних ресурсов.
• Проверяйте работу сайта на разных устройствах и браузерах после изменений.

Сравнение способов удаления неиспользуемых стилей и скриптов