Центр обучения Joomla
    Какие шаблоны для Joomla самые быстрые?

    Какие шаблоны для Joomla самые быстрые?

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

    Содержание

    1. Факторы скорости загрузки
    2. Тестовая страница
    3. Сервисы проверки скорости
    4. Шаблон Protostar / без фреймворка
    5. Шаблон Helix 3 / фреймворк Helix 3
    6. Шаблон Helix Ultimate / фреймворк Helix Ultimate
    7. Шаблон Astroid / фреймворк Astroid
    8. Шаблон T3 BS3 / фреймворк T3
    9. Шаблон Master 2 / фреймворк Warp 7
    10. Yootheme Pro
    11. Шаблон Hydrogen / фреймворк Gantry 5
    12. Выводы и сравнительная таблица

    Факторы скорости загрузки

    Главным образом на скорость загрузки динамических сайтов (в частности Joomla) влияют:

    • хостинг (возможности сервера),
    • версия PHP,
    • качество исполняемого кода,
    • количество запросов к серверу,
    • объём данных (размер страницы на выходе).

    У каждого фактора есть свои составляющие. Например, сервер в зависимости от мощности может выдерживать определённую нагрузку, при превышении которой он начинает отвечать медленнее, а большую часть размера страницы, как правило, составляют изображения, которые кэшируются браузером, как и большинство файлов. Поэтому мы задействуем только те составляющие, на которые могут влиять фреймворк и сам шаблон, а именно:

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

    Теоретически, чем функциональнее фреймворк (чем больше возможностей он предлагает), тем больше исполняемого кода, тем медленнее скорость, но многие фреймворки предлагают свои опции, которые должны её оптимизировать. Например, в настройках шаблонов на Helix 3 есть вкладка Advanced, в которой можно активировать минификацию CSS- и JS-кода:

    Настройки оптимизации файлов на Helix 3
    Настройки оптимизации файлов на Helix 3

    Далее мы практически рассмотрим, как быстро работают страницы на определённых шаблонах и насколько эффективными являются ускоряющие опции.

    Тестовая страница

    Мы будем проводить все тесты на странице с минимум контента, а именно:

    • неотъемлемые элементы шаблона (например, кнопка «Наверх» в шаблоне Protostar),
    • меню сайта из 1-го пункта,
    • область контента с материалом Joomla, содержащим минимумом текста.

    Никаких изображений, сторонних расширений, шрифтов (в том числе Google Fonts) и лишних модулей на странице не задействовано:

    Тестовая страница на шаблоне Protostar
    Тестовая страница на шаблоне Protostar

    Сервисы проверки скорости

    Для проверки будем использовать сервисы PageSpeed Insights и WebPage Test.

    Критериями сравнения будут:

    • общая оценка в PageSpeed Insights (PSI),
    • время ответа сервера,
    • общее время загрузки страницы,
    • размер страницы,
    • количество запросов.

    Также при необходимости мы обратим внимание на отдельные рекомендации по оптимизации от PageSpeed Insights и на подключаемые файлы.

    Единое условие тестирования в WebPage Test: Simple TestingDesktop.

    WebPage Test Simple Testing
    WebPage Test → SimpleTesting → Desktop

    Шаблон Protostar / без фреймворка

    Первым на приём попадает шаблон Protostar, включенный в дистрибутив Joomla 3. Данный шаблон не базируется ни на каком стороннем шаблонном фреймворке и содержит минимум настроек.

    Тестовая страница
    Результат теста
    Список запросов
    Результат теста страницы на Protostar
    Оценка PSI для мобильных 98
    Оценка PSI для компьютеров 100
    Время до полного отображения страницы ~1.2 с
    Размер страницы 101 Кб
    Количество запросов 10

    Самые большие файлы:

    • jquery.min.js - 33.2 Кб

      Файл JS-библиотеки jQuery.

    • template.css - 25.5 Кб

      Это файл стилей шаблона.

    • IcoMoon.woff - 24.8 Кб

      Иконочный шрифт IcoMoon, который можно отключить только на уровне кода.

    Теоретически данный шаблон должен быть самым «легким», т. к. не использует никакого расширенного функционала, добавляемого сторонним шаблонным фреймворком.

    Шаблон Helix 3 / фреймворк Helix 3

    Данный шаблон должен нам продемонстрировать оптимизацию скорости загрузки популярного одноименного фреймворка.

    Тест 1: минимум опций фреймворка

    Шаблон предполагает множество настроек. Сперва мы протестируем страницу с отключенными опциями (без прелоадера, кнопки «Наверх» и т. д.), а также без изображений логотипа. Но активируем опцию Compile LESS to CSS, которая должна быть активна на рабочих сайтах.

    Результаты теста:

    Тестовая страница
    Результат теста
    Список запросов
    Helix 3 с минимумом опций фреймворка
    Оценка PSI для мобильных 92
    Оценка PSI для компьютеров 97
    Время до полного отображения страницы ~1.6 с
    Размер страницы 199 Кб
    Количество запросов 18

    Тест 2: максимум опций фреймворка

    Для чистоты эксперимента активируем в шаблоне следующие опции:

    • Preloader (предзагрузчик),
    • Go To Top (кнопка «Наверх»),
    • Sticky Header (закрепление меню),
    • Show Icon (иконка типа материала),
    • Enable Social Share (кнопки расшаривания в соцсетях).

    Это позволит нам убедиться, влияет ли активация опций на скорость в целом.

    Кроме того перед отображением страницы мы наблюдаем предзагрузчик.

    Тестовая страница
    Результат теста
    Helix 3 с включенными опциями фреймворка
    Оценка PSI для мобильных 91
    Оценка PSI для компьютеров 96
    Время до полного отображения страницы ~1.6 с
    Размер страницы 199 Кб
    Количество запросов 18

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

    Тест 3: опции оптимизации

    Оставляем конфигурацию опций из предыдущего теста (отключен только Preloader) и активируем функции сжатия:

    • Compress CSS (минификация и объединение CSS-файлов),
    • Compress Javascripts (минификация и объединение JS-файлов).
    Результат теста
    Helix 3 с включенными опциями оптимизации
    Оценка PSI для мобильных 99
    Оценка PSI для компьютеров 100
    Время до полного отображения страницы ~1.6 с
    Размер страницы 194 Кб
    Количество запросов 6

    Выросла оценка PageSpeed Insights (благодаря минификации кода и объединению файлов), а также уменьшилось количество HTTP-запросов с 18 до 6 (объединение файлов) и размер страницы сократился на 5 Кб (минификация кода). Однако по факту скорость осталась прежней. Это объясняется тем, что иногда один большой объединенный файл может загружаться дольше, чем несколько небольших, загрузка которых происходит почти параллельно.

    Значит ли это, что опции сжатия в Helix 3 не имеют смысла? Нет, не значит — всегда стоит проверять скорость по факту.

    Шаблон Helix Ultimate / фреймворк Helix Ultimate

    Фактически фреймворк Helix Ultimate копирует возможности предшественника, но отличается интерфейсом администрирования и в вёрстке шаблонов применяется Bootstrap 4.

    Протестируем скорость одноименного шаблона в 2-х вариациях: с отключенными и включенными опциями фреймворка.

    Тест 1: минимум опций фреймворка

    Тестовая страница
    Результат теста
    Список запросов
    Шаблон Helix Ultimate с отключенными опциями фреймворка
    Оценка PSI для мобильных 95
    Оценка PSI для компьютеров 99
    Время до полного отображения страницы ~1.6 c
    Размер страницы 173 Кб
    Количество запросов 14

    По сравнению с Helix 3 несколько уменьшилось количество запросов и размер страницы, что отразилось на оценке PageSpeed Insights, но скорость загрузки осталась прежней. Напрашивается вывод, что код оптимизирован не так хорошо и фреймворк пока «сыроват».

    Тест 2: максимум опций фреймворка

    Как и в случае с Helix 3, активируем в шаблоне следующие опции:

    • Preloader (предзагрузчик),
    • Go To Top (кнопка «Наверх»),
    • Sticky Header (закрепление меню),
    • Enable Open Graph (мета-теги Open Graph),
    • Enable Social Share (кнопки расшаривания в соцсетях).
    Результат теста
    Шаблон Helix Ultimate с включенными опциями фреймворка
    Оценка PSI для мобильных 93
    Оценка PSI для компьютеров 95
    Время до полного отображения страницы ~1.7 c
    Размер страницы 173 Кб
    Количество запросов 14

    Функционал фреймворка в виде CSS- и JS-файлов, как и в случае с Helix 3, подключается к веб-страницам независимо от того, активированы опции или нет. Фактическе хочется, чтобы всё было иначе: активируется опция - подключается нужный файл, но разработчики не заморачиваются. Посмотрим, как всё работает в других фреймворках.

    Шаблон Astroid / фреймворк Astroid

    Следующим на очереди фреймворк Astroid, который является клоном хеликса, и по результатам сравнения во многом превосходит конкурента. Давайте разберемся, так ли хорош Astroid в отношении скорости загрузки на примере одноименного шаблона.

    Тест 1: минимум опций фреймворка

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

    Тестовая страница
    Результат теста
    Список запросов
    Шаблон Astroid с отключенными опциями фреймворка
    Оценка PSI для мобильных 73
    Оценка PSI для компьютеров 89
    Время до полного отображения страницы ~1.9 c
    Размер страницы 289 Кб
    Количество запросов 24

    Относительно предшественников оптимизация шаблона сильно проседает по всем параметрам, и особенно заметно увеличивается время получения первого байта.

    HTTP-запросов в сумме аж 24, а размер страницы составляет 289 Кб. Среди подключаемых файлов мы видим файлы библиотеки MooTools, которые занимают почти 100 Кб. Применение jQuery и MooTools в одном расширении — явный признак низкой оптимизации, поэтому вывод для Astroid соответствующий.

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

    Шаблон T3 BS3 / фреймворк T3

    На примере этого шаблона разберемся, как работают шаблоны на фреймворке T3.

    Тест 1: минимум опций фреймворка

    T3 отличается от идентичных хеликсов и астроида тем, что в настройках шаблона минимум лишних функций (без предзагрузчиков, кнопки «Наверх» и т. д.), поэтому мы протестируем шаблон с настройками по умолчанию, но отключим Off-canvas Sidebar во вкладке Addons, т. к. это можно сделать в настройках (в отличие от предыдущих шаблонов) и предварительно нажмем кнопку LESS to CSS для компиляции стилей.

    Тестовая страница
    Результат теста
    Список запросов
    Шаблон T3 BS3
    Оценка PSI для мобильных 90
    Оценка PSI для компьютеров 96
    Время до полного отображения страницы ~1.5 c
    Размер страницы 171 Кб
    Количество запросов 19

    Мы наблюдаем небольшой размер страницы и относительно большое количество HTTP-запросов, снижение числа которых теоретически должно ускорить страницу. Чтобы проверить, так ли это, активируем опции Optimize CSS и Optimize JS для минификации и объединения файлов стилей и скриптов:

    Тест 2: опции оптимизации

    Результат теста
    Шаблон T3 BS3 с опциями оптимизации
    Оценка PSI для мобильных 99
    Оценка PSI для компьютеров 100
    Время до полного отображения страницы ~1.5 c
    Размер страницы 159 Кб
    Количество запросов 7

    Код был сжат и количество запросов сократилось с 19 до 7, что очень нравится сервису от Google, но фактически на скорости не отражается, т. к. время, затрачиваемое на запросы к серверу, вновь компенсируется временем загрузки одного большо файла.

    Тест 3: активные аддоны

    Отключим опции оптимизации CSS и JS, зайдём во вкладку Addons и активируем Off-canvas Sidebar:

    Результаты проверки:

    Шаблон T3 BS3 с активированным аддоном
    Оценка PSI для мобильных 85
    Оценка PSI для компьютеров 94
    Время до полного отображения страницы ~1.6 c
    Размер страницы 175 Кб
    Количество запросов 21

    Размер страницы увеличился на 12 Кб, а количество запросов к серверу — на 2. Это говорит о том, что активация опций во вкладке Addons добавляет к шаблону соответствующие файлы, отвечающие за нужный функционал, и это самый лучший подход. Другое дело, что во вкладке Addons данного шаблона можно активировать только Offcanvas (меню «за холстом» для мобильных устройств).

    Шаблон Master 2 / фреймворк Warp 7

    Warp 7 больше не обновляется, однако на нём существует достаточно много хороших шаблонов, которые продолжают появляться.

    Тест 1: минимум настроек фреймворка

    Следует учитывать, что шаблоны на Warp 7 генерируют DOM посредством CSS-фреймворка UIkit 2, и для отключения Bootstrap есть специальная опция в настройках шаблона. Перед тестом мы отключим Bootstrap (файлы бутстрапа не будут подключаться к странице), снимем отметки с чекбоксов в разделе Development и нажмем кнопку Compile LESS, как это положено для работающих сайтов.

    Кроме этого мы зайдём в Customizer и пропишем Arial для Body Font Family и Heading Font Family, чтобы исключить подключение шрифтов Google:

    В итоге получим:

    Тестовая страница
    Результат теста
    Список запросов
    Шаблон Master 2 с минимумом активных опций
    Оценка PSI для мобильных 96
    Оценка PSI для компьютеров 99
    Время до полного отображения страницы ~1.1 c
    Размер страницы 94 Кб
    Количество запросов 13

    Это лучший результат скорости загрузки среди всех испытуемых.

    Тест 2: опции оптимизации

    Warp 7 предлагает 3 варианта оптимизации скорости в разделе Compression:

    • Minify,
    • Minify + Data URIs,
    • Minify + Data URIs + Gzip.

    Выберем Minify и протестируем:

    Шаблон Master 2 с включенной опцией Minify
    Оценка PSI для мобильных 99
    Оценка PSI для компьютеров 100
    Время до полного отображения страницы ~1.1 c
    Размер страницы 79 Кб
    Количество запросов 7

    Функция Minify минифицирует код и объединяет файлы, что не значительно, но положительно влияет на время загрузки в целом. И это у Warp 7 получается лучше, чем у других.

    Yootheme Pro

    Мы добрались до флагманской разработки студии Yootheme. Тестировать Yootheme Pro будем на стиле Flow:

    Тест 1: минимум настроек

    Перед тестом сперва отключаем меню из Mobile Position и проверим, чтобы не был установлен внешний шрифт в StyleGlobal.

    Тестовая страница
    Результат теста
    Список запросов
    Yootheme Pro с минимумом настроек
    Оценка PSI для мобильных 99
    Оценка PSI для компьютеров 100
    Время до полного отображения страницы ~1.3 c
    Размер страницы 137 Кб
    Количество запросов 7

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

    Тест 2: опция объединения

    Однако Yootheme Pro имеет несколько настроек для оптимизации скорости:

    • Combine — это функция объединения CSS- и JS-файлов, которую включает большинство фреймворков.
    • Отложенная загрузка изображений.
    • Использовать WebP изображения.
    • Загрузить jQuery — по умолчанию jQuery в Yootheme Pro не используется.

    В данном случае для нас актуальна только функция Combine, которую мы и активируем:

    В результате имеем:

    Yootheme Pro с опцией Combine
    Оценка PSI для мобильных 99
    Оценка PSI для компьютеров 100
    Время до полного отображения страницы ~1.3 c
    Размер страницы 137 Кб
    Количество запросов 5

    Не изменилось ничего, кроме сокращения HTTP-запросов с 7 до 5 за счет объединения JS-файлов.

    Шаблон Hydrogen / фреймворк Gantry 5

    Наконец мы добрались до последнего испытуемого, который для многих является самым ожидаемым: мощнейший в отношении функционала фреймворк Gantry 5 будет рассматриваться на бесплатном шаблоне Hydrogen.

    Главной фишкой шаблонов на Gantry 5 является конструктор макета с системой так называемых частиц (particles) — отдельных элементов контента, которые можно размещать в модульных позициях прямо в настройках стиля шаблона. Сперва мы протестируем страницу в обусловленном виде без лишних элементов, потом посмотрим, как сказывается на скорости добавление частиц.

    Перед тестированием необходимо отключить режим разработки в ExtrasPlatform SettingsSystem - Gantry 5:

    Тест 1: страница без частиц

    Предварительно отключаем все частицы и устанавливаем шрифт Arial во вкладке Styles, чтобы к странице не подключались лишние файлы шрифтов.

    Тестовая страница
    Результат теста
    Список запросов
    Шаблон Hydrogen без частиц
    Оценка PSI для мобильных 92
    Оценка PSI для компьютеров 97
    Время до полного отображения страницы ~1.5 c
    Размер страницы 136 Кб
    Количество запросов 17

    Тест 2: страница с частицами

    Теперь добавим в футер 3 частицы:

    • Branding,
    • Copyright,
    • To Top.

    Страница приобрела следующий вид:

    Результат теста:

    Шаблон Hydrogen с дополнительными частицами
    Оценка PSI для мобильных 92
    Оценка PSI для компьютеров 97
    Время до полного отображения страницы ~1.6 c
    Размер страницы 136 Кб
    Количество запросов 17

    Не изменилось ничего, и это значит, что к странице подключаются все файлы вне зависимости от задействованных частиц.

    Итоги

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

    Сокращения:

    • Pr - Protostar
    • H3 - Helix 3
    • HU - Helix Ultimate
    • As - Astroid
    • T3 - T3
    • W7 - Warp 7
    • YP - Yootheme Pro
    • G5 - Gantry 5
    Критерий Pr H3 HU As T3 W7 YP G5
    Оценка PSI для мобильных 98 92 95 73 90 96 99 92
    Оценка PSI для компьютеров 100 97 99 89 96 99 100 97
    Время загрузки, с ~1.1 ~1.5 ~1.5 ~1.8 ~1.4 ~1.0 ~1.2 ~1.4
    Время до полного отображения страницы, с ~1.2 ~1.6 ~1.6 ~1.9 ~1.5 ~1.1 ~1.3 ~1.5
    Размер страницы, Кб 101 199 173 289 171 94 137 136
    Количество HTTP-запросов 10 18 14 24 19 13 7 17

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

    Явным лидером является шаблон на Warp 7, но следует иметь ввиду, что шаблоны на этом фреймворке, как и на Yootheme Pro, используют не Bootstrap, а UIKit, и мы тестировали шаблоны без подключенных бутстраповских файлов (это предусмотрено настройками шаблона). Это значит, что если вы решите задействовать расширение с использованием бутстрапа, то страница станет тяжелее. Иначе говоря: шаблоны на Warp 7 отлично подойдут тем, кто в некоторой степени владеет навыками вёрстки и понимает, о чем речь.

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

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

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

      Joomla.center is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.
      © Александр Куртеев. Центр обучения Joomla.
      ОГРНИП 307434525600161. Все права защищены. © 2008 - 2019