joomla перенести скрипты вниз страницы
С небес на землю, или Как перенести скрипты вниз, в подвал сайта
Доброго времени суток, друзья, гости и случайно заглянувшие на огонек посетители моего кошачьего блога!
Как-то, помнится, я обещала вам статью об одном из аспектов оптимизации скорости сайта — о переносе скриптов из начала страницы вниз, в ее конец. И не только обещала, но и написала, но в связи со сменой темы оформления на этом моем блоге написанное мне почему-то показалось неактуальным. В основном потому, что те методы и приемы, которые я использовала, с новой темой оформления не сработали.
Немного поразмыслив, я поняла, что вполне возможно, что как раз именно вам эта информация окажется очень своевременной и полезной. А потому все же представляю вашему несколько способов переноса скриптов, тормозящих загрузку сайта WordPress, вниз страницы.
Зачем переносить скрипты вниз, в подвал (футер) сайта
Прежде чем что-то делать, нужно ясно отдавать себе отчет в том, зачем мы это делаем и что нам это даст. Так зачем же опускать скрипты как можно ниже на странице, откладывая их загрузку?
Дело в том, что скрипт (в том понимании, в котором мы сейчас о нем говорим) — это JavaScript-код. JavaScript — это язык программирования, исполняемый в браузере, то есть работающий на стороне пользователя.
Теперь представим, что происходит, когда пользователь открывает страничку нашего сайта, в хедере которой расположено несколько (а хоть и один!) JS-скрипт.
На стороне сервера отрабатывает весь php-код, формирует единый html-документ — исходный код страницы — который и начинает передаваться в браузер. Код скрипта также встраивается в этот документ в его начале.
Браузер начинает обрабатывать полученную информацию. Почти сразу же натыкается на JS-код, останавливает загрузку страницы и начинает этот код исполнять. Затем продолжает загрузку, пока опять не встретит очередной скрипт.
Главное здесь то, что выполнение скриптов в самом начале никому не нужно — пользователь же еще не увидел страницу даже, браузер ведь еще не успел ее отобразить. К примеру, благодаря скриптам работает кнопка «Вверх». Но зачем выполнять скрипт для нее в начале загрузки, если сама кнопка, ее визуальное оформление все равно вызывается в футере?
А страница загружалась бы куда быстрее, если бы все скрипты были внизу: браузер быстро отобразил весь html-код, а уж в последний момент, пока пользователь осмотрится и сообразит, куда бы ему еще нажать, выполнил все скрипты.
Именно поэтому имеет смысл все скрипты переносить как можно ниже, ближе к концу страницы, в ее футер.
Как перенести скрипты вниз
Способов, друзья мои, здесь несколько. И для разных скриптов подойдут разные варианты.
Но прежде всего нужно понять, что же это за скрипты, и где нам их увидеть.
Увидеть все скрипты, которые подключаются в заголовке вашего сайта, достаточно просто: достаточно открыть исходный код вашей страницы и просмотреть самое его начало. Все подключенные скрипты вы легко опознаете по тегу ), а непосредственно его текст. И тогда вычислить, какому плагину он принадлежит, можно только отключая поочередно плагины. А если не поможет, то и переключив на время тему оформления — возможно, виновна именно она.
Отключение стандартного подключения JQuery WordPress
Итак, три js-файла все еще подключаются в заголовке блога. Причем два из них — это стандартное вордпрессовское подключение библиотеки JQuery, а с третьим мне расправиться не удалось.
Дальше мы с вами вступаем на довольно зыбкую почву. Дело в том, что у всех из нас разные шаблоны. И набор плагин тоже разный. Поэтому вполне возможно, что после выполнения моих следующих рекомендаций у вас на блоге откажет какой-то функционал: слайдеры, кнопки «Вверх-Вниз», лайтбоксы, что угодно еще.
Впрочем, не попробуешь — не узнаешь. Поэтому предлагаю попробовать отключить стандартную JQuery, чтобы получить минус два скрипта в хедере. Ну а если уж что-нибудь да сломается, то я оставляю для вас отходной путь.
Собственно, отключить JQuery в WordPress я придумала двумя способами:
Я добавила после нее функцию, отменяющую ее:
Кстати, у меня на блоге после отключения JQuery перестал работать плагин лайтбокса. Так что все пришлось вернуть на круги своя. Однако если вы приверженник минимализма в дизайне и не используете на своем блоге всякие хитрые штучки :), то возможно, имеет смысл воспользоваться.
Вот таким образом и можно перенести скрипты вниз, ускорив (во многих случаях значительно), свой любимый блог.
И не надо говорить мне, что это ужасно сложно и практически невыполнимо, что вы боитесь лезть в код и вообще чайник чайником.
Внимательно перечитайте статью, уловите основной принцип — и вперед, на баррикады! Для редактирования кода используйте связку «Notepad++» и «FileZilla», и помните, что горячие клавиши в ноутпад++ (отмена и повтор) — это ваше все :).
И напомню, что эти рекомендации были проверены мною на шаблоне «Admired», но вот для новой моей темы оформления не подошли совсем. Поскольку ее разработчики подошли к делу грамотно, и все скрипты, которые только было возможно, уже опустили вниз страницы. Поэтому здесь я к оптимизации скорости загрузки блога в том, что касается скриптов, зашла с другой стороны. Но подробный отчет — в следующий раз.
Была с вами всегда ваша вечнопушистая Web-Кошка. Удачного дня, джентльмены и леди!
Новости Joomla
JComments 3.0.7.8 для Joomla 4
Форк некогда популярных комментариев для joomla, автор JComments сейчас прекратил развитие компонента, но на гитхаб компонент до сих пор развивается.
Подготовка расширения к переходу на Joomla 4
Joomla 4 уже здесь, но обновление не всегда проходит гладко. Чаще всего из-за сторонних расширений.
Обновление Slogin 2.10.1
Один из старейших компонентов социальной авторизации для Joomla. Поддерживает почти все популярные сервисы авторизации и имеет огромное количество сторонних плагинов и модулей интеграции.
Antonio Racter
Как «прицепить» свой ява-скрипт к сайту/отдельной странице?
ecolora
Re: Как «прицепить» свой ява-скрипт к сайту/от&
Предлагаю иное решение. Используйте плагин Sourcerer
Создаете обычный HTML-модуль и вставляете туда код с помощью кнопки Sourcerer (появится после установки плагина).
Вам фришной версии хватит.
В чем удобство: поправить код в модуле куда проще чем в файле сайта (нужно заходить в панель хостинга, открывать соответствующую папку и файл на редактирование).
Второе преимущество: можно запускать этот скрипт не на всех страницах сайта, а на выбранных. Для Joomla 1.7-2.5 есть встроенные возможности управления отображением модулем на страницах. Для Joomla 1.5-2.5 можно использовать Advanced Module Manager.
Лично для меня удобство превышает столь незначительную потерю производительности. Мощщи нынче выросли у хостеров, чтобы заморачиваться.
Правильное подключение стилей и JS плагинов в Joomla
Всем привет! В прошлой статье я рассказывал о jQuery плагине модальных окон для сайта Magnific Popup. В статье я затронул подключение плагина к сайту, но в данной статье хочу показать, как правильно подключать стили, jQuery плагины и скрипты на Joomla (в том числе и инициализация плагинов). В комментариях к статье как-то интересовались этим вопросом и конкретно интересовала Joomla. Ну что ж, думаю этот вопрос многих заинтересует. В качестве примера подключения плагина возьму опять таки Magnific Popup. Все остальные плагины подключаются примерно также.
Подключение стилей
Давайте сначала подключим файл стилей, т.к. сначала всегда подключаются стили, а потом уже скрипты на JS. Обычно файл стилей обзывают — style.css. Он может быть общим, также могут быть и дополнительные — меню (menu.css), адаптивная сетка (gride.css), типографика (typography.css) и т.д.
Итак, для подключения стилей открываем главный файл вашего шаблона — index.php. Расположен он по адресу — «/templates/папка вашего шаблона/index.php«. Открываем данный файл любым текстовым редактором, а еще лучше редактором кода — Sublime, Notepad++ и др. и в начале документа выше кода «defined(‘_JEXEC’) or die;» вставляем следующий код:
Также желательно все пути до стилей и скриптов указывать в абсолютном виде, т.е. с доменом сайта. Для этого мы создаем переменную «$baseUrl» и заносим в нее значение «JUri::base()«. Можно конечно сразу в путь дописать «JUri::base()«, не создавая переменную. Но так лучше делать, если вы используете «JUri::base()» только один раз, а если хотя бы 2 раза и более, то лучше уже через переменную. Таким образом, код будет быстрее интерпретироваться сервером и потреблять меньше памяти. На глаз вы можете это и не заметить, но тем не менее нужно делать именно так.
В результате в исходном коде страницы в секции « » у нас появится строка подключения файла стилей.
Если вы хотите подключить несколько файлов стилей, то просто копируете подключение выше и меняете имя файла.
Можно также подключить еще один файл стилей в самом файле style.css, используя импорт — @import url(‘путь до файла’). Открываете подключенный файл стилей, в моем случае это файл style.css, и в самом начале вставляете следующий код — @import url(‘gride.css’); У меня файл gride.css лежит в той же папке, что и файл style.css. Если у вас они лежат в разных папках, то указывайте правильный путь.
Все, с подключением стилей разобрались. Теперь давайте перейдем к скриптам.
Подключение скриптов
Скрипты подключаются примерно также, как и стили. Ниже строки подключения стилей выводим следующий код:
В результате в исходном коде страницы в секции « » получим строку подключения скрипта Magnific Popup:
Вообще, я в последнее время не подключаю скрипты в head, т.к. скрипты тормозят загрузку страницы. Я подключаю их в конце документа до закрывающего тега «
Обзор плагина для отключения CSS и JS файлов
Плагин JSCSS Manipulate от наших российских разрабочтиков, бесплатный, скачать можно на официальном сайте >>
Плагин помогает ускорять сайты, сам им постоянно пользуюсь.
Что он может?
Как удалить загрузку лишнего javascript в Joomla
Небольшие JS файлы можно объединять в один. Также можно вырезать JS из исходного кода страницы.
Но после этих действий нужно обязательно проверять работу всех функций на сайте.
И также смотреть консоль браузера.
Как удалить загрузку CSS файла в Joomla
Любые CSS файлы также можно объединять в один.
А ещё лучше самые важные стили вынести в отдельный файл, или прописать инлайн, прямо в код страницы.
А остальные CSS подключить внизу страницы.
Другие опции
Less / Saas
Это опция для продвинутых верстальщиков.
Позволяет перкомпилировать стили.
Вырезать из Javascript
Вырезка из Javascript работает на основе регулярных выражений.
Чтобы воспользоваться этой функцией, вы должны хорошо разбираться в регулярных выражениях.
Дополнительные параметры
Плагин действительно хорош и помогает ускорить сайт.
Но работая с ним нужно разбираться в работе Joomla и желательно понимать в html/css/js.
После манипуляций с подключением файлов, нужно обязательно проверять работу функций и внешний вид сайта.
Потому что даже одно не правильное подключение css или js может привести к ошибкам и «перекрытию» стилей.
Как переместить скрипты вниз страницы или в футер WordPress
Опубликовано: ADv Дата 05.04.2016 в рубрике Настройки 3 комментария
Недавно один из наших читателей спросил, как можно переместить 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 темы и добавьте туда следующий код:
В этом коде мы использовали функцию wp_register_script(). Эта функция имеет следующие параметры:
Для того, чтобы добавить этот скрипт в футер либо вниз страницы WordPress, все, что вам нужно сделать, это установить параметр $in_footer в значение true.
Также мы использовали функцию get_template_directory_uri(), которая возвращает ссылку на расположение директории с шаблонами. Эта функция должна использоваться для подгрузки и регистрации скриптов и стилей в темах WordPress. Для плагинов мы будем использовать функцию plugins_url().
Проблема:
Проблема заключается в том, что иногда некоторые плагины WordPress добавляют их собственный JavaScript в страницы внутри тега или же в body. Для того, чтобы переместить эти скрипты внизу, вам потребуется редактировать файлы своего плагина и корректно переместить их вниз страницы.
Поиск исходного кода JavaScript
Открываем свой сайт в веб-браузере и просматриваем исходный код. Вы увидите ссылку на файл JavaScript, которая указывает на его расположение на сайте. Например, скриншот ниже сообщает нам, что наши скрипты принадлежат плагину под названием ‘test-plugin101’. Файл скрипта расположен в папке js.
Регистрация и загрузка скриптов
После того, как вы нашли плагин или тему, которая добавляет код в секцию header, следующим шагом будет поиск места, где плагин вызывает файл. В PHP файле темы или же плагина вы увидите вызов такого файла .js.
Давайте предположим, что ваш плагин или тема добавляет чистый JavaScript в header или в контент. Находим такой чистый код JavaScript в файлах плагинов или темы. копируем его и сохраняем в файле .js. Затем используем функцию wp_register_script() как показано выше для того, чтобы переместить JavaScript вниз.
Важно понимать, что когда вы вносите изменения в файлы ядра плагина, а затем обновляете его, то ваши изменения будут перезаписаны оригинальными новыми версиями файлов. Более корректным способом будет добавлять код для перерегистрации или отключения скриптов в файл functions.php своей темы.
Мы надеемся, что эта статья помогла вам переместить свои скрипты вниз страниц WordPress и увеличить скорость их загрузки.
По всем вопросам и отзывам просьба писать в комментарии ниже.
Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.