Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 14.06.2024)
524060
солдат
359
самолетов
326
вертолетов
7936
танков
15234
ББМ
13818
артиллерия
849
ПВО
1101
РСЗО
18854
машин
28
корабли и катера
Как переместить файлы JavaScript в футер сайта на WordPress
Опубликовано

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

 

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *