Как удалить избыточные CSS и JS в WordPress для ускорения сайта

Автор: Роман Васильев | Опубликовано: 28.12.2025

Одной из частых проблем, замедляющих загрузку сайта на WordPress, является избыточная загрузка CSS и JavaScript файлов. Многие темы и плагины подключают свои стили и скрипты на всех страницах без исключения, что увеличивает вес страницы и время загрузки. В этой статье подробно разберем, как эффективно удалить или отключить ненужные CSS и JS файлы на сайте WordPress, оставив только необходимые, чтобы добиться максимальной производительности.

Почему лишние CSS и JS влияют на скорость сайта

Каждый подключаемый файл CSS или JS увеличивает количество HTTP-запросов, а также общий объем загружаемых данных. Особенно это ощутимо на мобильных устройствах и при медленных соединениях. Кроме того, некоторые скрипты могут блокировать рендеринг страницы, из-за чего контент отображается дольше.

Если на странице подключается много плагинов, каждый из которых добавляет свои стили и скрипты на все страницы, даже там, где они не нужны, это приводит к избыточной нагрузке.

Удаление ненужных CSS и JS помогает:

Уменьшить время загрузки страницы;
Снизить нагрузку на сервер;
Повысить оценку скорости в PageSpeed Insights и других сервисах;
Улучшить пользовательский опыт.

Как определить, какие CSS и JS можно отключить

Первый шаг — провести аудит подключаемых ресурсов. Для этого:

Откройте любую страницу сайта в браузере Chrome;
В меню разработчика (F12) перейдите во вкладку Network;
Отфильтруйте ресурсы по типу CSS и JS;
Посмотрите, какие файлы загружаются и на каких страницах.

Также полезно проверить, где реально используются те или иные скрипты и стили. Например, скрипты слайдеров нужны только на главной, а на страницах блога — нет.

Удаление избыточных CSS и JS через functions.php

Самый простой вариант — использовать функцию wp_dequeue_style и wp_dequeue_script в файле темы functions.php. Пример кода:

function wptemplates_dequeue_assets() {
    // Отключаем стили слайдера на всех страницах кроме главной
    if (!is_front_page()) {
        wp_dequeue_style('slick-css');
        wp_dequeue_script('slick-js');
    }
    // Отключаем плагин карты на всех страницах кроме контактов
    if (!is_page('contacts')) {
        wp_dequeue_script('google-maps-api');
        wp_dequeue_style('google-maps-style');
    }
}
add_action('wp_print_scripts', 'wptemplates_dequeue_assets', 100);

В этом примере замените 'slick-css', 'slick-js', 'google-maps-api' и 'google-maps-style' на реальные имена стилей и скриптов, которые вы видите в инспекторе или в документации плагина/темы.

Как узнать имена подключаемых скриптов и стилей

Имена — это первый параметр функций wp_enqueue_script() и wp_enqueue_style(). Чтобы их узнать, можно:

Посмотреть исходный код темы или плагина;
Использовать плагины, например, WP Script Manager для просмотра всех подключенных скриптов и стилей;
Посмотреть в консоли браузера, иногда там есть подсказки.

Использование плагинов для управления загрузкой CSS и JS

Если не хочется править код вручную, можно использовать плагины. Вот несколько популярных:

Asset CleanUp — позволяет отключать CSS и JS по страницам, постам и типам записей;
Plugin Organizer — управляет порядком и условиями загрузки плагинов и их ресурсов;
Clearfy Pro — комплексный плагин для оптимизации WordPress, включая отключение лишних скриптов и стилей.

Например, с Clearfy Pro можно быстро отключать ненужные скрипты без правки кода.

Ленивая загрузка и объединение стилей и скриптов

После удаления ненужных ресурсов имеет смысл оптимизировать оставшиеся. Для этого применяются техники:

Объединение (concatenation) — объединение нескольких файлов в один для уменьшения количества запросов;
Минификация — удаление пробелов и комментариев из CSS и JS;
Ленивая загрузка (defer, async) — загрузка JavaScript с отложенным выполнением;
Критический CSS — загрузка основных стилей сразу, а остальных после рендера страницы.

Плагины типа Clearfy Pro и ABC Pagination могут помочь с оптимизацией загрузки ресурсов.

Дополнительные советы по управлению CSS и JS в WordPress

Чтобы не столкнуться с проблемой избыточных ресурсов, учитывайте следующие моменты:

Используйте легкие темы и минимальный набор плагинов;
Перед установкой плагина изучите, какие ресурсы он подключает и есть ли возможность отключать их;
Для кастомных скриптов и стилей используйте правильные хуки и условия подключения;
Регулярно проверяйте сайт на предмет лишних запросов с помощью инструментов типа GTmetrix, PageSpeed Insights, и Chrome DevTools.

Пример функции для условного подключения стилей и скриптов в WordPress

Ниже пример функции, которая подключает стили и скрипты только на нужных страницах, минимизируя избыточные ресурсы:

function wptemplates_enqueue_conditional_assets() {
    if (is_front_page()) {
        wp_enqueue_style('wptemplates-slider-css', get_template_directory_uri() . '/css/slider.css', array(), '1.0');
        wp_enqueue_script('wptemplates-slider-js', get_template_directory_uri() . '/js/slider.js', array('jquery'), '1.0', true);
    }

    if (is_page('contacts')) {
        wp_enqueue_script('wptemplates-google-maps', 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY', array(), null, true);
    }
}
add_action('wp_enqueue_scripts', 'wptemplates_enqueue_conditional_assets');

Эта функция подключит слайдерные стили и скрипты только на главной, а карту Google — только на странице контактов.

Итог

Удаление избыточных CSS и JS — важный шаг для ускорения сайта на WordPress. Используйте аудит ресурсов, отключайте ненужные файлы через wp_dequeue_style и wp_dequeue_script, а для удобства — специализированные плагины. Не забывайте про объединение, минификацию и ленивую загрузку для максимальной оптимизации.

Как удалить избыточные CSS и JS в WordPress и улучшить скорость загрузки