Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Ускорение и защита сайта
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
28
Эбиа

Эбиа

www.ebia.ru

15
Amarket

Amarket

amarket.io

13
likearea

likearea

smm.li

12
RockinRobin

RockinRobin

www.rockinrobin.co

10
Битрикс24

Битрикс24

www.bitrix24.ru

10
KEPLER LEADS

KEPLER LEADS

keplerleads.com

10
Cookiezz

Cookiezz

cookiezz.com.ua

10
Megagroup

Megagroup

Создаем сайты и помогаем им зарабатывать

9
Tados

Tados

tados.ru

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк во ВКонтакте

1 секунда ускорения загрузки дала прирост конверсии на 10%: кейс Staples

129 0 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Ускорение сайта Staples, одного из крупнейших магазинов канцелярских товаров, подтвердило, что с уменьшением времени загрузки сайта процент отказов (bounce rate) также уменьшается.

Компания Staples – одна из крупнейших в мире сетей магазинов канцелярских товаров, насчитывает более 2000 магазинов в 26 странах мира. Компания ведет бизнес также и в онлайне, ее интернет-магазин является одним из крупнейших по оборотам в США. В компании всегда признавали, что UX сайта чрезвычайно важен, и что скорость загрузки сайта является одним из основных факторов, влияющих на UX.

К тому моменту, когда компания Staples решила уделить больше внимания ускорению собственного сайта, уже были известны данные, что с увеличением времени загрузки сайта процент отказов (bounce rate) возрастает (по данным mPulse/Soasta и Айри.рф):

b_57ceb6050b40d.jpgА конверсия падает:b_57ceb605e95a6.jpgДля работы над скоростью сайта компания создала кросс-функциональную команду, состоящую из представителей нескольких подразделений:

  • Менеджмент: его представители определяют какая функциональность с точки зрения пользователя должна присутствовать на сайте.
  • ИТ: определяет способы, которыми будет реализована требуемая функциональность и ее последующее внедрение.
  • Маркетинг: отвечает за дизайн и оптимизацию используемых изображений и видео.
  • Мерчендайзинг: определяет то, как продукт будет визуально представлен на сайте.
  • Аналитика: связывает все вместе и предоставляет анализ данных.

Работа началась с того, что были каталогизированы все различные функциональности, которые поддерживаются на сайте.

В компании был установлен регламент: каждую неделю команда собиралась и обсуждала 1-2 функциональности сайта. Докладчиком выступал так называемый «владелец» этой функциональности, то есть тот человек из компании, на бизнес-задачи которого она работает. Команда обсуждала эти функциональности с точки зрения ускорения загрузки и оправданности отказа от нее или какого-то ее аспекта ради ускорения загрузки сайта.

Ход работ

Одним из важных решений, которые нужно было принять, явилось: считать ли целевым KPI полное время загрузки (FPL – Full Page Load) или нужно сосредоточиться на улучшении времени до возможности пользователя взаимодействовать со страницей (Time To Interactive). Команда в итоге решила сосредоточиться на полном времени загрузки, поскольку это более конкретный показатель. В то время как показатель «время до возможности взаимодействия с сайтом» несколько туманен и допускает разные толкования в смысле того, какие возможности должны быть доступны пользователю в этот момент.

Баннеры на сайте

На сайте использовалось множество баннеров, и во многих случаях они были слишком «тяжелыми», а параметры оптимизации изображений выбирались произвольно разными дизайнерами

.b_57ceb606c16bb.jpg

Очень похожие визуально изображения, разные версии одного и того же баннера могли «весить» в одном случае 25 КБ, а в другом – 250 КБ.Команда дополнительно оптимизировала существующие баннеры и внедрила процесс создания баннеров, чтобы избежать этой проблемы в будущем.

А/В-тестирование

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

Обращения к другим сторонним сервисам

Пришлось навести порядок в приличном количестве обращений к сторонним сервисам, которых на сайте было немало: аналитические сервисы, рекламные системы, сервисы рекомендаций и отзывов, кнопки/виджеты социальных сетей.

Команда удалила часть из них, но отмечает, что в этом отношении еще возможна дальнейшая оптимизация.b_57ceb6073c357.jpg

Обращения к базам данных

Некоторые страницы сайта производили 200 обращений к базе данных. Команда оптимизировала их до 10 на страницу.

Javascript

Код скриптов на сайте был существенно переписан, их размер в объеме сократился на 48%, а в строках кода – на 52%.

CSS

Стили на сайте также подверглись оптимизации, в объеме они были сокращены на 83%, а в строках – на 88%.

Извлеченные уроки

1. Фиксироваться на значимых изменениях

Изначально команда старалась работать по модели «спринта» и с каждым новым релизом версии сайта вносить какие-то улучшения. Однако оказалось, что такие незначительные улучшения были практически незаметны. Создавалось ощущение, что работа ведется, а результата нет или почти нет.

В то же время, из-за идеологии «спринта» не оставалось времени на внесение действительно обширных изменений, которые могли давать значимый, существенный результат. В итоге команда перешла на внедрение больших изменений, пусть и не сразу и не с каждым релизом.

2. Обращать внимание на конкретные страницы

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

Результаты

  • Медиана времени загрузки главной страницы сайта уменьшилась на 1 секунду
  • Время загрузки сократилось для 98% пользователей. У самых «медленных» пользователей, оно сократилось на 6 секунд.
  • Конверсия выросла на 10%

Примечание по трактовке результатов от экспертов из Soasta, авторов использовавшегося в оптимизации средства слежения за поведением пользователей mPulse:

Данные результаты НЕ означают, что ВСЕ пользователи стали загружать главную страницу на 1 секунду быстрее.

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

Это также НЕ означает, что ВСЕ пользователи стали конвертироваться на 10% лучше.

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

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

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

+1
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Комментариев еще не оставлено
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать