Неиспользуемые CSS и JavaScript-файлы — частая причина замедления загрузки страниц на WordPress-сайтах. Это особенно актуально, если вы используете много плагинов и тем, которые подключают свои стили и скрипты на каждой странице независимо от необходимости. В этой статье подробно разберём, как выявить и удалить неиспользуемые CSS и JS, а также оптимизировать загрузку ресурсов для улучшения скорости и пользовательского опыта.
Почему важно удалять неиспользуемые CSS и JS
Каждый лишний файл стилей или скриптов увеличивает время загрузки страницы, расходует трафик пользователя и нагрузку на сервер. Даже если размер файла небольшой, его загрузка и обработка браузером отнимает ресурсы, что в итоге влияет на оценку Core Web Vitals и SEO.
Кроме того, многие плагины и темы не предоставляют гибких настроек подключения своих ресурсов, из-за чего ненужные стили и скрипты подгружаются на страницах, где они не нужны. Это приводит к конфликтам и усложняет поддержку сайта.
Удаление неиспользуемых CSS и JS помогает:
- Уменьшить время загрузки страниц;
- Снизить нагрузку на сервер и трафик;
- Улучшить показатели SEO;
- Сделать сайт более отзывчивым и удобным для пользователей.
Как выявить неиспользуемые CSS и JS на сайте WordPress
Первый шаг — анализ текущей загрузки ресурсов. Для этого можно использовать несколько инструментов:
Google Chrome DevTools
Откройте вкладку Coverage в инструментах разработчика (Ctrl+Shift+P → введите "Coverage" → выберите «Show Coverage»). Обновите страницу и просмотрите, какие части CSS и JS не используются. Это отличный способ быстро увидеть, какие файлы загружаются и сколько процентов кода реально исполняется.
Плагины для анализа
- Asset CleanUp — показывает, какие скрипты и стили загружаются на каждой странице, позволяет отключать их выборочно.
- Perfmatters — инструмент с возможностью отключать ненужные ресурсы и оптимизировать загрузку.
Также можно воспользоваться онлайн-сервисами, например, WebPageTest или GTmetrix, чтобы получить отчёты по загрузке CSS и JS.
Удаление и отключение неиспользуемых CSS и JS средствами кода
Для удаления ненужных ресурсов в WordPress рекомендуется использовать хуки wp_enqueue_scripts и функции wp_dequeue_style, wp_dequeue_script. Ниже пример, как это сделать:
function wpinc_dequeue_unused_assets() {
// Отключаем стили плагина Contact Form 7 на страницах, где он не нужен
if (!is_page('kontakt')) {
wp_dequeue_style('contact-form-7');
wp_dequeue_script('contact-form-7');
}
// Отключаем стили темы для блоков Gutenberg на страницах без редактора блоков
if (!is_singular()) {
wp_dequeue_style('wp-block-library');
}
}
add_action('wp_enqueue_scripts', 'wpinc_dequeue_unused_assets', 100);В этом примере мы отключаем стили и скрипты Contact Form 7 на всех страницах, кроме страницы с контактной формой, а также стили Gutenberg на всех страницах, где не используется редактор блоков.
Важно: для корректного отключения сначала нужно узнать точные идентификаторы стилей и скриптов. Их можно посмотреть в исходном коде страницы или в документации плагинов.
Использование плагина Asset CleanUp для выборочного отключения ресурсов
Asset CleanUp — один из лучших бесплатных инструментов для управления загрузкой CSS и JS. Он позволяет наглядно отключать ресурсы на страницах и постах.
После установки и активации плагина перейдите в редактирование страницы или записи — внизу вы увидите метабокс с загруженными стилями и скриптами. Здесь можно снять галочки с тех, которые не нужны на данной странице.
Плагин также поддерживает массовое отключение или отключение по типу страниц, что удобно для комплексной оптимизации.
Оптимизация загрузки CSS и JS с помощью отложенной загрузки и минификации
После удаления неиспользуемых ресурсов стоит подумать об оптимизации оставшихся. Для этого применяют минификацию и отложенную загрузку.
- Минификация — удаление пробелов, комментариев и сокращение кода. Это уменьшает размер файлов.
- Отложенная загрузка (defer/async) — скрипты загружаются асинхронно или после загрузки основного контента, что ускоряет отображение страницы.
Для реализации можно использовать плагины, например:
- Clearfy Pro — включает функции оптимизации CSS/JS, включая отключение неиспользуемого кода и отложенную загрузку.
- Autoptimize — минификация и объединение CSS/JS с настройками отложенной загрузки.
Вот пример настройки отложенной загрузки JS с помощью фильтра в functions.php:
function wpinc_defer_js_scripts( $tag, $handle, $src ) {
// Список скриптов, которые нужно загрузить с defer
$defer_scripts = array('jquery-core', 'my-custom-script');
if (in_array($handle, $defer_scripts)) {
return '<script src="' . esc_url($src) . '" defer></script>';
}
return $tag;
}
add_filter( 'script_loader_tag', 'wpinc_defer_js_scripts', 10, 3 );Как проверить результат и поддерживать порядок
Оптимизация CSS и JS — это не одноразовая задача. После внесения изменений обязательно проверяйте работу сайта на различных страницах, особенно на тех, где отключали ресурсы. Иногда может нарушиться функциональность, если отключить нужные скрипты.
Для проверки скорости используйте Google PageSpeed Insights, GTmetrix и Chrome DevTools. Обратите внимание на показатели First Contentful Paint и Total Blocking Time.
Рекомендуется вести список отключённых ресурсов и условий, чтобы не потерять настройки при обновлениях плагинов и темы.
Заключение
Удаление неиспользуемых CSS и JS — эффективный способ ускорить WordPress-сайт и улучшить пользовательский опыт. Используйте инструменты анализа, подключайте отключение ресурсов через код или плагины, а также применяйте минификацию и отложенную загрузку для оставшихся файлов.
Для комплексной оптимизации рекомендую посмотреть на Clearfy Pro, который объединяет множество полезных функций для ускорения сайта с минимальными усилиями.