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

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

1 комментарий

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаблон 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, активировали Off-canvas Sidebar во вкладке Addons.

Шаблон 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

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

Упоминаемые термины:

CSS, Joomla, PHP, Меню сайта, JavaScript, Helix Ultimate, Open Graph, Bootstrap

Напишите комментарий...
Войти через ( зарегистрироваться? )
или разместить как гость
Загрузка комментария... Комментарий будет обновлен после 00:00.