Сокращение объема кода страниц сайта на Joomla

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

Чтобы определить значимость объема кода страницы сайта по отношению к скорости её загрузки используется сервис 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, иначе работа плагина отрицательно скажется на скорости загрузки, т. к. ему придется обрабатывать данные при каждом запросе веб-страниц.