Оптимизация загрузки библиотек в WordPress: уменьшение веса и ускорение сайта

Почему важно оптимизировать загрузку CSS и JS в WordPress

Большинство современных тем и плагинов WordPress подключают множество стилей и скриптов, которые не всегда нужны на каждой странице. Это увеличивает вес страницы, замедляет время загрузки и ухудшает пользовательский опыт. Особенно актуальна эта проблема для мобильных пользователей с медленным интернетом.

Оптимизация загрузки CSS и JS позволяет отключить ненужные библиотеки, загружать их асинхронно или отложенно, а также объединять и минифицировать файлы. В итоге сайт становится легче, быстрее и лучше ранжируется поисковыми системами.

В этой статье мы разберём, как в WordPress контролировать и оптимизировать подключение стилей и скриптов, используя примеры кода и проверенные плагины.

Как определить, какие библиотеки загружаются на сайте

Первым шагом является анализ подключаемых CSS и JS файлов. Для этого можно:

• Открыть исходный код страницы (Ctrl+U) и посмотреть теги <link> и <script>.
• Использовать инструменты разработчика в браузере (F12) во вкладке Network, чтобы увидеть все загружаемые ресурсы.
• Установить плагин Query Monitor, который показывает все зарегистрированные и загруженные скрипты и стили на каждой странице.

После того, как вы поняли, какие библиотеки грузятся, можно переходить к их оптимизации.

Контроль загрузки CSS и JS через функции WordPress

WordPress использует функции wp_enqueue_style и wp_enqueue_script для подключения стилей и скриптов. Чтобы оптимизировать загрузку, можно деактивировать ненужные библиотеки и добавить свои условия загрузки.

Отключение ненужных скриптов и стилей

Например, если ваша тема или плагин подключает библиотеку jQuery UI, а она не нужна на всех страницах, можно отключать её на определённых страницах. Пример функции на wpaddons.ru:

function wpaddons_dequeue_scripts() {
  if (!is_page('contact')) { // Загружаем jQuery UI только на странице контактов
    wp_dequeue_script('jquery-ui');
    wp_deregister_script('jquery-ui');
  }
}
add_action('wp_print_scripts', 'wpaddons_dequeue_scripts', 100);

Так мы экономим трафик на страницах, где эта библиотека не нужна.

Подключение скриптов и стилей только там, где нужно

Лучше всего подключать скрипты и стили в тех шаблонах и условиях, где они действительно необходимы. Например, если у вас есть функционал слайдера, подключайте его скрипты только на страницах с слайдером:

function wpaddons_enqueue_slider_scripts() {
  if (is_page_template('template-slider.php')) {
    wp_enqueue_style('slick-css', get_template_directory_uri() . '/css/slick.css');
    wp_enqueue_script('slick-js', get_template_directory_uri() . '/js/slick.min.js', array('jquery'), null, true);
  }
}
add_action('wp_enqueue_scripts', 'wpaddons_enqueue_slider_scripts');

Асинхронная и отложенная загрузка скриптов в WordPress

Для ускорения загрузки страницы важно не только уменьшить количество файлов, но и оптимизировать способ их загрузки. Скрипты, которые не влияют на первичную отрисовку, можно загрузить асинхронно или отложенно.

С помощью фильтра script_loader_tag можно добавить атрибуты async или defer к подключаемым скриптам:

function wpaddons_add_async_attribute($tag, $handle) {
  $scripts_to_async = array('slick-js');
  if (in_array($handle, $scripts_to_async)) {
    return str_replace(' src', ' async src', $tag);
  }
  return $tag;
}
add_filter('script_loader_tag', 'wpaddons_add_async_attribute', 10, 2);

Этот код добавит атрибут async к скрипту с хендлом slick-js. Аналогично можно использовать defer.

Минификация и объединение CSS и JS файлов — плагины для оптимизации

Для комплексной оптимизации стоит использовать плагины, которые умеют минифицировать и объединять файлы, а также оптимизировать загрузку скриптов.

Рекомендуемые плагины

• Autoptimize — популярный плагин, который объединяет, минифицирует и оптимизирует CSS, JS и HTML. Он прост в настройке и хорошо совместим с большинством тем.
• Asset CleanUp — позволяет отключать ненужные скрипты и стили на отдельных страницах, что дает точечный контроль загрузки.
• WP Rocket — комплексный плагин кэширования с функциями оптимизации загрузки файлов.

Пример настройки Autoptimize

После установки и активации плагина зайдите в Настройки > Autoptimize и включите опции:

• Оптимизировать JavaScript
• Оптимизировать CSS
• Объединять файлы

Также можно включить «Отложенную загрузку JavaScript» для ускорения отображения страницы.

Как создать свой фильтр для отключения стилей плагинов

Если плагин подключает свои стили на всех страницах, часто бывает полезно отключить их там, где они не нужны, чтобы не перегружать сайт. Для этого можно использовать следующий код:

function wpaddons_dequeue_plugin_styles() {
  if (!is_singular('product')) { // например, для WooCommerce стилей
    wp_dequeue_style('woocommerce-layout');
    wp_dequeue_style('woocommerce-smallscreen');
    wp_dequeue_style('woocommerce-general');
  }
}
add_action('wp_enqueue_scripts', 'wpaddons_dequeue_plugin_styles', 99);

В этом примере стили WooCommerce отключаются на всех страницах, кроме страниц товаров.

Заключение: комплексный подход к оптимизации загрузки библиотек

Для реального ускорения сайта на WordPress нужно комбинировать несколько подходов:

1. Анализировать, какие библиотеки и стили грузятся.
2. Отключать ненужные скрипты и стили на страницах, где они не нужны.
3. Подключать ресурсы только в нужных условиях и шаблонах.
4. Использовать атрибуты async и defer для отложенной загрузки скриптов.
5. Применять плагины для минификации, объединения и оптимизации CSS и JS.

Используя эти техники, вы заметно уменьшите вес страниц и ускорите загрузку сайта, что повысит комфорт пользователей и улучшит SEO.