Как переместить файлы 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.

Tags: WordPress

Recent Posts

Инструкция по скачиванию видео с сервиса TikTok (бесплатно и без watermark)

Если вы еще не слышали о TikTok, тогда рекомендуем вам сначала ознакомиться с этим кратким… Read More

17/09/2020

Что есть в бюджетном ноутбуке – на какие характеристики рассчитывать?

Прошли те времена, когда приличный ноутбук стоил от 1000 долларов. Сегодня можно купить довольно неплохой… Read More

16/09/2020

Что лучше – цифровое телевидение Т2 или интернет-телевидение?

Современную жизнь невозможно представить без телевидения. Оно позволяет узнавать о событиях в Украине и мире,… Read More

02/09/2020

Гипоаллергенная подушка. Для чего она важна?

Сейчас найдется мало людей, у которых нет аллергии на продукты или пыльцу растений. Считается, что… Read More

28/08/2020

Футбольный Инстаграм: что нового у топовых футболистов

Некоторые известные футболисты тщательно скрывают свои личную жизнь, а другие - активно постят фотографии с… Read More

24/08/2020

Виды и типы компрессионных чулков

Изделия называют компрессионными, когда их применяют для лечения, а также профилактики нарушений кровотока в нижних… Read More

22/08/2020