Доброго времени суток, друзья, гости и случайно заглянувшие на огонек посетители моего кошачьего блога!
Как-то, помнится, я обещала вам статью об одном из аспектов оптимизации скорости сайта — о переносе скриптов из начала страницы вниз, в ее конец. И не только обещала, но и написала, но в связи со сменой темы оформления на этом моем блоге написанное мне почему-то показалось неактуальным. В основном потому, что те методы и приемы, которые я использовала, с новой темой оформления не сработали.
Немного поразмыслив, я поняла, что вполне возможно, что как раз именно вам эта информация окажется очень своевременной и полезной. А потому все же представляю вашему несколько способов переноса скриптов, тормозящих загрузку сайта 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 я придумала двумя способами:
- Поскольку подключаются они в файле /wp-includes/script-loader.php:
то их можно было бы смело закомментировать, поставив в начале строки двойной слеш. Но в этом случае при ближайшем обновлении WordPress все слетит, а опять поправить я наверняка забуду 🙂 Да и править код ядра движка — это, скажу я вам, не комильфо.
- Поэтому я решила отменить регистрацию этой библиотеки в файле functions.php. У меня там была вот такая строка:
if(!is_admin()) wp_enqueue_script('jquery');
Я добавила после нее функцию, отменяющую ее:
wp_deregister_script('jquery');
Кстати, у меня на блоге после отключения JQuery перестал работать плагин лайтбокса. Так что все пришлось вернуть на круги своя. Однако если вы приверженник минимализма в дизайне и не используете на своем блоге всякие хитрые штучки :), то возможно, имеет смысл воспользоваться.
Вот таким образом и можно перенести скрипты вниз, ускорив (во многих случаях значительно), свой любимый блог.
И не надо говорить мне, что это ужасно сложно и практически невыполнимо, что вы боитесь лезть в код и вообще чайник чайником.
Внимательно перечитайте статью, уловите основной принцип — и вперед, на баррикады! Для редактирования кода используйте связку «Notepad++» и «FileZilla», и помните, что горячие клавиши в ноутпад++ (отмена и повтор) — это ваше все :).
И напомню, что эти рекомендации были проверены мною на шаблоне «Admired», но вот для новой моей темы оформления не подошли совсем. Поскольку ее разработчики подошли к делу грамотно, и все скрипты, которые только было возможно, уже опустили вниз страницы. Поэтому здесь я к оптимизации скорости загрузки блога в том, что касается скриптов, зашла с другой стороны. Но подробный отчет — в следующий раз.
Была с вами всегда ваша вечнопушистая Web-Кошка. Удачного дня, джентльмены и леди!
Я понял, что ничего не понял. 🙂
Посмотрел у себя, есть много скриптов, что-то по названию связанное с темой. Библиотеки jquery, по моему, на моем сайте нет. Я еще давно ее искал, но не нашел. Как-то подключал эту библиотеку для чего-то, но сайт после этого стал выглядеть криво. А может я сам неправильно, что-то сделал.
🙂
Василий, ну вот как раз те скрипты, что связаны с темой, можно попробовать перенести — открыть файл functions.php, поискать там функции, добавить «true» нужному аргументу, проследить, чтобы именно пятому… Потом проверить, отправилась ли строчка со скриптом в футер, в исходном коде посмотреть. На самом деле это все только выглядит очень страшно, а делается очень быстро. Все надо пробовать.
А JQuery у тебя я действительно почему-то не обнаружила, хотя странно это…
Сам принцип действий я понял. Конечно для новичка, не грамотного в кодах, сложновато на первый раз. Но учиться нужно. Для начала думаю посмотреть свои коды, найду ли там что то похожее. Потом пробовать действовать, только на локальном сервере. А материал конечно интересный. Спасибо!
Конечно, лучше всего попробовать на локальном сервере. А уж если все удачно пройдет, то повторить на рабочем блоге, Александр Викторович. И да, главное — понять принцип.
Спасибо!
Во первых. Лариса! твой блог загружается у меня примерно за 13 секунд. Я не знаю хорошо это или плохо.
Во вторых. Мне очень понравилась фраза:»Прежде чем что-то делать, нужно ясно отдавать себе отчет в том, зачем…..» Впервые встретил её на блогах, посвященных изучению строения блогов.
В третьих. Даже, если не осмеливаться переносить скрипты в подвал, статья полезная в части изучения анатомии блога.
В четвёртых. Спасибо ещё раз. Как то легче и веселее стало жить и трудиться.
Сергей, вечно Вы мне льстите)
Но 13 секунд — это очень и очень плохо… Правда, и этой темой оформления я еще не занималась. Прошлую удалось оптимизировать, но ведь лапки зачесались сменить. Теперь вот буду потихоньку разбираться, заодно и буду рассказывать о своих изысканиях. В общем, у меня блог — это описание решения собственных проблем)))
А фраза применима не только к созданию сайтов, но и вообще к жизни. Я очень ее люблю и всегда стараюсь следовать.
Ну и конечно, не за что! Я же для того и пишу. Если бы вы все ко мне не заходили, не делились мыслями и мнениями, то долго бы я не протянула. Так что я должна благодарить)
Вот в этом и проблема — захотелось сменить тему — ползи играй со скриптами, захотелось добавить плагин — снова игры со скриптами, обновил движок/плагин/тему — опять труси код и вспоминай, что добавлял/убирал.
Нет оптимальности, каждый раз свой подход.
Нет ли плагинов, которые могут автоматом переместить выбранные скрипты в футер? Именно выбранные, т.е. принадлежащие не только теме но и плагинам. Подобные вещи встречаются в плагинах кеширования, но часто после включения появляются проблемы с блогом и приходится отключать.
Приветствую)
Да, согласна, неудобно — как, впрочем, и любое вмешательство в код. Где-то слышала о подоном плагине, но и там такого функционала — выбора только указанных скриптов — не было. Вот название, увы, не вспомню…
И снова 13 секунд. Первый раз на глазок считал, а сейчас с секундомером. Удивился точности своего счёта «на глазок». Значит смогу работать секундомером (по крайней мере секунд до 15):))). Фраза та была важнейшим принципом изучения вычислительной техники до появления Windows. Эта оконная барышня внесла в изучение новые принципы — «пальчиковой памяти», я бы назвал. Как сейчас учат: Например, «Сделать то то очень просто — нажмите кнопку такую то.»
Теоретически любая оптимизация сайта должна повысить его КПД. На практике время отклика в основном зависит от провайдеров сервера и реципиента, от алгоритма, в котором прописано, через какие именно узлы пройдет трафик от сервера до клиента, и от еще кучи неведомых нам хреновин. Сергей, не ждите, что все залетает после выполнения рекомендаций. Просто при прочих равных любая грамотная оптимизация в определенных условиях может вдруг сработать. Мне знакомые тестеры рассказывали о подобных случаях.
Олег, просто все равно имеет смысл со своей стороны все подчистить. Именно при прочих равных, ускорения, пусть и не такого значительного, все равно можно добиться. Хотя да, если хостинг притормаживает, то спасет только его смена, тут уж никак не исхитришься.
Дык я ж и не спорю, Лариса, что имеет смысл. Другой вопрос — соотношение затраченные усилия и результата. Если первое невелико, а особенно если не придется тащить изменения вручную через обновления CMS, тогда даже при не слишком явном втором можно оптимизировать.
Нет, ну конечно, я никогда не советую править код ядра движка. И при обновлении слетит, и вообще неправильно это. Но в итоге правится код темы оформления, которая тоже имеет свойство обновляться… Так что любые изменения так или иначе придется тащить за собой.
Всегда приятно знакомиться с тем, у кого можно чего-нибудь «стырить» на законных основаниях… 🙂
Так как у всех Сеть в мозгах по разному приживается, такие прокты как у вас, милая ВебКоша, очень нужны. Беру в закладки.
А вот про деревню вы зря… Видимо вы в неправильных деревнях бывали!
Твит!
Татьяна, здравствуйте! Рада знакомству, и да — можете «тырить» сколько угодно, для того и пишу 🙂 Спасибо за теплые слова.
Про деревню… может, и в неправильных, но экспериментировать желания больше нет. Ну их…
Прав был старик Фрейд… Первые впечатления — на всю жизнь…
Насчет тащить за собой изменения (это в ту ветку, где кнопки «Ответить» уже нет). Я не зря поднял этот вопрос, он для меня больной. Накастомизировал у себя по полной, именно что тащу все эти кастомизации через апдейты. Нашел более-менее терпимый способ, все собираюсь статью написать. Может, у тебя есть идеи на эту тему, я бы попаразитировал ))
Нет, знаешь, единственный вариант для WordPress, который спасает — это дочерние темы. Но насколько помню, в Joomla нет ничего похожего. И я бы если и делала, то только вручную — так надежнее. Хотя твой способ почитаю с интересом.
Я и делаю вручную. Ладно, вот почитаешь с интересом — вернемся к теме. Только когда я ту статью напишу? ))
Блин… Неужели ты во всем этом шаришь… Озадачился я сегодня сделать слайдер. Сделал на cu3ox, да так и не смог в статью вставить. Сделал на другом сервисе, а в голове осталось чувство незавершенности. Вспомнил про эту статью перечитал и пишу этот комментарий. Я — дерево!
Да не во всем, конечно, и не всегда) И если тебе от этого станет легче, то этот слайдер тоже бы не смогла вставить, наверное:)
А зачем он тебе вообще сдался, такой сложный путь? Есть же плагины слайдеров.
Ну я же не ищу легких путей =) (а зря иногда). Просто стало интересно. Три часа убил сегодня на эту тему. Плагин не хочу, нашел сторонний сервис прикольный под это дело
Здравствуйте. Во первых спасибо за ресурс, некоторые темы в интернете раскрыты посредственно, а у вас всё по полочкам.
Во вторых пишите чаще, а то всё перечитал)
Ну и в третьих сам вопрос. Море плагинов подключают свои скрипты,я в их функ.пхп при регистрации скрипта добавил пятым атрибутом true. Всё как полагается, только не хотят сорванцы в подвал(
Что делать?
Здравствуйте! И спасибо 🙂
По поводу скриптов от плагинов — первое, нужно обязательно чистить кеш: скрипты могли перенестись, а в исходном коде этого не видно. Причем кеш как браузерный, так и на сервере, от плагина кеширования. Простите за банальность, но сама на этом ловилась) И да. некоторые скрипты почему-то не поддаются, у меня есть один такой умник — пока не разобралась, в чем дело, но докопаюсь обязательно)
Тут копался и наткнулся на небольшой код для func*.php, могу скинуть сюда если это возможно и нужно. Он полностью запрещает регистрацию в head и перекидывает в footer. Есть конечно и проблемка, у меня из 10-15 скриптов отвалилось 2.
Конечно, оставьте код здесь. Я пробовала его когда-то, помню, но тоже что-то закапризничало. Но может, кому-то пригодится)
Доброго дня, Кошка! Уже несколько дней ищу эту информацию и нашёл! Но. В коде действительно вижу строки со скриптами, а вот в хэдере и в функциях не могу найти. Где они могут прятаться? Сайт: http://magnum-photo.com
Доброго дня, Виталий! Так трудно сказать, по HTML-коду не определишь. Но можно скачать папку с шаблоном себе на компьютер и встроенным поиском по тексту файлов Тотал Коммандером поискать имя функции. То есть найти все файлы, где встречается wp_register_script или wp_enqueue_script, а потом уже смотреть, где что подключается.
или лыжи не едут или я… не еду 🙂 Нет у меня в хэдере, функциях и индексе ничего подобного. Ужо всю моск сломал 🙂
Ну я ж говорю, может быть, в других файлах подключение скриптов происходит. Ищите по названию функции по всем файлам шаблона. Подключение может быть зарыто где-то глубоко в папках — только поиск. Ну или вручную просматривать код, но это долго.
Спасибо, Лариса. Частично победил ситуацию плагином WP Minify. Теперь бОльшая часть скриптов перенеслась в конец загрузки!
А я нашла, как вынести ворпрессовские кветри в футер, на отключая! 🙂 Вот тут: http://truemisha.ru/blog/wordpress/wp_head.html
Вопрос: можно ли так же поступить с файлом style.css? Пейдж спиду не нравится, что он грузится сразу…
Надя, можно-то можно, но не нужно — представь, весь сайт сначала без оформления загрузится, а только потом стили, некрасиво будет. Так что лучше без фанатизма))
Тогда можно основные вынести в отдельный файл, скажем. У меня почему-то прямо в коде страницы читаются те стили, которые настраиваются в админке. Даже не знаю, хорошо это или плохо… 🙂
Интересная статья, спасибо. Правда понял частично. У меня в итоге немного не так примеры выглядели. К wp_enqueue_script добавил false в итоге скрипты вообще пропали 🙂
К сожалению нет никакой информации как перенести подключение скриптов в футер именно для плагинов. У плагинов куча файлов, в каком искать не понятно 🙁
Сергей, а конкретных указаний Вы нигде и не найдете. Сколько плагинов, столько вариантов. Ищите по тексту файлов название функции, пробуйте. У меня так и не получилось изо всех плагинов скрипты перенести.
У меня в хедере и футере нет скриптов,но зато «навалом» в файле functions.php
Разве так может быть?
Может и так, Галина. Они расположены в файле функций, а в хедере / футере просто подключаются. Ну или если тема сложная, то они подключаются в файлах, которые подключаются в хедере / футере. Так что это не универсальная пошаговая инструкция, а скорее, общее направление для поиска.
У меня все скрипты и библиотеки перенеслись в футер после добавления в function.php вот такого кода:
/*
* Перемещение кодов JavaScript в футер
*/
function custom_clean_head() {
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_enqueue_scripts’, ‘custom_clean_head’ );
?>
Подсмотрел здесь: http://www.kevinleary.net/move-javascript-bottom-wordpress/
Правда, это добавило лишь 4% к показателям ПейджСпида
в скрипте, последние символы «?>» лишние. Либо нужно удалить закрывающий тэг, что-бы не получилось
?>
?>
🙂
https://wordpress.org/plugins/scripts-to-footerphp вот что нашел. Еще не тестировал.
Респект автору. Очень пригодилось при создании нового шаблона.
А как вывести скрипты в таком формате: <script>var = {}; $(document).ready(function(){</script>?
Да так же, из хедера вырезаете, в футер вставляете. Но нужно смотреть за порядком подключения. jQueru должна подключаться раньше прочих, иначе все сломается
И у меня скрипты используют разные методы, похоже на шорткоды что-ли!