- Факторы скорости загрузки
- Тестовая страница
- Сервисы проверки скорости
- Шаблон Protostar / без фреймворка
- Шаблон Helix 3 / фреймворк Helix 3
- Шаблон Helix Ultimate / фреймворк Helix Ultimate
- Шаблон Astroid / фреймворк Astroid
- Шаблон T3 BS3 / фреймворк T3
- Шаблон Master 2 / фреймворк Warp 7
- Yootheme Pro
- Шаблон Hydrogen / фреймворк Gantry 5
- Итоги
Скорость загрузки остаётся одним из важнейших факторов, определяющих качество сайта как в глазах живых пользователей, так и поисковых систем. Поэтому мы решили экспериментальным путём определить, в какой степени на этот фактор влияет как сам шаблон, так и фреймворк, на котором он базируется.
Факторы скорости загрузки
Главным образом на скорость загрузки динамических сайтов (в частности работающих на 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 Testing → Desktop.
Шаблон Protostar / без фреймворка
Первым на приём попадает шаблон Protostar, включенный в дистрибутив Joomla 3. Данный шаблон не базируется ни на каком стороннем шаблонном фреймворке и содержит минимум настроек.
| Оценка 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, которая должна быть активна на рабочих сайтах.
| Оценка PSI для мобильных | 92 |
| Оценка PSI для компьютеров | 97 |
| Время до полного отображения страницы | ~1.6 с |
| Размер страницы | 199 Кб |
| Количество запросов | 18 |
Тест 2: максимум опций фреймворка
Для чистоты эксперимента активируем в шаблоне следующие опции:
- Preloader (предзагрузчик),
- Go To Top (кнопка «Наверх»),
- Sticky Header (закрепление меню),
- Show Icon (иконка типа материала),
- Enable Social Share (кнопки «расшаривания» в соцсетях).
Это позволит нам убедиться, влияет ли активация опций на скорость в целом.
Кроме того перед отображением страницы мы наблюдаем предзагрузчик.
| Оценка PSI для мобильных | 91 |
| Оценка PSI для компьютеров | 96 |
| Время до полного отображения страницы | ~1.6 с |
| Размер страницы | 199 Кб |
| Количество запросов | 18 |
Почти ничего не поменялось. Из этого следует, что к шаблону подключаются все файлы вне зависимости от того, активна функция или нет.
Тест 3: опции оптимизации
Оставляем конфигурацию опций из предыдущего теста (отключен только Preloader) и активируем функции сжатия:
- Compress CSS (минификация и объединение CSS-файлов),
- Compress Javascripts (минификация и объединение JS-файлов).
| Оценка 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: минимум опций фреймворка
| Оценка 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 (кнопки расшаривания в соцсетях).
| Оценка PSI для мобильных | 93 |
| Оценка PSI для компьютеров | 95 |
| Время до полного отображения страницы | ~1.7 c |
| Размер страницы | 173 Кб |
| Количество запросов | 14 |
Функционал фреймворка в виде CSS- и JS-файлов, как и в случае с Helix 3, подключается к веб-страницам независимо от того, активированы опции или нет. Фактическе хочется, чтобы всё было иначе: активируется опция - подключается нужный файл, но разработчики не заморачиваются. Посмотрим, как всё работает в других фреймворках.
Шаблон Astroid / фреймворк Astroid
Следующим на очереди фреймворк Astroid, который является клоном хеликса, и по результатам сравнения во многом превосходит конкурента. Давайте разберемся, так ли хорош Astroid в отношении скорости загрузки на примере одноименного шаблона.
Тест 1: минимум опций фреймворка
Как и прежде, тестируем шаблон с отключенным прелоадером, кнопкой «Наверх» и прочими опциями, которые могут добавить на страницу что-то лишнее, а также удалим изображения логотипа.
| Оценка 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 для компиляции стилей.
| Оценка PSI для мобильных | 90 |
| Оценка PSI для компьютеров | 96 |
| Время до полного отображения страницы | ~1.5 c |
| Размер страницы | 171 Кб |
| Количество запросов | 19 |
Мы наблюдаем небольшой размер страницы и относительно большое количество HTTP-запросов, снижение числа которых теоретически должно ускорить страницу. Чтобы проверить, так ли это, активируем опции Optimize CSS и Optimize JS для минификации и объединения файлов стилей и скриптов:
Тест 2: опции оптимизации
| Оценка PSI для мобильных | 99 |
| Оценка PSI для компьютеров | 100 |
| Время до полного отображения страницы | ~1.5 c |
| Размер страницы | 159 Кб |
| Количество запросов | 7 |
Код был сжат и количество запросов сократилось с 19 до 7, что очень нравится сервису от Google, но фактически на скорости не отражается, т. к. время, затрачиваемое на запросы к серверу, вновь компенсируется временем загрузки одного большо файла.
Тест 3: активные аддоны
Перед проверкой отключили опции оптимизации CSS и JS, активировали Off-canvas Sidebar во вкладке Addons.
| Оценка 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.
| Оценка PSI для мобильных | 96 |
| Оценка PSI для компьютеров | 99 |
| Время до полного отображения страницы | ~1.1 c |
| Размер страницы | 94 Кб |
| Количество запросов | 13 |
Это лучший результат скорости загрузки среди всех испытуемых.
Тест 2: опции оптимизации
Warp 7 предлагает 3 варианта оптимизации скорости в разделе Compression:
- Minify,
- Minify + Data URIs,
- Minify + Data URIs + Gzip.
Выберем Minify и протестируем.
| Оценка PSI для мобильных | 99 |
| Оценка PSI для компьютеров | 100 |
| Время до полного отображения страницы | ~1.1 c |
| Размер страницы | 79 Кб |
| Количество запросов | 7 |
Функция Minify минифицирует код и объединяет файлы, что не значительно, но положительно влияет на время загрузки в целом. И это у Warp 7 получается лучше, чем у других.
Yootheme Pro
Мы добрались до флагманской разработки студии Yootheme. Тестировать Yootheme Pro будем на стиле Flow.
Тест 1: минимум настроек
Перед тестом сперва отключаем меню из Mobile Position и проверим, чтобы не был установлен внешний шрифт в Style → Global.
| Оценка 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, которую мы и активируем.
| Оценка PSI для мобильных | 99 |
| Оценка PSI для компьютеров | 100 |
| Время до полного отображения страницы | ~1.3 c |
| Размер страницы | 137 Кб |
| Количество запросов | 5 |
Не изменилось ничего, кроме сокращения HTTP-запросов с 7 до 5 за счет объединения JS-файлов.
Шаблон Hydrogen / фреймворк Gantry 5
Наконец мы добрались до последнего испытуемого, который для многих является самым ожидаемым: мощнейший в отношении функционала фреймворк Gantry 5 будет рассматриваться на бесплатном шаблоне Hydrogen.
Главной фишкой шаблонов на Gantry 5 является конструктор макета с системой так называемых частиц (particles) — отдельных элементов контента, которые можно размещать в модульных позициях прямо в настройках стиля шаблона. Сперва мы протестируем страницу в обусловленном виде без лишних элементов, потом посмотрим, как сказывается на скорости добавление частиц.
Перед тестированием необходимо отключить режим разработки в Extras → Platform Settings → System - Gantry 5.
Тест 1: страница без частиц
Предварительно отключаем все частицы и устанавливаем шрифт Arial во вкладке Styles, чтобы к странице не подключались лишние файлы шрифтов.
| Оценка PSI для мобильных | 92 |
| Оценка PSI для компьютеров | 97 |
| Время до полного отображения страницы | ~1.5 c |
| Размер страницы | 136 Кб |
| Количество запросов | 17 |
Тест 2: страница с частицами
Теперь добавим в футер 3 частицы:
- Branding,
- Copyright,
- To Top.
| Оценка 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.
Упоминаемые термины:
CSS, Joomla, PHP, Меню сайта, JavaScript, Helix Ultimate, Open Graph, Bootstrap