В данном исследовании мы исследовали 200 веб-сайтов, созданных на четырех различных платформах. Для замера показателей использовали Google PageSpeed и и Selenium для иммитации мобильного интернета.
Мы пришли к идее проведения этого исследования, когда анализировали результаты рекламной кампании для клиента, у которого был очень медленный сайт. При изучении отчета о скорости в Google Analytics, мы увидели следующую картину.
Здесь можно выделить два типа посетителей сайта: те, кто совершает микроконверсии (такие как добавление товара в корзину, оформление заказа, нажатие на номер телефона, связь в чате, добавление в избранное и т.д.) и те, кто просто просматривает сайт и уходит без каких-либо действий.
Из этого можно сделать вывод о том, что скорость загрузки сайта оказывает влияние на конверсию и количество клиентов. Мы изучили множество других проектов и обнаружили аналогичную тенденцию.
Для того чтобы создать аналогичный отчет для своих компаний, нужно выполнить следующие шаги:
- Зайти в Google Analytics (Не GA4) и перейти в раздел "Поведение".
- Выбрать вкладку "Скорость загрузки сайта" и далее "Время загрузки страниц".
- Выбрать вкладку "Распределение" и метрику "Среднее время взаимодействия с документом". Сред. взаимодействие с документом — среднее время (в секундах), которое браузер затрачивает на обработку документа. Документация по разделу.
- Создать два сегмента: один с конверсиями, второй без конверсий.
- В случае множества повторных покупок, можно добавить фильтрацию для новых пользователей.
- Если у вас нет настроенных конверсий, то можно создать сегмент с фильтрацией по глубине просмотра.
Отчет о скорости загрузки в Яндекс Метрике
В разделе "Мониторинг" в разделе "Отчеты" есть опция "Время загрузки страниц". Используйте опцию "Сравнить сегменты", чтобы выбрать два сегмента - один, который совершает целевые действия, и другой, который этого не делает. Затем сравните показатели этих двух сегментов, чтобы увидеть разницу. Более подробную информацию вы можете найти в документации по этому разделу.
Если вам не хватает этого отчета, то здесь представлены 30 кейсов с экспериментами, связанными со скоростью и ее влиянием на конверсию. Кроме того, вот цитата от Google.
В последние годы мы добавили в Поиск новые критерии ранжирования, учитывающие удобство ресурса. В частности, это скорость загрузки страниц и оптимизация для мобильных устройств. А несколько недель назад специалисты из команды Chrome представили ряд основных интернет-показателей, измерение которых поможет владельцам сайтов оценивать скорость работы и визуальную стабильность своих ресурсов.
Исследование скорости загрузки
Мы выбрали четыре платформы для создания сайтов и изучили скорость загрузки, поскольку очевидно, что скорость имеет важное значение для продвижения.
Эти четыре платформы включают в себя:
Bitrix - самый популярный e-commerce в РФ,
WordPress - самый популярный в мире,
Tilda - самый популярный конструктор сайтов в РФ
Gatsby - молодой Framework на React
Для каждой из этих платформ было выбрано 50 сайтов, взятых из официальных страниц и сайта awwwards.com. В этом наборе участвовали как интернет-магазины, так и обычные проекты в равной степени. Полный список сайтов доступен по ссылке.
Для измерения скорости загрузки мы использовали два инструмента, а сам тест был написан на языке Python и может быть повторен в других случаях.
Google pageSpeed это сервис от Google, который используется для оценки скорости загрузки сайтов. Он содержит уникальные метрики для измерения производительности сайта и рекомендации по улучшению его загрузки. Данный сервис также используется Google для обучения своих поисковых алгоритмов. Мы считаем, что результаты PageSpeed могут влиять на вероятность включения вашего сайта в обучающую выборку нейронной сети.
Selenium WebDriver - это инструмент для автоматизации тестирования веб-сайтов. Он позволяет имитировать медленное соединение с сайтом и получать показатели производительности из консоли браузера. WebDriver открывает браузер и позволяет выполнить различные действия на сайте. Однако, для имитации медленного соединения вы можете использовать встроенный режим разработчика в вашем браузере, который доступен в Chrome.
Результаты Google pageSpeed
Speed index score — это показатель того, насколько быстро пользователь видит содержимое страницы при ее загрузке. Для расчета этого индекса, Lighthouse записывает видео загрузки страницы в браузере и вычисляет визуальный переход между кадрами. Затем используется модуль Speedline Node.js для определения значения индекса скорости.
Изучать просто средние нам не интересно, попробуем разбить данные boxplot чтобы лучше изучить распределение. Что такое boxplot?
Для любителей статистики матрица p-value. Округление до 2 знаков.
Performance – общая оценка производительности рассчитывается на основе ряда показателей, которые будут рассмотрены ниже, а также трех дополнительных показателей, которые были исключены, чтобы не перегрузить информацией. Подробное описание доступно по ссылке.
Чем выше значение, тем лучше производительность.
First Contentful Paint (FCP) измеряет время, которое требуется браузеру для отображения первой части контента DOM после перехода пользователя на страницу. В других словах, это количество времени в миллисекундах, необходимое браузеру для показа первых элементов сайта вместо пустой страницы.
Чем меньше значение, тем лучше.
Largest Contentful Paint (LCP) - это метрика, которая оценивает время, необходимое для отображения наиболее крупного и готового к взаимодействию контента на экране веб-сайта для пользователя. Эта метрика является частью Google Core Web Vitals.
Чем меньше значение, тем лучше
Результаты Selenium webdriver
Мы проводим еще один замер через этот инструмент, чтобы замедлить трафик и произвести 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.
Получаеться лидеры по скорости загрузки еще и весят больше, что означает что их производительность может быть еще выше при одинаковом контенте на сайте.
Вывод
Очевидно, что хороший продукт может быть создан на любом фреймворке, несмотря на то, что в наших выборках содержатся лучшие работы из официальных источников.
Данное исследование стремится представить общую картину, включая технические возможности и культуру разработки различных представителей систем. Если вы столкнулись с ситуацией, когда отчет о скорости загрузки страницы демонстрирует подобную картину, это указывает на то, что вы тратите часть своего рекламного бюджета впустую и упускаете возможность привлечь клиентов.
Этот бизнес потерял от 40 до 70 процентов своего рекламного бюджета и не получил соответствующего результата. В результате, потеря прибыли за год составила примерно от 12 000 000 до 18 000 000 рублей. Стоит ли экономия на IT-разработке для решения данной проблемы?
Кстати быстрые сайты делают в evilUnion
Мы планируем продолжать публиковать подобный контент. Если вам понравилось, подпишитесь на нас :)
Другие наши исследования
Сколько зарабатывают директора по маркетингу? Исследование их компетенций и требований.
База IT за час для бизнеса. Курс от evilUnion.
