Одной из частых проблем, замедляющих загрузку сайта на 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, а для удобства — специализированные плагины. Не забывайте про объединение, минификацию и ленивую загрузку для максимальной оптимизации.