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

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

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

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

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

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

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

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

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

Тест 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 не имеют смысла? Нет, не значит — всегда стоит проверять скорость по факту.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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