Вопрос оптимизации скорости загрузки сайта на WordPress часто сводится к уменьшению количества загружаемых ресурсов: скриптов и стилей. Многие плагины и темы подключают свои CSS и JS файлы на всех страницах, даже если они нужны только на определённых разделах. Это увеличивает объём загружаемых данных и замедляет работу сайта. В этой статье мы разберём, как эффективно удалить ненужные скрипты и стили, улучшить производительность и при этом не повредить функционал сайта.
Почему важно удалять ненужные скрипты и стили в WordPress
Каждый лишний CSS- или JS-файл — это дополнительный HTTP-запрос, увеличение общего веса страницы и, как следствие, замедление загрузки. Особенно это заметно на мобильных устройствах и при низкой скорости интернета. Удаление неиспользуемых скриптов и стилей позволяет:
- Уменьшить количество запросов к серверу.
- Снизить общий размер страницы.
- Улучшить показатели Core Web Vitals и SEO.
- Снизить нагрузку на сервер и клиент.
Кроме того, это помогает избежать конфликтов между разными скриптами и улучшить общий UX.
Как определить, какие скрипты и стили можно удалить
Первый шаг — понять, какие именно скрипты и стили подключаются на вашем сайте. Для этого можно использовать инструменты разработчика в браузере (обычно F12) и вкладку Network:
- Откройте любую страницу сайта и перейдите в Network.
- Обновите страницу, чтобы увидеть все загружаемые ресурсы.
- Обратите внимание на файлы с расширениями .js и .css, которые загружаются с вашего домена и сторонних ресурсов.
Если вы видите скрипты от плагинов, которыми не пользуетесь на данной странице, их стоит отключить. Также полезно использовать плагин Asset CleanUp или Perfmatters, которые предоставляют удобный интерфейс для отключения скриптов и стилей на уровне страниц.
Отключение скриптов и стилей вручную через functions.php
Чтобы удалить ненужные скрипты или стили, можно использовать хуки WordPress wp_dequeue_script и wp_dequeue_style. Важно делать это правильно, чтобы не повредить функционал сайта.
Пример функции для удаления стиля и скрипта от плагина Contact Form 7 на всех страницах, кроме страницы контактов:
function clearfy_dequeue_cf7_assets() {
if (!is_page('contacts')) {
wp_dequeue_script('contact-form-7');
wp_dequeue_style('contact-form-7');
}
}
add_action('wp_enqueue_scripts', 'clearfy_dequeue_cf7_assets', 100);В этом коде мы проверяем, что текущая страница не является страницей с формой, и если это так — отключаем скрипты и стили Contact Form 7, которые не понадобятся. Аналогично можно отключать активность других плагинов.
Как узнать идентификаторы скриптов и стилей
Чтобы отключить ресурс, нужно знать его handle — уникальное имя, с которым он зарегистрирован в WordPress. Узнать его можно:
- Посмотреть исходный код темы или плагина.
- Использовать плагин Query Monitor, который показывает зарегистрированные и подключённые скрипты и стили.
- Просмотреть список при помощи отладочного кода:
function clearfy_list_enqueued_assets() {
global $wp_scripts, $wp_styles;
echo '<h2>Зарегистрированные скрипты</h2><ul>';
foreach($wp_scripts->queue as $handle) {
echo '<li>' . esc_html($handle) . '</li>';
}
echo '</ul>';
echo '<h2>Зарегистрированные стили</h2><ul>';
foreach($wp_styles->queue as $handle) {
echo '<li>' . esc_html($handle) . '</li>';
}
echo '</ul>';
}
add_action('wp_footer', 'clearfy_list_enqueued_assets');Этот код выведет в футере сайта списки подключённых скриптов и стилей.
Использование плагинов для управления скриптами и стилями
Если вы не хотите писать код, можно использовать плагины, которые позволяют отключать скрипты и стили на страницах и постах через интерфейс:
- Asset CleanUp: Page Speed Booster — очень популярный плагин с удобным интерфейсом для выбора ресурсов, которые нужно отключить на определённых страницах.
- Perfmatters — платный плагин с расширенными функциями оптимизации, включая отключение скриптов, lazy loading и многое другое.
- Gonzales — плагин для более продвинутого управления загрузкой ассетов.
Эти инструменты полезны, если сайт большой и подключено много плагинов. Они дают визуальный контроль и снижают риск ошибок.
Удаление jQuery, если он не нужен
WordPress по умолчанию загружает jQuery, который нужен многим плагинам и темам, но если вы уверены, что на сайте нет jquery-зависимых скриптов, его можно отключить для ускорения загрузки:
function clearfy_deregister_jquery() {
if (!is_admin()) {
wp_deregister_script('jquery');
}
}
add_action('wp_enqueue_scripts', 'clearfy_deregister_jquery', 100);Однако будьте осторожны: если на сайте есть плагины или темы, использующие jQuery, они перестанут работать. Поэтому сначала проверьте зависимость, например, отключив jQuery на тестовом сайте.
Оптимизация подключения скриптов и стилей
Кроме удаления ненужных файлов, важно оптимизировать загрузку оставшихся:
- Отложенная загрузка (defer, async) — скрипты загружаются асинхронно и не блокируют рендеринг страницы.
- Объединение и минификация — уменьшение общего объёма файлов.
- Использование встроенных стилей — критические CSS вставляются inline, чтобы ускорить первый рендер.
Для реализации отложенной загрузки можно использовать плагин Async JavaScript или добавить атрибуты вручную:
function clearfy_add_defer_attribute($tag, $handle) {
// Список скриптов для defer
$scripts_to_defer = array('my-script-handle', 'another-script');
if (in_array($handle, $scripts_to_defer)) {
return str_replace(' src', ' defer src', $tag);
}
return $tag;
}
add_filter('script_loader_tag', 'clearfy_add_defer_attribute', 10, 2);Замените my-script-handle на нужный handle вашего скрипта.
Пример комплексного решения: удаляем CSS и JS Contact Form 7 на всех страницах кроме формы
Полный пример, который можно добавить в functions.php:
function clearfy_optimize_assets() {
if (!is_page('contacts')) {
wp_dequeue_style('contact-form-7');
wp_deregister_style('contact-form-7');
wp_dequeue_script('contact-form-7');
wp_deregister_script('contact-form-7');
}
}
add_action('wp_enqueue_scripts', 'clearfy_optimize_assets', 100);Этот код не только отключит загрузку скриптов и стилей, но и зарегистрирует их как неактивные, что помогает избежать неожиданного повторного подключения.
Советы по безопасному удалению скриптов и стилей
1. Всегда тестируйте изменения на staging-сайте или локальной копии перед внесением на боевой сайт.
2. Проверяйте работу функционала после отключения каждого скрипта/стиля.
3. Используйте Query Monitor для диагностики проблем с подключением ресурсов.
4. Сохраняйте резервные копии файлов перед изменениями.
Заключение
Удаление ненужных скриптов и стилей — мощный инструмент для ускорения сайта на WordPress. Используя сочетание ручного кода и проверенных плагинов, вы сможете значительно повысить производительность, улучшить UX и SEO-показатели. Важно подходить к этому процессу без спешки, тщательно проверяя каждое изменение.