Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby

В этом исследовании мы изучили 200 сайтов, разработанных на 4 системах. Мы использовали два инструмента — Google PageSpeed и Selenium — для имитации throttling.

Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby

Идея для этой статьи возникла, когда мы изучали результаты рекламной кампании для клиента с очень запущенным и медленным сайтом. Отчет о скорости в Google Analytics показывал следующие картину.

Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby

Тут два сегмента:

  • Посетители сайта которые совершали микроконверсии, это события — добавление в корзину, оформление заказ, нажатие на номер телефона, связь в чате, добавление в избранное и т.д.
  • Не совершали никаких действий — просто посмотрели и ушли.

Тут определенно напрашивается вывод о том, что скорость загрузки сайта влияет на конверсию сайта и на кол-во клиентов.

Мы просмотрели множество других проектов и нашли похожую картину

Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby
Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby
Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby

Вы можете провести такой же отчет у своих компаний. Для этого нужно зайти в Google Analytics в раздел "Поведение" > "Скорость загрузки сайта" > "Время загрузки страниц" > Выбрать вкладку 'Распределение' и метрику 'Сред. взаимодействие с документом'. Сделать один сегмент с конверсиями, второй без конверсий. В некоторых случаях можно добавить фильтрацию для новых пользователей, если у вас много повторных покупок. А если у вас вдруг нет никаких настроенных конверсий — то можно сделать сегмент с фильтрацией по глубине просмотра.

Сред. взаимодействие с документом — среднее время (в секундах), которое браузер затрачивает на обработку документа. Документация по разделу.

Вы можете поделиться в комменты своими принтскринами:)

Если этого отчета вам мало, то вот тут есть 30 кейсов с экспериментами про скорость и влияние этого на конверсию. И цитата самого Google

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

Google, Поисковик

Исследование

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

Bitrix — самый популярный e-commerce в РФ
WordPress — самый популярный в мире
Tilda — самый популярный конструктор сайтов в РФ
Gatsby — набирает популярность и захватит весь мир:)

На каждую систему было выбрано 50 сайтов. Сайты брались из официальной страницы и сайта awwwards.com. В равной степени участвуют интернет магазины и обычные проекты. Полный список тут.

Замеры производились двумя инструментами. Сам тест написан на Python и может быть повторен в других кейсах.

Google pageSpeed
Сервис google для оценки сайтов. Он содержит в себе уникальные метрики замера скорости, а также рекомендации по улучшению загрузки. Google использует этот сервис для обучения своих поисковых алгоритмов. Мы уверены, что показатели этого сервиса влияют на вероятность попадания в обучающую выборку нейронной сети.

Selenium webdriver
Инструмент для тестирования сайтов. В нем мы делали throttling — имитировали медленное подключение к сайту и вытаскивали показатели performance из консоли браузера. Этот инструмент открывает браузер и выполняет действия в нем. Это значит, что вы можете сделать throttling самостоятельно, используя режим разработчика в вашем браузере. Это точно есть в Chrome.

Результаты Google pageSpeed

Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby

Разберем какие показатели есть в таблице.

Speed index score — Индекс скорости измеряет, насколько быстро контент визуально отображается во время загрузки страницы. Lighthouse сначала снимает видео загрузки страницы в браузере и вычисляет визуальный переход между кадрами. Затем Lighthouse использует модуль Speedline Node.js для расчета индекса скорости.

Изучать просто средние нам не интересно, попробуем разбить данные boxplot чтобы лучше изучить распределение. Что такое boxplot?

Чем выше, тем лучше.

Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby

Для любителей статистики матрица p-value. Округление до 2 знаков.

Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby

Performance — общая оценка рассчитана из показателей, которые будут рассмотрены ниже, и еще 3 показателей, которые мы решили убрать, чтобы не перегружать информацией. Более подробное описание можно найти тут.
Чем больше значение, тем лучше.

Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby

Для любителей статистики матрица p-value

Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby

First contentful paint - измеряет, сколько времени требуется браузеру для отображения первой части содержимого DOM после того, как пользователь перейдет на вашу страницу. Проще говоря это время в миллисекундах, которое нужно браузеру для того чтобы показать первые объекты сайта, а не белый лист.

Чем меньше значение, тем лучше.

Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby

Матрица p-value

Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby

Largest Contentful Paint. — это показатель, который измеряет время, необходимое веб-сайту, чтобы показать пользователю самый большой контент на экране, полный и готовый к взаимодействию. Этот показатель входит в Google Core Web Vitals.

Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby

Чем меньше значение, тем лучше

Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby

Матрица p-value

Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby

First Meaningful Paint — метрика, которая показывает, за какое время контент на странице становится виден пользователю. Это метрика включает в себя время от начала загрузки страницы до момента, когда на сайте отобразился основной контент.

Чем меньше значение, тем лучше.

Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby

Матрица p-value

Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby

Server_response_time - Время ответа сервера измеряет время, требуемое для загрузки HTML-кода, необходимого для начала рендеринга страницы с вашего сервера, за вычетом сетевой задержки между Google и вашим сервером.

Результаты Selenium webdriver

Причина, по которой мы проводим еще один замер через этот инструмент заключается в том, что мы захотели сделать throttling с целью замедления трафика, чтобы посмотреть, как будет себя вести сайт без подключения к WiFi. В этом инструменте нет таких показателей как в Google pageSpeed, поэтому индикатором скорости мы взяли domContentLoadedEventEnd, он показывает время, когда основные файлы DOM загружены.

Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby

Вот так полученные показатели согласуются с предыдущими результатами.
Матрица корреляции

Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby

Было сделано 4 режима скорости:
Wifi — download 70 mb/s,
3g+ — download 12 mb/s,
3g — download 3 mb/s,
2g — download 1 mb/s

Результаты domContentLoadedEventEnd в миллисекундах. Чем меньше значение, тем лучше

Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby

График этой таблицы для наглядности. Чем выше, тем хуже.

Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby

BoxPlot

Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby

Еще одно интересное наблюдение — вес страниц.
Ожидалось что здесь самым тяжелым будет bitrix, но оказалось что это не так. TransferSize — вес страницы в mb.

Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby

Вывод

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

Данное исследование пытаеться показать общую картину. Как технические возможности, так и культуру разработки определенных сообществ. Если вы попали в ситуацию, когда в отчете скорости загрузки страницы вы видите вот такую картину — то это означает, что вы выкидываете часть своего рекламного бюджета в никуда и теряете деньги на упущенных клиентах.

Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby

Конкретно этот бизнес терял от 70 до 40 процентов рекламного бюджета и не получал соответственно нужной отдачи. Упущенная прибыль за год составила примерно от 12 000 000 до 18 000 000 рублей. Стоили ли готовые интеграции и экономия на IT разработке этого?

Кстати быстрые сайты делают тут.

Планы на будущее

Если данный формат исследований зайдет, то можно будет исследовать что-то еще. Например, влияние этих показателей на поисковую выдачу, сравнение Gatsby c более серьезными противниками — Next js, Vue js, Svelte js.
Если еще более радикальные идеи, чтобы заставить диванных специалистов писать еще более огненные комменты:)

Мы планируем делать такие публикации дальше. Подписывайтесь на нас, если было интересно :)

Другие наши статьи

Ответы на популярные вопросы

Вы сравниваете оленей, золотых рыбок, котов и дельфина в плавании -

Это так если вы разработчик. Если вы обычный человек - то вам все равно на чем сделано. Главное чтобы работало и выполняло свои функции. В начале статьи мы обозначили проблему, которую игнорируют большинство разработчиков, а рядовой маркетолог на это вообще не смотрит. Чуть выше в абзаце написано и на самих BoxPlot видно - что не важно на каком Frame делать, если делать "правильно". Вопрос в том, где это "правильно" сделать проще? :) Подобные измерения пытаются ответить на вопрос - какая средняя температура в палате.
Теперь немного статистики. Мы можем замерить рост японцев и американцев. В среднем получиться что американцы выше. Если мы будем брать отдельно каждого человека и сравнивать друг с другом, то мы сможем предположить какие факторы влияют на его рост. Мы так же найдем японца, который будет выше какого то американца, но таких случаем будет не много. А мы хотим узнать как они отличаются по росту в общем. Такие исследования с дроблением на группы, пытаются ответить на вопрос "Какая вероятность что мы получим Х при таком то Y". В данном кейсе - какая вероятность получить быстрый сайт, в зависимости от выбора платформы. P-value у gatsby ниже 1 процента если что.
Мы в прошлом работали с WordPress и перешли на Gatsby не для того чтобы эту статью написать :)

Обновление -
по Y вес страницы, по X - domContentLoadedEventEnd

Сравнение скорости загрузки сайтов, сделанных на Bitrix, Tilda, WordPress и Gatsby

Можно включить кэш и все будет ок

Вы думаете никто из 200 сайтов его не включал? Мы сделали форму - тут можно скинуть работы, которые точно включили. Мы запустим тест и в следующей статье сравним результаты.

3232
93 комментария

Все это тормознутая ерунда, которая годится только для первичного этапа. Лучшая платформа, это нормально написанный чистый код, без тормознутых фреймворков и CMS.

11
Ответить

Да, только заказ индивидуальной системы разработчику - это все равно, что добровольно подсесть на героин: точно также барыги-разработчики будут раз за разом требовать денег, в то время, как тот же Вордпресс поддерживается и работает всегда. Хотя он и не самый быстрый, это правда.

14
Ответить

На чем угодно можно написать, просто надо делать кеш

7
Ответить

Согласен, большинство сайтов (до 50 страниц по моему мнению) по прежнему лучше делать на html+css и редактировать через IDE, это даже удобнее чем пользоваться админкой, с этим и контент-менеджер справиться.

3
Ответить

Вот, видно подход Джедая! Поддерживаю!

1
Ответить

CMS - вообще не должна влиять на показатели из статьи. Потому что это просто редактор БД:) 
А вот с фреймворк не согласен. Они могут облегчить написание многих готовых компонентов - вот например такого компонента https://www.gatsbyjs.com/plugins/gatsby-image/ 

Ответить

Интересно, как нативный код Жс ты будешь поддерживать и сколько тебе будет это стоить. И понятно что фреймворк Gatsby при сравнении с CMS в скорости будет выигрывать.
По поводу стартапов: Это уже с миллионами долларов инвестиций и большой командой разработчиков начинающая компания, но в большинстве случаев это что-то написанное на коленках из подручных средств и дописывается по мере финансирования. А переписывать это дорого для начальных этапов, поэтому увы.

Ответить