Как переместить файлы JavaScript в футер сайта на WordPress

Ранее мы писали о том, как правильно подключать JavaScript и стили CSS в WordPress. А в этой статье мы покажем вам, как правильно переместить файлы JavaScript в нижний колонтитул (футер) сайта на CMS WordPress. Это позволит улучшить время загрузки вашего сайта и скорость отображения страницы, ведь файлы скриптов в секции HEAD блокируют загрузку страницы, пока те полностью не загрузятся.

 

 

Преимущества от переноса файлов JavaScript в футер

JavaScript – это язык программирования на стороне клиента. Он запускается и выполняется веб-браузером пользователя, а не на стороне сервера. Когда файлы JavaScript размещаются в шапке сайта, браузеры будут обрабатывать JavaScript перед загрузкой остальной части страницы сайта, что скажется на скорости этой загрузки. А когда скрипты размещены в подвале сайта, сервер быстрее будет обрабатывать и показывать страницу, а после этого уже браузер пользователя будет выполнять файлы JavaScript. Поскольку весь рендеринг на стороне сервера уже будет выполнен, файлы JavaScript будут загружаться в фоновом режиме, что ускорит общую загрузку страницы.

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

 

 

Правильный способ подключения скриптов в WordPress

WordPress имеет мощную систему очередности загрузки, которая позволяет разработчикам добавлять скрипты в очередь и загружать их по мере необходимости. Правильное выполнение скриптов (а также CSS-стилей) может значительно повысить скорость загрузки страницы.

Мы уже рассматривали правильный способ подключения скриптов ВордПресс, приведем лишь часть кода из файла functions.php активной темы:

 

function podklyucheniye_scriptov(){
  // Регистрируем скрипт в системе (для темы):
  wp_register_script( 'nekiy-script', get_template_directory_uri() . '/js/nekiy-script.js', array( 'jquery' ), '25052018', true );
  // После регистрации мы можем ставить в очередь вызов скрипта для любого плагина или темы:
  wp_enqueue_script( 'nekiy-script' );
}
add_action( 'wp_enqueue_scripts', 'podklyucheniye_scriptov' );

 

В этом коде мы использовали функцию wp_register_script(). Эта функция имеет следующие параметры:

<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>

 

Чтобы переместить подключение скрипта в футер страницы сайта на WordPress, все, что вам нужно сделать, — установить для 5-го параметра $in_footer значение true.

 

 

Возможные проблемы при перемещении скриптов в футер:

Практически все плагины WordPress добавляют свои собственные файлы JavaScript на страницы внутри <head> или даже внутри тела страницы. Чтобы переместить эти скрипты в нижнюю часть сайта, вам нужно будет отредактировать файлы плагинов, в которых происходит подключение скриптов, и правильно переместить скрипты в футер.

Как найти файлы плагинов, в которых происходит подключение скриптов? Вы можете использовать функцию поиска по тексту в файловых менеджерах типа Total Commander. Достаточно искать словосочетание «wp_register_script» в папке /wp-content/plugins/. Если вы нашли файл плагина, в котором используется подключение JavaScript, то все, что вам нужно сделать, это изменить функцию wp_register_script и добавить true (или изменить с false) для 5-го параметра $in_footer.

Если плагин или тема добавляют JavaScript в тело контента, вам нужно скопировать и перенести исходный код скрипта в отдельный .js файл. После этого используйте функцию wp_register_script(), как показано выше, чтобы подключить этот файл в футере.

Важно понимать, что когда вы будете обновлять плагины, ваши изменения будут утеряны. Лучший способ решить эту проблему – отменить регистрацию скрипта (с помощью функции wp_deregister_script) и затем повторно зарегистрировать его из файла functions.php вашей активной темы.

 

 

 

Мы надеемся, что эта статья помогла вам переместить файлы JavaScript в футер и, тем самым,  улучшить скорость загрузки страниц вашего сайта на WordPress.

 

Recent Posts

Использование запросов WP_Query в WordPress — часть 3 (основные функции класса)

Этот урок является продолжением серии о работе с запросами в базу данных WP_Query в ВордПресс.…

1 день ago

Григорий Сковорода

Как лекарство не всегда приятно, так и истина бывает сурова Григорий Сковорода  

4 дня ago

Использование запросов WP_Query в WordPress – часть 2 (обзор цикла)

Этот урок является продолжением серии о работе с запросами к базе данных WP_Query в ВордПресс.…

5 дней ago

5 плагинов, которые сделают ваш WordPress-сайт идеальным в 2025 году

Без плагинов WordPress – просто чистый лист. Чтобы сайт работал быстро, был безопасным и привлекательным,…

6 дней ago

Использование запросов WP_Query в WordPress в теории и примерах — часть 1 (введение)

Класс WP_Query — это мощный инструмент, с помощью которого можно максимально контролировать отправку запросов к…

1 неделя ago

Марк Аврелий

Твои мысли становятся твоей жизнью Марк Аврелий  

1 неделя ago