Как удалите код JavaScript и CSS с верхней части страницы в Joomla 3, как запустить скрипты асинхронно либо отложить запуск

Если Вы когда-нибудь задумывались о проблемах скорости загрузки страниц Вашего сайта, то наверняка уже знакомы с таким сервисом от Гугла как PageSpeed Insights. А если так, то наверняка знакомы с проблемой когда основное содержимое страницы загружается после того как будут загружены определённые скрипты и стили.

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

Что с этим делать? Конечно, можно пойти наиболее трудоемким, но действенным способом – перебрать весь движок Джумлы, внести изменения в расширения и так далее. Способ этот действительно хорош, но если честно настолько трудоемкий что связываться с ним нет никакого желания, а для новичков такой метод вовсе не выход.

Наиболее простой и не менее верный способ это воспользоваться определенными расширениями, которые сделают всю (или почти всю) работу за нас. Одно из таких расширений это плагин Javascript Async & Defer, с помощью которого можно запускать скрипты асинхронно либо отложить их запуск, но при условии, что это не навредит работе сайта.

Для начала необходимо скачать плагин Javascript Async & Defer, а следом установить. Но одной установки будет недостаточно, главное правильно настроить данное расширение. Как это сделать я сейчас постараюсь объяснить.

Настройка плагина Javascript Async and Defer

После установки плагина можно приступать к его настройке, ведь сам себя он настроить не сможет. Для этого в панели управления переходим на страницу «Менеджер плагинов: Плагины» (Расширения -> Плагины). Находим только что установленное расширение в виде плагина «Javascript Async and Defer» (для этого лучше воспользоваться поиском или фильтром по ID):

Находим плагин Javascript Async & Defer и приступаем к его редактированию

Как видите, плагин по умолчанию отключен, но как я и говорил, одного включения для правильной работы будет недостаточно. Давайте откроем плагин для редактирования и посмотрим, что мы имеем. А имеем мы ни много ни мало всего одну вкладку «Плагин» с немногочисленными настройками:

Настройка плагина Javascript Async and Defer

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

Для начала давайте разберемся, что и как тут настраивать, как узнать какие скрипты запускаются и как их прописать. Для начала разберем суть каждой настройки:

  • async loading – данный переключатель дает возможность сделать загрузку скриптов в асинхронном режиме.
  • defer loading – отложенная загрузка указанных скриптов
  • Scripts to modify – в данное текстовое поле необходимо вводить относительный путь до скриптов, которые будем обрабатывать.
  • Debug – режим отладки, пригодится для выявления скриптов, которые запускаются перед загрузкой контента.

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

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

Переключаем плагин в режим отладки для того чтобы посмотреть какие скрипты запускаются совместно со страницей сайта

Теперь можно перейти на сайт и посмотреть на результат, у Вас должно получиться, что то вроде этого:

Выявляем скрипты которые загружаются совместно со страницей сайта

Любопытно, не так ли, получается, что совместно со страницей загружается еще 16 скриптов (это в моем случае), как системных, так и от различных установленных расширений. И каждый из них увеличивает время загрузки страницы, а это не есть хорошо.

Самый простой вариант скопировать все те скрипты, которые выдал нам плагин и добавить в поле для модификации «Scripts to modify». Затем выбрать режим загрузки (асинхронный, отложенный, или сразу оба) сохранить изменения и проверить результат.

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

Тут главное не паниковать, внимательно изучить список скриптов понять, за что отвечает каждый из них и модифицировать только те, которые не нарушат функционал сайта, а я Вас уверяю, в Joomla таких не мало

Если такой подход Вас не устраивает по причине того что все скрипты для Вас важны, а так же в том случае если Ваш сервер не поддерживает протокол HTTP/2.0 тогда советую пойти другим путем - объединить все скрипты в один. В таком случае браузеру потребуется гораздо меньше сессий для загрузки целевой страницы, а как следствие меньше времени.

 
 

Добавить комментарий