Как избежать проблем с перемещением JS скриптов в WordPress

Автор: Виктор Попов | Опубликовано: 09.02.2026

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

Почему важно правильно перемещать JS скрипты в WordPress

Перемещение скриптов из <head> в футер позволяет:

Уменьшить время блокировки рендеринга страницы;
Повысить скорость загрузки видимой части сайта (First Contentful Paint);
Снизить нагрузку на браузер при первоначальной загрузке.

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

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

В WordPress для подключения скриптов используется функция wp_enqueue_script(). Для перемещения скрипта в футер нужно указать параметр $in_footer = true. Рассмотрим пример функции с префиксом wpcorp_:

function wpcorp_enqueue_scripts() {
    // Подключаем jQuery в футере
    wp_enqueue_script('jquery', false, array(), null, true);

    // Подключаем пользовательский скрипт, зависящий от jQuery, в футере
    wp_enqueue_script('wpcorp-custom-js', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'wpcorp_enqueue_scripts');

В этом примере скрипт custom.js будет загружен в подвал страницы, после jQuery, что предотвращает ошибки, связанные с отсутствием зависимостей.

Особенности порядка загрузки и зависимостей

Обязательно указывайте зависимости в параметре $deps функции wp_enqueue_script(). Это гарантирует, что все необходимые скрипты будут загружены до вашего кода.

Если забыть указать зависимости, скрипт может начать выполняться слишком рано, что вызовет ошибки.

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

Чтобы убедиться, что скрипты перенесены в подвал, используйте инструменты разработчика браузера:

Откройте вкладку Network и отфильтруйте по типу js;
Проверьте расположение тега <script> в исходном коде страницы — он должен находиться внизу, перед закрывающим тегом </body>;
Если скрипты остались в <head>, проверьте, не подключаются ли они с $in_footer = false или через прямое вставление в шаблоны.

Типичные ошибки при перемещении скриптов и как их избежать

Ошибка 1: Скрипты начинают работать раньше загрузки DOM

Если скрипты загрузить в футере, но в них нет проверки на готовность DOM, возможны ошибки. Чтобы избежать этого, оберните код в слушатель DOMContentLoaded или используйте jQuery ready:

document.addEventListener('DOMContentLoaded', function() {
    // Ваш код
});

// Или с jQuery
jQuery(function($) {
    // Ваш код
});

Ошибка 2: Нарушение порядка зависимостей

Если скрипт зависит от jQuery, а jQuery подключён позже, будет ошибка. Всегда указывайте зависимости:

wp_enqueue_script('my-script', 'path/to/script.js', array('jquery'), null, true);

Ошибка 3: Конфликты с другими плагинами

При перемещении скриптов некоторые плагины могут перестать работать, если они ожидают скрипты в <head>. Решение — проверять документацию плагинов и тестировать сайт после изменений.

Пример использования плагина Clearfy для управления скриптами

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

После установки Clearfy можно в разделе оптимизации включить отложенную загрузку JS и перемещение скриптов в футер, что значительно ускорит сайт без ручного вмешательства.

Заключение по теме перемещения JS скриптов

Перемещение JavaScript в футер — эффективный способ оптимизации загрузки страниц в WordPress, но требует аккуратного подхода. Используйте правильные хуки, указывайте зависимости, проверяйте загрузку и учитывайте особенности плагинов. Если хотите ускорить работу без кода — попробуйте Clearfy.