Сжатие (минимизация) кода ресурсов веб-страницы позволяет уменьшить общий размер страницы, тем самым увеличивая скорость загрузки сайта в целом. В этом материале поговорим о том, как уменьшить объем HTML-, CSS- и JS-кода на сайте Joomla с помощью плагина JCH Optimize.

Как объем кода влияет на скорость загрузки?

Чтобы определить значимость объема кода страницы сайта по отношению к скорости её загрузки используется сервис Google Page Speed.

Если объем кода каких-либо ресурсов можно уменьшить, то результаты проверки будут содержать следующие предложения по оптимизации в зависимости от их актуальности:

  1. Сократите JavaScript
  2. Сократите CSS
  3. Сократите HTML

Отметим, что предложения по оптимизации в данном сервисе выстраиваются в порядке значимости.

Чтобы посмотреть, насколько уменьшится объём определенного кода после его минимизации, надо нажать на кнопку Как исправить.

Результаты оптимизации могут сильно отличаться в зависимости от общего объёма HTML-кода, количества и предварительной минификации (наличия уже оптимизированных) CSS- и JS-файлов.

Принцип сокращения кода веб-страниц

Изначально весь код пишется вручную, и для удобочитаемости программисты применяют в нем ряд элементов, в числе которых:

  • комментарии
  • лишние пробелы и табуляции
  • переносы строк
  • и т. д.

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

Как правило, CSS- и JS-файлы с предварительно сжатым кодом веб-разработчики отмечают суффиксом min в названии файла. Например:

  • font-awesome.min.css
  • bootstrap.min.css
  • jquery.magnific-popup.min.js
  • jquery.colorbox-min.js

Как сократить код страниц в Joomla?

Как правило, функция сокращения кода совмещается вместе с объединением файлов в один для сокращения общего количества HTTP-запросов, каждый из которых занимает отдельный момент времени. Таким образом "одним выстрелом убиваются 2 зайца".

Шаблоны для Joomla, созданные на определенных фреймворках (например, Helix 3 и Warp), имеют в арсенале функцию сокращения и объединения файлов скриптов и стилей.

Как правило, эта функция активируется в настройках шаблона (в меню админки Расширения → Шаблоны → Стили → Нужный стиль шаблона).

Однако следует учитывать, что функционал шаблона обрабатывает только файлы, связанные с этим шаблоном, а файлы отдельных сторонних расширений не будут подвержены объединению и минификации.

Поэтому мы не рекомендуем использовать такую возможность из настроек шаблона. Вместо этого лучше применять функционал отличного плагина JCH Optimize, предназначенного для увеличения скорости загрузки сайтов на Joomla.

Минимизация кода с помощью JCH Optimize

Выполнить задачу по сокращению и объединению HTML-, CSS- и JS-кода можно с помощью бесплатной версии JCH Optimize. Для этого:

  1. скачайте плагин на сайте разработчика
  2. установите его через менеджер расширений Joomla
  3. перейдите в Расширения → Плагины
  4. найдите плагин JCH Optimize Pro
  5. перейдите в его настройки
  6. перейдите во вкладку Основные настройки
  7. в разделе Объединение CSS и Javascript файлов:
    • выберите значение Да для опции Включить, чтобы активировать функции минимизации кода
    • для опции Уровень минимизации HTML выберите значение Ультра чтобы максимально сократить HTML-код
  8. перейдите в раздел Параметры автоматической настройки и кликните по нему для открытия настраиваемых опций
  9. подраздел Базовые автоматические параметры содержит следующие опции:
    • Объединить CSS файлы
    • Объединить JavaScript файлы
    • Сжатие GZIP для JavaScript и CSS
    • Минимизировать CSS
    • Минимизировать Javascript
    • Минимизировать HTML
  10. активируйте все необходимые опции для обеспечения максимальной эффективности, включите плагин и протестируйте на сайте
  11. подраздел Автоматические параметры исключения содержит опцию Учитывать все расширения, которая позволяет плагину минимизировать и объединять файлы стилей и скриптов отдельных расширений

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

В дополнение к перечисленным выше возможностям, платная версия плагина JCH Optimize Pro позволяет:

  • заменять правила @imports в CSS для уменьшения числа HTTP-подключений
  • включать PHP и внешние ресурсные файлы
  • включить встроенные в страницу CSS-стили и JS-код
  • указывать место размещения ссылок на объединенные файлы в HTML-коде
  • загружать JavaScript асинхронно
  • обеспечивать загрузку изображений по мере их отображения на экране
  • извлекать CSS-стили для элементов верхней части страницы и размещать их в разделе head

Все эти функции помогают привести веб-страницы в соответствие практически всем рекомендациям сервиса Google Page Speed, тем самым значительно увеличивая скорость загрузки сайта на Joomla.

Перед активацией плагина JCH Optimize важно включить и настроить серверное кэширование сайта на Joomla, иначе работа плагина отрицательно скажется на скорости загрузки, т. к. ему придется обрабатывать данные при каждом запросе веб-страниц.

Упоминаемые термины:

CSS, HTML, Joomla, PHP, Стиль шаблона, JavaScript, Bootstrap