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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Матрица p-value

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

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

Матрица p-value

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

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

Матрица p-value

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

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

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

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

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

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

BoxPlot

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

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

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

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

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

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

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

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

Таргетируемся на очень обеспеченных людей

Как частота показов рекламы влияет на CTR?

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

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

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

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

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