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

Недавно один из наших читателей спросил, как можно переместить JavaScript в футер в WordPress для того, чтобы увеличить количество баллов в Google page speed. Когда-то мы уже рассказывали о том, как правильно добавлять JavaScript и CSS стили в WordPress. В сегодняшней статье мы покажем вам как переместить avaScript в футер WordPress, чтобы ускорить загрузку страниц вашего сайта, а также повысить баллы в Google page speed.

Преимущества перемещения скриптов в футер

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

Также это улучшит показатели при тестировании сайта в Google page speed или Yslow. Google и другие поисковые системы сейчас стали учитывать скорость загрузки страниц в качестве одного из факторов ранжирования поисковой выдачи. Это означает, что чем быстрее ваш сайт будет открываться, тем выше он будет в результатах поиска.

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

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

Для того, чтобы продемонстрировать это, мы добавим небольшой JavaScript в тему WordPress. Сохраните свой WordPress в файле .js и поместите этот .js файл в папке js своей темы. Если же в вашей теме нет соответствующей директории, тогда создайте ее. После того, как вы поместите туда файл скрипта, отредактируйте свой файл functions.php темы и добавьте туда следующий код:

function wpb_adding_scripts() {
wp_register_script('my-amazing-script', get_template_directory_uri() . '/js/my-amazing-script.js','','1.1', true);
wp_enqueue_script('my-amazing-script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

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

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

Для того, чтобы добавить этот скрипт в футер либо вниз страницы WordPress, все, что вам нужно сделать, это установить параметр $in_footer в значение true.

Также мы использовали функцию get_template_directory_uri(), которая возвращает ссылку на расположение директории с шаблонами. Эта функция должна использоваться для подгрузки и регистрации скриптов и стилей в темах WordPress. Для плагинов мы будем использовать функцию plugins_url().

Проблема:

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

Поиск исходного кода JavaScript

Открываем свой сайт в веб-браузере и просматриваем исходный код. Вы увидите ссылку на файл JavaScript, которая указывает на его расположение на сайте. Например, скриншот ниже сообщает нам, что наши скрипты принадлежат плагину под названием ‘test-plugin101’. Файл скрипта расположен в папке js.

finding-source[1]

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

Регистрация и загрузка скриптов

После того, как вы нашли плагин или тему, которая добавляет код в секцию header, следующим шагом будет поиск места, где плагин вызывает файл. В PHP файле темы или же плагина вы увидите вызов такого файла .js.

Если плагин или тема уже использует правильную загрузку для добавления файла JavaScript, то все, что вам понадобиться сделать, это изменить функцию wp_register_script в своем плагине или теме и добавить true для параметра $in_footer. Вот так:

wp_register_script('script-handle', plugins_url('js/script.js'  , __FILE__ ),'','1.0',true);

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

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

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

По всем вопросам и отзывам просьба писать в комментарии ниже.

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

VN:F [1.9.22_1171]
Rating: 2.9/5 (11 votes cast)

Об авторе ADv

Занимаюсь разработкой сайтов и магазинов на WordPress. Оказываю платные помощь и консультации. Skype: advokat_b
Scroll To Top