На многих сайтах WordPress с течением времени накапливаются избыточные или дублирующиеся файлы JavaScript и CSS. Это происходит из-за установки и удаления плагинов, тем, а также из-за неэффективной загрузки ресурсов. Такие избитые скрипты и стили значительно замедляют сайт, увеличивают время отклика и негативно влияют на пользовательский опыт. В этой статье мы подробно разберём, как выявить и удалить избитые JS и CSS в WordPress, используя специализированные методы и плагины, а также собственные функции.
Почему важно удалять избитые JS и CSS — влияние на скорость сайта
Каждый дополнительный файл JavaScript или CSS увеличивает количество запросов к серверу и общий размер загружаемых данных. Если эти файлы не нужны или дублируются, они создают лишнюю нагрузку. Например, плагин может подключать jQuery, а тема — свою версию, что приводит к конфликтам и повторной загрузке одной и той же библиотеки.
Удаление избитых скриптов и стилей помогает:
- Сократить время загрузки страниц;
- Уменьшить количество HTTP-запросов;
- Избежать конфликтов между скриптами;
- Повысить рейтинг в поисковых системах за счёт скорости;
- Улучшить пользовательский опыт.
Поэтому регулярный аудит и очистка ассетов — обязательная часть технического обслуживания WordPress.
Как определить, какие JS и CSS файлы лишние — инструменты и методы
Первый шаг — понять, какие именно файлы загружаются и нужны ли они на странице. Для этого пользуемся:
- Инструментами разработчика браузера (Chrome DevTools, Firefox Inspector). Вкладка Network покажет все загружаемые файлы, их размер и время загрузки.
- Плагинами для анализа ассетов: например, Asset CleanUp или Remove Unused CSS. Они позволяют увидеть список подключаемых скриптов и стилей и отключить их на определённых страницах.
- Google PageSpeed Insights и GTmetrix — сервисы, которые укажут на проблемы с загрузкой CSS/JS и дадут рекомендации.
Кроме того, можно использовать специальные плагины для мониторинга, которые показывают, какие ассеты грузятся на каких страницах, например, wpspeed_asset_check() — наша собственная функция для дебага, которую мы рассмотрим ниже.
Практические способы удаления избитых JS и CSS
Отключение ненужных стилей и скриптов через functions.php
Самый надёжный метод — отключать загрузку ассетов программно. Например, если на странице контактов не нужен слайдер, можно отключить его скрипты:
function wpspeed_dequeue_scripts() {
if ( !is_page('contacts') ) return;
wp_dequeue_script('slick-slider');
wp_dequeue_style('slick-style');
}
add_action('wp_enqueue_scripts', 'wpspeed_dequeue_scripts', 100);Здесь wp_dequeue_script и wp_dequeue_style отключают скрипты/стили по хендлерам. Нужно знать, как они называются — это можно посмотреть в коде темы или плагина.
Использование плагина Asset CleanUp для точечной оптимизации
Asset CleanUp позволяет через интерфейс WordPress отключать загрузку CSS и JS на выбранных страницах и постах. Это удобно, если не хочется править код напрямую. Плагин показывает полный список подключенных ассетов и даёт возможность отключать их выборочно.
Чтобы использовать:
- Установите и активируйте плагин.
- Перейдите на страницу редактирования нужного поста или страницы.
- Ниже будет блок Asset CleanUp с перечнем стилей и скриптов.
- Отключите ненужные файлы, проверьте работу сайта.
Написание кастомной функции для анализа ассетов — пример кода
Для более глубокого аудита можно добавить в functions.php такую функцию:
function wpspeed_asset_check() {
global $wp_scripts, $wp_styles;
echo '<!-- Загруженные скрипты: -->';
foreach( $wp_scripts->queue as $handle ) {
echo '<!-- ' . esc_html( $handle ) . ': ' . esc_url( $wp_scripts->registered[$handle]->src ) . ' -->';
}
echo '<!-- Загруженные стили: -->';
foreach( $wp_styles->queue as $handle ) {
echo '<!-- ' . esc_html( $handle ) . ': ' . esc_url( $wp_styles->registered[$handle]->src ) . ' -->';
}
}
add_action('wp_footer', 'wpspeed_asset_check');Эта функция выводит в HTML-комментариях список всех скриптов и стилей, загружаемых на странице. Это очень удобно, чтобы понять, какие файлы грузятся и откуда.
Советы по предотвращению избитых JS и CSS при разработке
Чтобы минимизировать появление избитых ассетов в будущем, придерживайтесь следующих рекомендаций:
- Используйте child-тему, чтобы не менять напрямую тему и контролировать подключение файлов.
- Загружайте скрипты и стили только там, где они действительно нужны, используя условные теги WordPress.
- Избегайте установки большого количества плагинов с похожим функционалом, чтобы не дублировать библиотеки.
- Оптимизируйте и объединяйте CSS и JS с помощью плагинов кэширования и оптимизации (например, WP Rocket, Autoptimize), но внимательно проверяйте совместимость.
Заключение: регулярный аудит и очистка ассетов как часть поддержки сайта
Удаление избитых JS и CSS — не разовая задача, а постоянный процесс. Особенно важно следить за этим после установки новых плагинов или изменений в теме. Используйте описанные методы и инструменты, чтобы поддерживать ваш WordPress-сайт быстрым и отзывчивым.
Если вы хотите автоматизировать этот процесс, рекомендуем комбинировать ручную оптимизацию с плагинами, а также периодически запускать собственные функции аудита, такие как wpspeed_asset_check().