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

Установка расширения

  1. Приобретите и установите плагин при помощи менеджера расширений Joomla.
  2. Откройте страницу настроек плагина.
  3. Выберите режим работы плагина (см. описание ниже).
  4. Введите URL стилей CSS, которые необходимо загружать асинхронно или же исключить из асинхронной загрузки.

Как это работает?

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

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

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

Настройки плагина и рекомендации по использованию

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

Форма для добавления URL стилей CSS, отделяемых друг от друга одной или несколькими новыми строками. Для точного соответствия URL введите указанный в исходном коде вашего шаблона адрес файла CSS (без кавычек), например:

  • http://example.com/css/general.css — в случае абсолютной ссылки
  • css/general.css — в случае относительной ссылки

Для группового соответствия введите определённую подстроку. Например, если вы укажете подстроку style.css, то это будет соответствовать файлу style.css и файлу mystyle.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 отключён, в верхней части страницы. В последнем случае не забудьте отключить ваш сайт на время отладки.