Оптимизация скорости загрузки сайта — одна из самых актуальных задач для владельцев WordPress-проектов. Одним из скрытых тормозов могут быть неиспользуемые CSS и JS-файлы, которые загружаются на страницы, но не применяются. В этой статье разберём, как эффективно выявить и удалить такие ресурсы, чтобы ускорить сайт без потери функционала.
Почему важно удалять неиспользуемые CSS и JavaScript
Каждый лишний файл увеличивает время загрузки и влияет на показатели Core Web Vitals. Браузеру приходится тратить время на загрузку, парсинг и обработку лишнего кода, что негативно сказывается на UX и SEO. Особенно это заметно на мобильных устройствах с медленным интернетом.
Удаление неиспользуемого CSS и JS помогает:
- Уменьшить общий вес страницы;
- Сократить время загрузки и время до интерактивности;
- Уменьшить количество запросов к серверу;
- Повысить оценки в Google PageSpeed Insights и других инструментах анализа.
Но нужно делать это аккуратно, чтобы не сломать функционал сайта.
Как выявить неиспользуемые CSS и JS на WordPress сайте
Для начала необходимо понять, какие стили и скрипты грузятся, но не используются. Есть несколько инструментов:
- Google Chrome DevTools: Вкладка Coverage показывает, какой процент кода используется на странице. Откройте DevTools (F12), перейдите в "Coverage" (через Ctrl+Shift+P и поиск "Coverage"), нажмите "Reload" и посмотрите результаты.
- Плагины для WordPress: например, Clearfy Pro имеет функции оптимизации загрузки стилей и скриптов с возможностью отключения неиспользуемых.
- Онлайн-сервисы: такие как GTmetrix, PageSpeed Insights, показывают рекомендации по оптимизации CSS/JS.
После выявления неиспользуемых ресурсов можно приступать к их отключению.
Способы удаления неиспользуемых CSS и JS в WordPress
1. Отключение загрузки скриптов и стилей через functions.php
Если вы знаете точные имена стилей или скриптов, которые не нужны на определённых страницах, можно отключить их программно. Например, чтобы отключить скрипт example-script.js и стиль example-style.css на всех страницах, кроме главной:
function wpcource_dequeue_unused_assets() {
if ( !is_front_page() ) {
wp_dequeue_script( 'example-script' );
wp_dequeue_style( 'example-style' );
}
}
add_action( 'wp_enqueue_scripts', 'wpcource_dequeue_unused_assets', 100 );
Обратите внимание: в wp_dequeue_script и wp_dequeue_style нужно использовать точные идентификаторы, с которыми ресурсы регистрируются.
2. Использование плагинов оптимизации
Плагины, например, Clearfy Pro или Asset CleanUp, позволяют удобно управлять загрузкой CSS и JS через интерфейс, отключая их на отдельных страницах или для ролей пользователей.
Преимущество — простота и визуальный контроль, недостаток — дополнительная нагрузка на админку.
3. Ленивая загрузка и отложенная загрузка скриптов
Если скрипты нужны не сразу при загрузке страницы, можно отложить их загрузку до взаимодействия пользователя. Это не удалит файл, но уменьшит нагрузку вначале.
Пример отложенной загрузки скрипта:
function wpcource_defer_scripts( $tag, $handle ) {
if ( 'example-script' === $handle ) {
return str_replace( ' src', ' defer src', $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'wpcource_defer_scripts', 10, 2 );
Практический пример: удаляем неиспользуемый стиль и скрипт на странице контактов
Допустим, на странице контактов contact грузится слайдер, который там не нужен. Его стили и скрипты зарегистрированы как slider-style и slider-script.
Добавим в functions.php следующий код:
function wpcource_remove_slider_assets() {
if ( is_page( 'contact' ) ) {
wp_dequeue_style( 'slider-style' );
wp_dequeue_script( 'slider-script' );
}
}
add_action( 'wp_enqueue_scripts', 'wpcource_remove_slider_assets', 100 );
После этого на странице контактов не будут загружаться лишние файлы, что повысит скорость и уменьшит нагрузку.
Рекомендации и советы
- Всегда тестируйте сайт после отключения файлов на разных устройствах и браузерах.
- Для сложных тем и плагинов лучше использовать проверенные плагины для оптимизации, чтобы не потерять нужный функционал.
- Регулярно проверяйте загрузку ресурсов после обновлений тем и плагинов.
- Используйте инструменты анализа скорости, чтобы отслеживать эффект от оптимизаций.
Удаление неиспользуемых CSS и JS — важный шаг в оптимизации WordPress-сайта. Сочетание ручных методов через functions.php и удобных плагинов, например, Clearfy Pro, позволит добиться отличных результатов без потери функционала.