С небес на землю, или Как перенести скрипты вниз, в подвал сайта

Доброго времени суток, друзья, гости и случайно заглянувшие на огонек посетители моего кошачьего блога!

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

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

Зачем переносить скрипты вниз, в подвал (футер) сайта

Прежде чем что-то делать, нужно ясно отдавать себе отчет в том, зачем мы это делаем и что нам это даст. Так зачем же опускать скрипты как можно ниже на странице, откладывая их загрузку?

Дело в том, что скрипт (в том понимании, в котором мы сейчас о нем говорим) — это JavaScript-код. JavaScript — это язык программирования, исполняемый в браузере, то есть работающий на стороне пользователя.

Теперь представим, что происходит, когда пользователь открывает страничку нашего сайта, в хедере которой расположено несколько (а хоть и один!) JS-скрипт.

На стороне сервера отрабатывает весь php-код, формирует единый html-документ — исходный код страницы — который и начинает передаваться в браузер. Код скрипта также встраивается в этот документ в его начале.

Браузер начинает обрабатывать полученную информацию. Почти сразу же натыкается на JS-код, останавливает загрузку страницы и начинает этот код исполнять. Затем продолжает загрузку, пока опять не встретит очередной скрипт.

Главное здесь то, что выполнение скриптов в самом начале никому не нужно — пользователь же еще не увидел страницу даже, браузер ведь еще не успел ее отобразить. К примеру, благодаря скриптам работает кнопка «Вверх». Но зачем выполнять скрипт для нее в начале загрузки, если сама кнопка, ее визуальное оформление все равно вызывается в футере?

А страница загружалась бы куда быстрее, если бы все скрипты были внизу: браузер быстро отобразил весь html-код, а уж в последний момент, пока пользователь осмотрится и сообразит, куда бы ему еще нажать, выполнил все скрипты.

Именно поэтому имеет смысл все скрипты переносить как можно ниже, ближе к концу страницы, в ее футер.

Как перенести скрипты вниз

Способов, друзья мои, здесь несколько. И для разных скриптов подойдут разные варианты.

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

Увидеть все скрипты, которые подключаются в заголовке вашего сайта, достаточно просто: достаточно открыть исходный код вашей страницы и просмотреть самое его начало. Все подключенные скрипты вы легко опознаете по тегу <script>. Вот как это выглядело  у меня:

Теперь начинается самое интересное. Начинаем переносить скрипты.

Шаг первый. «Вырезать — Вставить»

Первое, что необходимо сделать, это открыть на редактирование файл header.php вашей темы оформления и внимательно исследовать его на предмет расположенных там скриптов — искать нужно именно те строки, которые вы видели в исходном коде.

Если такая строка обнаружена, то вы ее аккуратно, со всеми тегами вырезаете из кода, затем открываете файл footer.php и вставляете ее в него перед закрывающимся тегом </body>.

После каждой такой операции обязательно проверяйте сайт на работоспособность!

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

Переносим скрипты в footer.php, правя файл functions.php

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

При работе со скриптами используются несколько функций. Нас в данный момент будут интересовать две из них: wp_register_script — эта функция регистрирует скрипты в теме, и wp_enqueue_script — функция, подключающая уже зарегистрированные (то есть «известные» WordPress до этого файлы JS).

Чтобы понять принцип нашей дальнейшей работы, немного поговорим об этих функциях.

Напрягаем мозг, вспоминаем курс математики — функция всегда принимает некоторые аргументы. В php ничего нового — обе эти функции принимают определенный набор аргументов.

wp_enqueue_script( $handle, $src = false, $deps = array(), $ver = false, $in_footer = false )

В скобках — аргументы, которые принимает функция:

• $handle — название;
• $src — URL подключаемого JS-файла;
• $deps — массив названий скриптов, от которых зависит подключаемый нами;
• $ver — версия скрипта;
• $in_footer — это для нас самый главный параметр — он указывает, где подключать скрипт: между тегов <head></head> (в хедере) или до тега </body> (в футере).

Вы еще здесь? Не пугайтесь, разбираться во всем этом не нужно. Главное, запомнить, что wp_enqueue_script должна принимать пять аргументов, пятый из которых и указывает, где подключен скрипт. Изменяя его, можно менять место расположения скрипта — отправить его вниз.

Аналогично с функцией wp_register_script — она принимает те же аргументы, соответственно, если скрипт объявлен в ней, то тоже можно влиять на его расположение, изменяя значение аргумента $in_footer

Ну а теперь к делу. Напомню, чаще всего все скрипты, подключенные к вашей теме, подключаются в файле functions.php. Его мы и открываем на редактирование и ищем в нем названия этих двух функций и проверяем, чтобы в них были указаны названия тех js-файлов, которые мы видим в исходном коде.

Показываю.

Еще раз — вот мой исходный код:

А вот те функции в файле functions.php, которые отвечают за эти скрипты:

Обратите внимание, каждому скрипту в исходном коде соответствует своя функция.

Теперь дело за малым: немного подправить код. Аргумент $in_footer, который указывает на место расположения скрипта, по умолчанию принимает значение «false» — в хедере. Значит, все, что нам нужно, это явно добавить ему значение «true», которое будет говорить о том, что этот js-файл нужно подключать в футере.

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

Так, во второй и третьей функции нет аргумента версии, поэтому мы его тоже добавляем пустым «по умолчанию». И только после этого указываем значение «true» (без кавычек), чтобы оно относилось к пятому аргументу.

После всех правок файл сохраняем, проверяем сайт на работоспособность и вновь смотрим исходный код:

На скриншоте видно, что у меня осталось всего три скрипта. Остальные благополучно отправились в футер:

Похожим образом можно переносить и скрипты, подключаемые плагинами. Нужно в исходном коде вычислить файл плагина, в котором содержится подключение скрипта, а затем в нем подредактировать код функции подключения/регистрации этим же способом.

Обращаю ваше внимание на то, что не всегда указанным способом удается перенести скрипты плагинов вниз. Вот, например, скрипт плагина «Rublon» на мои провокации не поддался 🙂

Кроме того, возможен еще вариант, когда в исходном коде страницы вы увидите не вызов скрипта (заключенный в теги <script></script>), а непосредственно его текст. И тогда вычислить, какому плагину он принадлежит, можно только отключая поочередно плагины. А если не поможет, то и переключив на время тему оформления — возможно, виновна именно она.

Отключение стандартного подключения JQuery WordPress

Итак,  три js-файла все еще подключаются в заголовке блога. Причем два из них — это стандартное вордпрессовское подключение библиотеки JQuery, а с третьим мне расправиться не удалось.

Дальше мы с вами вступаем на довольно зыбкую почву. Дело в том, что у всех из нас разные шаблоны. И набор плагин тоже разный. Поэтому вполне возможно, что после выполнения моих следующих рекомендаций у вас на блоге откажет какой-то функционал: слайдеры, кнопки «Вверх-Вниз», лайтбоксы, что угодно еще.

Впрочем, не попробуешь — не узнаешь. Поэтому предлагаю попробовать отключить стандартную JQuery, чтобы получить минус два скрипта в хедере. Ну а если уж что-нибудь да сломается, то я оставляю для вас отходной путь.

Собственно, отключить JQuery в WordPress  я придумала двумя способами:

1. Поскольку подключаются они в файле /wp-includes/script-loader.php:  то их можно было бы смело закомментировать, поставив в начале строки двойной слеш. Но в этом случае при ближайшем обновлении WordPress все слетит, а опять поправить я наверняка забуду 🙂 Да и править код ядра движка — это, скажу я вам, не комильфо.
2. Поэтому я решила отменить регистрацию этой библиотеки в файле functions.php. У меня там была вот такая строка:

   if(!is_admin()) wp_enqueue_script('jquery');

   Я добавила после нее функцию, отменяющую ее:

   wp_deregister_script('jquery');

Кстати, у меня на блоге после отключения JQuery перестал работать плагин лайтбокса. Так что все пришлось вернуть на круги своя. Однако если вы приверженник минимализма в дизайне и не используете на своем блоге всякие хитрые штучки :), то возможно, имеет смысл воспользоваться.

Вот таким образом и можно перенести скрипты вниз,  ускорив (во многих случаях значительно), свой любимый блог.

И не надо говорить мне, что это ужасно сложно и практически невыполнимо, что вы боитесь лезть в код и вообще чайник чайником.

Внимательно перечитайте статью, уловите основной принцип — и вперед, на баррикады! Для редактирования кода используйте связку «Notepad++» и «FileZilla», и помните, что горячие клавиши в ноутпад++ (отмена и повтор) — это ваше все :).

И напомню, что эти рекомендации были проверены мною на шаблоне «Admired», но вот для новой моей темы оформления не подошли совсем. Поскольку ее разработчики подошли к делу грамотно, и все скрипты, которые только было возможно, уже опустили вниз страницы. Поэтому здесь я к оптимизации скорости загрузки блога в том, что касается скриптов, зашла с другой стороны. Но подробный отчет — в следующий раз.

Была с вами всегда ваша вечнопушистая Web-Кошка. Удачного дня, джентльмены и леди!