Как подключить скрипты в footer в Wordpress?

Question

[Anton Essential]

Добрый день, пытаюсь оптимизировать блог на wp, google speedtest ругается на то что родные скрипты подключаются в хед,

http://мойсайт/…-includes/js/jquery/jquery.js?ver=1.11.2

Скажите пожалуйста как можно их убрать в футер ?

Answer 1

[Иван]

В WordPress лучше всего подключать через function.php таким образом

add_action( 'wp_enqueue_scripts', 'true_include_myscript' );
function true_include_myscript() {
    wp_enqueue_script( 'themename', get_stylesheet_directory_uri() . '/js/jquery.polaris.js', array('jquery'), null, true );
}

Значения true если нужно отобразить подключения в футере и false если в хедере.

Answer 2

[Игорь Воротнёв]

Все верно написал Иван, только это справедливо для всего, кроме нескольких встроенных скриптов. В том числе и jQuery, о котором речь. С ним там все заметно сложнее - сначала надо его deregister, потом register снова, но уже в подвал. Но, как написал Алексей Курилкин , трогать его не стоит.

jQuery должен быть в шапке, а Google PageSpeed - тот еще параноик. Не стоить заморачиваться с этим ради циферок выше 96. А если у вас меньше - то об этом вообще еще очень рано беспокоиться, займитесь более важным.

Comments

[Anton Essential]

Возможно вы мне подскажите тогда , скорость 47, по спид тесту пишет: включить гзип я включил проверил работает на 100 процентов а гугл почему-то пидалит, так же ругается на кэш браузера я добавил дериктивы в htaccess гугл опять пидалит, и вообще я его не понимаю, просит меня Оптимизируйте работу CSSV, все css ки я минифицировал что он еще хочет не понятно, пишет сократите css я его минифицирую перезаливаю сжатый так оценка падает еще больше до 30 и появляются новый бонусы типо не сжаты картинки хотя они давно сжаты, а заливаю назад не сжаты css оценка поднимается до 47 и пропадают месаджи о картинках но опять появляется месадж о том что нужно сжать css, бред какой-то !

[Игорь Воротнёв]

Anton Essential: > включить гзип
где и как включили? и что значит гугл "пидалит"?
> ругается на кэш браузера я добавил дериктивы в htaccess
подробнее, что ругалось, что добавили, что ругается дальше
и тд.

Answer 3

[Alex Rusin]

По поводу подключения jQuery в футере. Сама по себе идея плохая, так как в теле документа выше могут находиться скрипты, требующие подключенного jQuery.

На хабре как-то встретил неплохое решение, требущее, однако, небольшой доработки:

1. Следующей функцией, добавляемой в functions.php активной темы, переназначаем скрипты и стили в футер:

function footer_enqueue_scripts(){
	remove_action('wp_head','wp_print_scripts');
	remove_action('wp_head','wp_print_head_scripts',9);
	remove_action('wp_head','wp_enqueue_scripts',1);
	add_action('wp_footer','wp_print_scripts',5);
	add_action('wp_footer','wp_enqueue_scripts',5);
	add_action('wp_footer','wp_print_head_scripts',5);
}
add_action('after_setup_theme','footer_enqueue_scripts');

2. Затем в head добавляем следующий скрипт:

<script>(function(w,d,u){w.readyQ=[];w.bindReadyQ=[];function p(x,y){if(x=="ready"){w.bindReadyQ.push(y);}else{w.readyQ.push(x);}};var a={ready:p,bind:p};w.$=w.jQuery=function(f){if(f===d||f===u){return a}else{p(f)}}})(window,document)</script>

3. Затем после wp_footer(); добавляем:

<script>(function($,d){$.each(readyQ,function(i,f){$(f)});$.each(bindReadyQ,function(i,f){$(d).bind("ready",f)})})(jQuery,document)</script>

В результате получаем jQuery, подключенный в футере, но находящийся в хэде. Google Page Speed Insights радуется, скорость повысилась, но тут и проблема: этим решением перезнаначается все, включая стили, в результате пользователь получает страницу на долю секунды (в зависимости от скорости соединения) без подключенных стилей. Так что, с визуальной точки зрения, лучше переподключить файл стилей в head.

Answer 4

[Алексей Курилкин]

библиотеку jquery убирать в футер не рекомендую. Т.к. все скрипты, которые работают на JQ, но до которых не размещена сама библиотека (пример которой в описании) работать не будут. Рекомендую использовать асинхронное выполнение таких скриптов:

С появлением стандарта HTML5 появилась возможность асинхронной загрузки скриптов, что существенно увеличивает скорость загрузки страницы. Использовать этот вариант проще простого — добавьте async или defer в описание скрипта:

<script async src="скрипт_1" type="text/javascript"></script>
<script defer src="скрипт_2" type="text/javascript"></script>

Убирать в футер, повторюсь не рекомендую.

Comments

[ProstiAleks]

Через async пробовал, в итоге не стала работать библиотека.

[Alex Rusin]

Алексей Курилкин , а как вы применяете асинхронную загрузку к файлам, подключаемым хуком wp_head(); ?

[Алексей Курилкин]

Alex Rusin, я не применяю асинхронную загрузку к файлам, подключаемым хуком wp_head(); :) Вообще мало работаю с WP в последнее время, там есть какие-то тонкости?