Зачастую в WordPress-темах и плагинах подключается множество CSS-файлов, которые не используются на конкретных страницах сайта. Это приводит к увеличению времени загрузки, ухудшению пользовательского опыта и снижению позиций в поисковых системах. В этой статье мы подробно рассмотрим, как эффективно выявить и удалить неиспользуемые CSS-стили в WordPress с примерами кода и рекомендациями по плагинам.
Почему важно удалять неиспользуемые стили
Каждый лишний CSS-файл увеличивает вес страницы и количество HTTP-запросов. Особенно это заметно на мобильных устройствах с медленным интернетом. Удаление неиспользуемых стилей позволяет:
- Сократить время загрузки страниц
- Улучшить производительность и показатели Core Web Vitals
- Снизить нагрузку на сервер
- Повысить удобство работы с кодом и поддержку сайта
Однако важно удалить именно неиспользуемые стили, чтобы не нарушить дизайн сайта.
Как определить неиспользуемые стили
Для выявления неиспользуемых CSS можно использовать несколько инструментов и подходов:
Использование Chrome DevTools Coverage
В браузере Google Chrome откройте инструменты разработчика (F12), перейдите на вкладку Coverage (если нет, нажмите Ctrl+Shift+P и введите Coverage), обновите страницу и посмотрите, какие CSS-файлы и правила используются. Неиспользуемые будут показаны красным цветом.
Плагины для анализа CSS
- Asset CleanUp (https://wpshop.ru/product/asset-cleanup/?utm_source=wp-shablon.ru&utm_medium=article&utm_campaign=udalit-neispolzuemye-stili-v-wordpress) — позволяет отключать загрузку стилей и скриптов на отдельных страницах.
- Perfmatters — платный плагин с аналогичным функционалом.
Онлайн-сервисы
Сервисы вроде PurifyCSS Online или Unused-CSS позволяют загрузить CSS и HTML, чтобы получить отчет по неиспользуемым стилям.
Как программно удалять неиспользуемые стили в WordPress
Самый точный способ — отключать загрузку CSS там, где он не нужен. Рассмотрим, как это сделать с помощью хуков и функций WordPress.
Пример отключения стилей на отдельных страницах
Допустим, у вас есть плагин, который подключает CSS на все страницы, но вы хотите отключить его на главной странице:
function wp_shablon_remove_unused_styles() {
if (is_front_page()) {
wp_dequeue_style('plugin-style-handle');
wp_deregister_style('plugin-style-handle');
}
}
add_action('wp_enqueue_scripts', 'wp_shablon_remove_unused_styles', 20);
Замените plugin-style-handle на реальный идентификатор стиля, который можно узнать в исходном коде страницы или в документации плагина.
Автоматизация отключения стилей для страниц с определенным шаблоном
Если у вас шаблон страницы, где нужны минимальные стили, можно отключить все лишние CSS кроме базовых:
function wp_shablon_dequeue_styles_for_template() {
if (is_page_template('minimal-template.php')) {
global $wp_styles;
foreach ($wp_styles->registered as $handle => $style) {
if (!in_array($handle, array('main-style', 'minimal-style'))) {
wp_dequeue_style($handle);
}
}
}
}
add_action('wp_enqueue_scripts', 'wp_shablon_dequeue_styles_for_template', 100);
Здесь мы оставляем только стили main-style и minimal-style, остальные отключаем.
Рекомендации по работе с плагинами для оптимизации CSS
Оптимальные плагины для удаления и оптимизации CSS — это те, которые позволяют гибко управлять загрузкой ассетов и не ломающие дизайн. Среди них:
- Asset CleanUp Pro — удобный интерфейс для отключения стилей и скриптов на страницах, поддержка массовых правил.
- Clearfy Pro (https://wpshop.ru/product/clearfy-pro/?utm_source=wp-shablon.ru&utm_medium=article&utm_campaign=udalit-neispolzuemye-stili-v-wordpress) — комплексная оптимизация, включая отключение лишних CSS.
Важно тщательно тестировать сайт после отключения стилей, чтобы не нарушить работу и внешний вид.
Дополнительные способы оптимизации CSS
Объединение и минификация CSS
После удаления неиспользуемых стилей стоит объединить оставшиеся файлы и минимизировать их. Это уменьшит количество запросов и размер файлов. Для этого можно использовать плагины, например, Autoptimize.
Использование критического CSS
Критический CSS — это стили, необходимые для рендеринга видимой части страницы. Их можно встроить прямо в <head>, а остальной CSS загружать асинхронно. Это значительно ускоряет отображение контента.
Отложенная загрузка CSS
Отложенная загрузка неважных стилей помогает ускорить первичную загрузку. Плагины вроде WP Rocket и Clearfy Pro реализуют такие функции.
Пример комплексной функции для удаления неиспользуемых стилей в теме
function wp_shablon_optimize_styles() {
// Отключаем стили плагина на всех страницах, кроме страниц с товарами
if (!is_singular('product')) {
wp_dequeue_style('woocommerce-general');
wp_dequeue_style('woocommerce-layout');
wp_dequeue_style('woocommerce-smallscreen');
}
// Отключаем стили темы на странице контактов
if (is_page('contacts')) {
wp_dequeue_style('theme-contact-style');
}
}
add_action('wp_enqueue_scripts', 'wp_shablon_optimize_styles', 99);
Подстройте идентификаторы стилей под используемые на вашем сайте.
Таким образом, удаление неиспользуемых стилей в WordPress — задача, требующая внимательного анализа и тестирования. Используйте инструменты для выявления лишних CSS, применяйте программные методы отключения и оптимизируйте загрузку стилей с помощью плагинов. Это поможет сделать сайт быстрее и удобнее для посетителей.