Оптимальный порядок загрузки скриптов и стилей в WordPress для улучшения производительности

Автор: Егор Сорокин | Опубликовано: 21.12.2025

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

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

Когда браузер загружает страницу, он последовательно обрабатывает все CSS и JS файлы. Если стили загружаются позже, чем контент, страница может «мигать» — сначала отображаться без стилей, а потом с ними. Аналогично, если скрипты зависят друг от друга, но загружаются в неправильном порядке, возникают ошибки JS и функционал ломается.

Кроме того, неоптимальное подключение вызывает блокировки рендеринга, увеличивает время загрузки и снижает оценку по Core Web Vitals.

Поэтому важно не просто зарегистрировать стили и скрипты, а сделать это с учетом зависимостей, версии, и места подключения (в <head> или перед закрывающим тегом </body>).

Как правильно подключать скрипты и стили в WordPress

В WordPress для подключения используется функция wp_enqueue_script(). Она позволяет указать зависимые файлы, версию и место подключения.


Пример правильного подключения скрипта с зависимостью от jQuery:
function wpclass_enqueue_scripts() {
    // Подключаем стиль
    wp_enqueue_style('wpclass-style', get_template_directory_uri() . '/css/style.css', array(), '1.0');

    // Подключаем jQuery (встроенный в WP)
    wp_enqueue_script('jquery');

    // Подключаем кастомный скрипт, зависящий от jQuery
    wp_enqueue_script('wpclass-custom', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'wpclass_enqueue_scripts');
Обратите внимание на последний параметр в wp_enqueue_script — true. Он говорит, что скрипт нужно подключать перед закрывающим тегом </body>, а не в <head>. Это уменьшает блокировку рендеринга страницы.

Управление зависимостями и приоритетом загрузки
Если у вас есть несколько скриптов, которые зависят друг от друга, правильно указывайте зависимости во втором параметре в виде массива.
Например, плагин Clearfy Pro позволяет оптимизировать подключение скриптов — отключать ненужные, переносить в футер, объединять. Это помогает управлять порядком без правки кода.
Самостоятельно можно убирать ненужные скрипты с помощью wp_dequeue_script() и wp_deregister_script(), а также контролировать, где именно подключать стили и скрипты.

Пример отключения скрипта плагина
function wpclass_disable_plugin_script() {
    if (is_front_page()) {
        wp_dequeue_script('plugin-script-handle');
        wp_deregister_script('plugin-script-handle');
    }
}
add_action('wp_print_scripts', 'wpclass_disable_plugin_script', 100);
Этот код отключит скрипт plugin-script-handle на главной странице, что уменьшит нагрузку и ускорит загрузку.

Оптимизация загрузки стилей
Стили тоже нужно подключать с умом. Если вам нужно подключить CSS только на определенных страницах, используйте условные теги.
Например:
function wpclass_enqueue_conditional_style() {
    if (is_page('contact')) {
        wp_enqueue_style('wpclass-contact-style', get_template_directory_uri() . '/css/contact.css', array(), '1.0');
    }
}
add_action('wp_enqueue_scripts', 'wpclass_enqueue_conditional_style');
Так вы не будете грузить лишние стили на всех страницах.

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

Пример добавления атрибута defer
function wpclass_add_defer_attribute($tag, $handle) {
    $scripts_to_defer = array('wpclass-custom'); // хендлы скриптов для defer
    if (in_array($handle, $scripts_to_defer)) {
        return str_replace(' src', ' defer src', $tag);
    }
    return $tag;
}
add_filter('script_loader_tag', 'wpclass_add_defer_attribute', 10, 2);
Это позволит браузеру продолжать парсинг HTML без ожидания загрузки скрипта.

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

Подведение итогов: чек-лист оптимального подключения

Всегда используйте wp_enqueue_script и wp_enqueue_style, не подключайте файлы вручную через <script> или <link>.
Указывайте зависимости, чтобы избежать конфликтов.
Подключайте скрипты в футере ($in_footer = true), если это возможно.
Отключайте ненужные скрипты и стили на страницах, где они не нужны.
Используйте defer или async для снижения блокировки рендеринга.
Используйте профессиональные плагины, например, Clearfy Pro, для автоматической оптимизации.

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