Асинхронный загрузчик стилей для Joomla

CSS Async Loader - асинхронный загрузчик стилей для Joomla! 3.x и 2.5.x

Огромное количество сторонних стилей и весомые файлы CSS могут значительно понизить время страницы. Скорость вашего сайта не только имеет значение для хорошего и приятного пользования им гостями, но также влияет на рейтинг выдачи в поисковых системах. К прмиеру, как говорит нам извес тный поисковой робот Google: "медленная скорость загрузки страниц может негативно повлиять на SEO". Такое дополнение для вашего сайта, как "Асинхронный загрузчик CSS для Joomla! 3.x/2.5.x" позволит вам загружать CSS асинхронно, чтобы браузер пользователя не прекращал отрисовку страницы в момент загрузки стилей.

Параметры плагина и рекомендации по использованию: Стили, отвечающие за отрисовку «каркаса» вашего сайта (позиции базовых элементов, отступы, представление основных секций) всегда загружайте в обычном режиме для избежания эффекта FOUC (flash of unstyled content — мнгновенное появление нестилизованного контента). Данный эффект возникает по той причине, что страница отрисовывается раньше применения стилей, загружаемых асинхронно. Для предотвращения эффекта FOUC рекомендуется выделить самые важные стили и поместить их в отдельный файл CSS, который необходимо загружать в обычном режиме (а ещё лучше встроить базовые стили непосредственно в код HTML). Загрузку всех остальных, менее важных стилей, не участвующих в представлении основных секций, рекомендуется откладывать и загружать асинхронно для повышения производительности и увеличения скорости загрузки страницы.

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

Настройка CSS Async Loader: Откройте страницу опций плагина. Выберите режим работы расширения, после чего ведите URL стилей CSS, которые нужно будет загружать асинхронно или же исключить из асинхронной загрузки.

Для примера на одном из сайтов плагин включён, на другом выключен. Вы можете перейти на эти страницы или открыть их в сервисе аудита сайтов Google Page Speed Insights, чтобы посмотреть результаты проверки каждого из примеров. Обратите внимание на информацию в разделе оптимизации скриптов и стилей, и вы увидите, что на странице с включённым плагином CSS файлы не блокируют отрисовку страницы. При выключенном плагине отрисовку страницы блокируют все внешние стили CSS. Д

Дубль страницы при включённом плагине:

• Открыть в Google Page Speed Insights

Дубль страницы при выключенном плагине:

• Открыть в Google Page Speed Insights

Для точного соответствия URL введите указанный в исходном коде вашего шаблона адрес файла CSS (без кавычек), например: http://site.com/css/general.css — в случае абсолютной ссылки css/general.css — в случае относительной ссылки

Для группового соответствия введите определённую подстроку. Например, если вы укажете подстроку style.css, то это будет соответствовать файлу style.css и файлу my-style.css. При вводе имени определённой директории, например /css/, все стили CSS, расположенные в данной директории, совпадут с данным условием.

Вы можете также вводить внешние ссылки, например подстрока http://fonts.googleapis.com совпадёт со всеми шрифтами Google Fonts, а подстрока fonts.googleapis.com/css?family=Open+Sans совпадёт только с определённым семейством (в данном случае Open Sans). Добавить/Исключить CSS Если выбрано добавить, то стили, указанные в поле ниже, будут вовлечены в асинхронную загрузку. Если выбрано исключить, то все стили CSS, за исключением указанных, будут загружаться асинхронно. Глобальные исключения Исключения компонентов, их представлений и отдельных материалов из асинхронной загрузки CSS. Если введённые параметры совпадут с глобальными переменными Joomla!, все стили CSS будут загружаться в обычном режиме. Параметры разделяются знаком амперсанд (&), значения параметров определяются знаком равно (=), группы параметров и их значений разделяются между собой запятыми. В качестве значений параметров допустимо использовать маски типа (x|y|z).

Примеры: Исключение модальных окон: tmpl=component Исключение редактора во фронт-энде: view=form Исключение пунктов меню: Itemid=(13|25|77) Исключение компонента полностью: option=com_users Исключение представлений компонента: option=com_content&view=category, option=com_content&view=category&layout=blog Исключение отдельных материалов: option=com_content&view=article&id=(10|101|3)

Режим отладки доступен. Проверьте время выполнения PHP скрипта данного плагина. Вы можете вывести результат в консоль JavaScript или же, если JavaScript отключён, в верхней части страницы. В последнем случае не забудьте отключить ваш сайт на время отладки.