Оптимизация CMS Joomla - плагин JCC JS CSS Control

Во время очередной погони за баллами в GooglePageRankрешил-таки отыскать расширение для Joomla, которое позволяет быстро и безболезненно убрать .js и .css файлы из хедера сайта. Перерыл довольно много сайтов, пока не напал на плагин JSCCSControl. О нём и пойдёт речь

Устанавливаем JCC JS CSS Control

Скачать расщирение можно непосредственно на сайте разработчика или в JED (Joomla Extensions Directory).

На данный момент расширение доступно на английском и немецком языках, однако интерфейс довольно прост и закапываться в словари не придётся. Устанавливается плагин JSCCSControlстандартным образом – через менеджер расширений Joomla.

После установки плагин необходимо активировать и, соответственно, перейти на страницу управления.

Первое знакомство

Итак, на главной странице видим 5 вкладок. Вкладки «Плагин» и «Описание» в разъяснениях нуждаются вряд ли, поэтому идём дальше. 4-я вкладка – пережиток старых версий и сейчас не используется, а 5-я связана с активацией плагина. Активация не носит принудительного характера (на данный момент, во всяком случае), так что не стоит сразу отчаиваться. В оставшейся вкладке Settingsнам и предстоит чинить расправу над надоедливыми скриптами.

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

Кроме этого видим 6 кнопок. Начнём, конечно, с верхней.

Избавляемся от яваскриптов.

Первая кнопка – Set JS Filter Rules откроет окно, в которое мы будем смело отправлять ненужные нам .js—файлы. Делается всё вполне тривиальным способом:

В ячейки слева (стоблец JS-File) мы вносим названия файлов, загрузку которых хотим запретить. Лучше указывать путь до файла относительно корневой папки. Мне перво-наперво хотелось отключить скрипт попап-окон, который загружает расширение K2. Magnific-popup.min.js. Путь до файла начинается сразу после /, который следует после домена Вашего сайта. В моём случае после http://agmweb.ru/ мы поле не вписываем, а вот остальному: k2/assets/js/jquery.magnific-popup.min.js– там самое место.

Второй столбец – LimitExcecution– сделан на тот случай, если надо запретить загрузку файла точечно, а не на всём сайте. Туда вносятся параметры страницы. Однако я решил, что назойливому скрипту на моём сайте на Joomlaне место, поэтому оставил поле пустым, чтобы скрипт не загружался вообще.

О третьем столбце мы поговорим после того, как всё же рассмотрим второй.:)

После Magnific-popupмне на глаза попался безобидный вроде плагин скрипт - jquery.colorbox-min.js. Не то, чтобы он мне мешал – просто попался под руку и на нём я решил протестировать отключение загрузки файла на отдельно взятой странице.

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

Режим отладки. Debugmode.

Мы снова на главном экране. Устанавливаем переключатель Debug Mode в положение «Да», если ещё не включили плагин – прыгаем на первую вкладку и включаем, после чего нажимаем кнопку «Сохранить» и отправляемся во фронтэнд, то бишь – в пользовательскую часть сайта.

На сайте нас будет поджидать вот такая красота:

Название плагина, уведомление о том, что включен режим отладки и блок с параметрами страницы, которые надо указать в поле LimitExecution, чтобы отключить файл только на главной странице. Информация ниже поделена на 2 раздела – JSи CSS:

Общая количество файлов, которые подключаются к странице (TotalFiles), их общий объём (Size), в моём случае, , объём исключённых (Excluded) и загруженных (Loaded) файлов. Сразу после этого выводится список этих файлов. Зелёным выделены загруженные, красные, как Вы понимаете – синим. Мой magnific-popup.min.js, как Вы можете видеть, на сайте остался, но Joomlaего не загружает.

Ниже списка JS следует аналогичный список CSS-файлов. Чтобы в продолжении оптимизации загрузки выделяем параметры, которые соответствуют нашей странице и идем обратно в админку (желательно – в новой вкладке, чтобы не выходить по многу раз, если надо исключить загрузку на наш Joomla-сайт большого количества скриптов).

Важно помнить 2 момента:

  1. Плагин делает ровно то, что Вы ему говорите, поэтому будьте внимательны – добавление только названия и расширения файла в столбец JS/CSSFileприведёт к исключению из загрузки всех файлов с таким именем. То есть, если у Вам на сайте, например, загружается 2 файла style.css и надо отключить только 1 из них – указывайте относительный пункт до одного из них (например: media/k2/assets/css/style.css).
  2. Плагин иногда подслеповат и может не разглядеть некоторые файлы. Так, например, в моём случае он упорно не хотел показывать файлы стилей от расширения попап форм для JoomlaPWebContact. Их мне помог выследить Firebug.

Но вернёмся к нашим баранам, то есть – к кнопкам.

ExcludeCSSFilesпозволяет проделать с CSS-файлами которые загружаются на сайт ту же процедуру, которую мы только что проделали в отношении JS-файлов.

Переключатели RemoveJCaptionи RemoveTooltip исключат встроенные в ядро CMSJoomla3 библиотеки Captionи Tooltip– причём как загрузку JSфайлов, так и вывод строкового кода, который Joomla подставляет в шаблон.

Одну из экспертных настроек – DebugMode– мы уже научились использовать, а вот со второй лучше так беспечно общение не начинать. BackendExcecution, будучи включённой, расширит область влияния плагина в том числе и на Административную панель Joomla (бэкэнд). Так что дважды подумайте, прежде включать её.

Вот, собственно, и всё. Пользуйтесь, удачи Вам в оптимизации!

Плагин JS CSS Control

Плагин JCC JS CSS Control

Вкладка Settings

Вкладка Settings

Избавляемся от яваскриптов

Избавляемся от яваскриптов

Избавляемся от скриптов

Избавляемся от скриптов

Включаем режим отладки

Включаем режим отладки

Фронтэнд Joomla во время режиме работы JC CSS Control в режиме отладки

Фронтэнд Joomla во время режиме работы JC CSS Control в режиме отладки

Плагин позволяет осуществлять тонкую настройку скриптов и CSS-файлов

JS CSS Control позволяют осуществлять тонкую настройку скриптов и CSS-файлов

Remove JCaption и Remove Tooltip исключают встроенные библиотеки

Поля Remove JCaption и Remove Tooltip исключают загрузку встроенных библиотек