Расширения

Featured

Обзор JSpeed (часть 2). Настройки плагина для ускорения Joomla

Алексей Хорошевский 02.02.2020

Тип – плагин Джумла.

Настройки JSpeed.

JSpeed – это русскоязычный плагин для увеличения скорости загрузки сайтов, сделанных на Joomla. Он обладает рядом инструментов и настроек, которые позволят без знаний программирования или серверного администрирования положительно повлиять на скорость. Также за счёт оптимизации и кэширования, данное расширение может снизить нагрузку на Ваш хостинг. В предыдущей статье «Обзор JSpeed (часть 1). Оптимизация скорости загрузки Joomla» мы рассмотрели основные возможности плагина и провели сравнительные тесты скорости загрузки сайта без оптимизации, с оптимизацией при помощи JCH Optimize Pro и с помощью JSpeed.

В обзоре участвует последняя, на момент написания статьи (23.01.2020), русскоязычная версия JSpeed 1.2 в Joomla 3.9.14.

Настройки JSpeed

Опции плагина разделены на 10 вкладок.

Плагин. Содержит краткое описание плагина и поле ввода e-mail адреса для получения обновлений с помощью встроенной в Joomla системы обновлений. У Вас должна быть действительная лицензия.
Описание. Перечень основных возможностей плагина.
Объединение файлов.
Настройки включения.
Настройки исключений.
Оптимизация изображений.
Объединить изображения.
HTTP/2.
Отложенная загрузка (Lazy-load).
CDN.

Все опции переведены на русский язык и оснащены достаточно подробными русскоязычными подсказками. Рассмотрю наиболее интересные, на мой взгляд, параметры.

В верхней части плагина, над вкладками, есть три полезные кнопки. При помощи них мы ускоряем Joomla за счёт кэширования на стороне клиента.

Оптимизация .htaccess. Нажмите эту кнопку, чтобы оптимизировать файл «.htaccess», добавив специальные директивы для использования кэширования в браузере и GZIP сжатия. Обратите внимание, что на хостинге должны быть включены Apache модули: mod_expires, mod_headers и mod_deflate
Восстановить .htaccess. Нажмите эту кнопку, чтобы удалить код оптимизации, который добавил JSpeed, в «.htaccess», и восстановить исходный файл.
Очистить кэш. Нажмите эту кнопку, чтобы очистить кэш, используемый плагином для хранения объединённых ресурсов, оптимизированных ресурсов и кэша страниц. Необходимо очищать кэш плагина после того, как Вы изменили CSS или скрипты на сайте. Это не очищает кэш Joomla или других расширений кэширования.

Объединение файлов

В основном, содержит настройки, позволяющие минимизировать количество запросов (обращений к серверу) и уменьшить размер кода страницы.

Объединить CSS и Javascript файлы. Несколько CSS или Javascript файлов будут объединены в один общий файл или сгруппированы в несколько файлов, если это будет возможно. Эта опция позволяет сократить количество HTTP запросов, общий размер страницы и время загрузки.
Уровень минимизации HTML. Используя уровень Низкий, несколько пробелов за пределами элементов будут сокращены до одного. Используя уровень Нормальный, все ненужные пробелы или переносы строк будут удалены. При использовании уровня Высокий чётные или двойные кавычки вокруг атрибутов будут удалены. Обратите внимание, что использование уровня Высокий может вызвать проблемы со сторонними расширениями и сканерами, такими как используемый для генерации карты сайта с помощью JSitemap. Если Вы столкнулись с подобными проблемами, переключитесь обратно на Нормальный.
Срок кэширования. Можно задать время жизни кэша объединённых файлов, которые создал JSpeed (от 10 минут до 2-х недель). Это не только оптимизация Joomla, но и снижение нагрузки на хостинг. Ко всему кэширование может существенно повлиять на такой важный показатель оценки скорости сайта, как время получения первого байта (First Byte Time (FBT)). Обратите внимание, что это кэширование только файлов, которые создал JSpeed, оно не заменяет кэширование в Joomla.
Метод HTTP соединения. Выберите метод HTTP соединения, используемый сканером для сканирования и анализа данных Вашего сайта. Этот метод влияет на функцию автозаполнения полей исключений. Если у Вас пустые поля в настройках на вкладке Настройки исключений, попробуйте переключиться на другой метод.

Настройки включения

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

Включать все ресурсы. Все файлы, управляемые сторонними расширениями и внешними доменами, будут включены в объединённый файл.
Включить импортированные CSS файлы. Если у Вас есть CSS файлы, использующие операторы «@import», при включении этой опции, содержимое каждого такого файла будет извлекаться и напрямую включаться в файл стилей для ускорения загрузки.
Включить PHP и файлы с внешних ресурсов. Динамические файлы Javascript и CSS с расширением «.php» и файлы, указывающие на внешние домены, будут включены в объединённый файл. Эта функция требует наличия библиотеки PHP «CURL» или «allow_url_fopen» на Вашем сервере.

Настройки исключения

Не важно при помощи какого расширения Вы проводите ускорение Joomla, всегда есть вероятность возникновения ошибок. На данной вкладке (рисунок ниже) JSpeed содержит ряд настроек, которые помогут тонко сконфигурировать исключения CSS, JavaScript файлов и встроенных стилей. Список файлов, доступных для исключения, формируется автоматически, плюс, можно задать нужное значение самостоятельно. Для автоматического формирования перечня вариантов Ваш сайт должен быть включён (Система – Общие настройки – Сайт – Сайт выключен, выберите Нет) и «сканер» JSpeed должен использовать подходящий метод HTTP соединения. Метод можно выбрать на вкладке Объединение файлов, опция Метод HTTP соединения.

Кроме указания имени исключаемого файла можно исключить все стили или скрипты определённых расширений. Также можно настроить исключения для определённых пунктов меню или отключить оптимизацию всех встроенных в HTML стилей и/или скриптов.

Оптимизация изображений

Сам предпочитаю оптимизировать изображения до их загрузки на хостинг. Это влияет положительно на скорость загрузки сайта, объём занимаемого сайтом дискового пространства, объём занимаемого резервными копиями сайта дискового пространства, на серверную нагрузку и т.д.. Для этого использую растровый графический редактор и FileOptimizer64. Я привожу изображения к тому разрешению, с которым они будут отображаться на сайте, плюс, сжимаю их для уменьшения размера файла (в килобайтах).

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

Включить оптимизацию изображений. Изображения будут сжаты на лету, чтобы уменьшить использование пропускной способности соединения и ускорить работу Вашего сайта. Качество изображений может быть значительно снижено на больших экранах.
Минимальная ширина для оптимизации изображений. Выберите минимальную ширину изображений, которые должны проходить оптимизацию. Лучше исключить небольшие изображения, так как они лёгкие и не нуждаются в какой-либо оптимизации
Качество сжатых изображений. Вы можете выбрать качество изображения для оптимизированных изображений. Высокое значение будет означать более высокое качество, но и больший размер.
Включить изменение размера изображения. Можно включить изменение размера изображений до более низкого разрешения, чтобы уменьшить размер файла.
Процент изменения размера. Выберите процент, до которого Вы хотите уменьшить изображения. Например, если у Вас есть изображение шириной 1500 пикселей и применяется процент изменения размера 50%, размер изображения будет изменён до 750 пикселей.
Минимальная ширина для изменения размера изображений. Выберите минимальную ширину изображений, которым нужно изменить разрешение на более низкое. Следует избегать изменения размера небольших изображений и применять уменьшение размера только к большим и тяжёлым изображениям.

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

Исключить изображения по имени/пути. Если нужно исключить определённые изображения из процесса оптимизации, можете ввести часть имени или пути, чтобы исключить эти файлы. Например, если хотите исключить изображение по следующему пути: «images/socials/mycustomimage.png», достаточно ввести «socials», чтобы исключить всю папку, или «custom», чтобы исключить изображение с именем «mycustomname.png».
Удаление строки. Если у Вас возникают странные ошибки, такие как код JavaScript внутри содержимого страницы, можете указать этот код в данном поле, чтобы удалить его.

Объединить изображения

JSpeed позволяет ускорить Joomla ещё и за счёт объединения фоновых изображений – CSS-спрайты. Этим мы ускоряем Joomla за счёт сокращения количества запросов к серверу. Есть ряд настроек (рисунок ниже) для конфигурации данного процесса.

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

Плюс, Вы можете самостоятельно настроить включения или исключения файлов.

HTTP/2

В JSpeed есть возможность форсирования загрузки разных типов файлов по протоколу HTTP/2 (рисунок ниже). Это работает только в том случае, если Ваш хостинг поддерживает данный протокол. Об этом можно узнать в службе технической поддержки Вашего хостинг провайдера, или проверив Ваш сайт в одном из этих сервисов Dareboost.com, Tools.keycdn.com.

В настройках плагина можно выбрать, какие типы файлов Вы хотите передавать по HTTP/2. Можно указать их вручную или выбрать из списка.

Подробнее о данном протоколе можно прочесть в статье «Все, что нужно знать о HTTP/2».

Отложенная загрузка в Joomla

JSpeed содержит несколько настроек (рисунок ниже), которые помогут сконфигурировать отложенную загрузку в Joomla. Её ещё называют «ленивая загрузка» или Lazy loading. Речь идёт о технологии, когда изображения на сайте загружаются в браузер пользователя только тогда, когда он прокручивает страницу к тому месту, где они расположены. То есть, картинки подгружаются, когда пользователь может их увидеть в окне своего браузера. Это сокращает размер загружаемого контента и время загрузки страницы в целом. Еще плюс - экономия трафика.

Можно настроить исключение изображений по URL, папке или CSS классу тега «img».

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

CDN

Если Вы используете CDN (от англ. Content Delivery Networks – сеть доставки контента), то JSpeed позволяет настроить до трёх CDN доменов и указать, какие типы файлов должны передаваться по каждому домену (рисунок ниже). Можно указывать свои собственные типы.

Немного подробнее про сеть доставки контента можно прочесть в статье «Что такое CDN и как это работает?». Отмечу, что CDN может стоить приличных денег. Например, Айри предлагает тариф от 330 рублей в месяц. Но туда также входит ряд дополнительных услуг в виде защиты от DDOS, инструментов оптимизации скорости и т.д.. Cdnnow предлагают тарифы от 500 рублей в месяц. А у Cloudflare есть бесплатный тариф.

Некоторые хостинг провайдеры, например, HostPro, FREEhost и Fozzy предлагают CDN в составе своих услуг.

Обратите внимание, что CDN нужно далеко не всем сайтам. Чем уже география расположения Вашей целевой аудитории, тем менее полезна для Вас будет сеть доставки контента. Например, если Вы ориентируетесь на всю Украину, то достаточно разместить сайт на серверах в Киеве. Этот город расположен в центре страны, плюс он является крупнейшим городом.

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

А если Вы ориентированы на один конкретный город/область, тогда ищите хостинг с серверами как можно ближе к нему и про CDN, как средство ускорения сайта, можно не вспоминать. Также стоит отметить ,что при помощи CDN мы ускоряем Joomla за счёт параллельных загрузок с нескольких доменов.

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