Центр обучения Joomla
    Сокращение объема кода в Joomla 3+

    Сокращение объема кода в Joomla 3.x

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

    Содержание

    1. Как объем кода влияет на скорость загрузки
    2. Принцип сокращения кода веб-страниц
    3. Как сократить код страниц в Joomla 3
    4. Минимизация кода с помощью JCH Optimize
    5. Заключение

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

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

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

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

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

    Предложения по сокращению кода в Google Page Speed
    Предложения по сокращению кода в Google Page Speed

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

    Результат минификации HTML-кода проверенной страницы
    Результат минификации HTML-кода проверенной страницы

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

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

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

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

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

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

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

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

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

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

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

    Раздел Compression в настройках шаблона на фреймворке Warp
    Раздел Compression Settings в настройках шаблона на фреймворке Helix 3

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

    Поэтому мы не рекомендуем использовать такую возможность из настроек шаблона. Вместо этого лучше применять функционал отличного плагина 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-адресам.

    1. Поиск и активация плагина JCH Optimize
    2. Вкладка "Основные настройки"
    3. Раздел "Параметры автоматической настройки"

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

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

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

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

    В качестве заключения

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

    Как быстро разобраться в Joomla?

      Центр Обучения Joomla!

      "Все, что нужно знать о Joomla в одном месте"

      Joomla Последняя версия
      Joomla! — 3.9.1

      Скачать

      Курс "Как создать свой сервис рассылки на Joomla?"

      Чтобы получить бесплатный доступ введите имя и ваш е-маил. Доступ будет выслан на ваш е-маил адрес.

       

      Базовый курс по Joomla 3.9

      В КУРСЕ ВАС ЖДЕТ:

      Видеоуроки по Joomla 3.9

      После уроков вы: зарегистрируете домен и хостинг, установите и правильно настроите CMS Joomla, установите и настроите шаблон, получите понимание как работать с Joomla.

      Лучшие расширения для Joomla

      Вы получите список и описание лучших бесплатных и платных расширений для Joomla.

      Пошаговый процесс создания сайта

      Выполните 22 действия по чек-листу и ваш сайт готов.

      Хостинг в подарок

      3 месяца качественного хостинга в подарок для беззаботного начала работы над своим проектом.
      Введите e-mail для которого нужно выставить доступ к курсу: