Компания HOFF увеличила конверсию в покупки на 15% благодаря оптимизации скорости загрузки мобильной версии сайта

Подход Mobile First позволил HOFF увеличить скорость загрузки сайта и сделать его удобнее для пользователей

У сети гипермаркетов мебели и товаров для дома HOFF было две задачи: увеличить скорость загрузки и количество конверсий в покупку в мобильной версии сайта. Для этого компания поставила команде разработки KPI по оптимизации скорости загрузки сайта и задействовала инструмент Lighthouse внутри браузера Chrome, который рекомендовал улучшения. В результате скорость сайта выросла на 60%, а конверсия в покупку в мобильной версии — на 15%.

Цели

Повысить скорость загрузки сайта.

Увеличить конверсии в покупку для мобильных устройств.

Подход

Mobile first — качество мобильного сайта в приоритетах компании.

Оптимизация скорости загрузки, основанная на рекомендациях инструмента Lighthouse.

Результаты

На 60% выросла скорость сайта.

На 15% выросла конверсия в покупку в мобильной версии сайта.

Путь к оптимизации

Доля мобильного трафика на сайте HOFF значительно выросла за последние два года — до 60%, смартфоны стали главной точкой роста. В то же время команда HOFF видела, что мобильный трафик отрабатывает хуже десктопного.

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

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

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

Для работы с загрузкой разработчики HOFF разделили CSS¹ на три вида:

  • Critical — быстро отображает первый экран, не блокирует вывод страницы. Сначала загружается критический CSS, а потом — весь остальной.
  • Common.css — общий CSS, который загружается для всех шаблонов страниц сайта: меню, шапки и подвала. Этот CSS кэшируется после загрузки страницы входа и грузится из кэша при посещении следующих страниц.
  • Content.css — стили для отображения контента.

Точно так же разработчики оптимизировали и загрузку JavaScript. До загрузки страницы загружается критический JS, а потом весь остальной². Один файл JS весом 600 КБ разделили на несколько небольших по модулям и минифицировали все файлы .js. Теперь весь JS грузится с атрибутом defer.³ Кроме этого:

  • Убрали скрипты и стили «Битрикса» (kernel)⁴, которые не использовались.
  • Перенесли загрузку контейнера GTM⁵ на событие window.onload⁶.
  • Сократили вес изображений на сайте до 25%, сохранив качество, а также перевели логотип и иконки в формат SVG.
  • Оптимизировали и сократили вес шрифтов, переведя их в форматы woff и woff2, оставили подключение других форматов шрифтов.
  • Убрали карусель слайдера на главной странице в мобильной версии.

К чему удалось прийти

  • Если в декабре 2017 года средняя скорость загрузки сайта, по отчету Google Аналитики, была 10-13 секунд, то после редизайна и оптимизации скорости команда HOFF сократила её до 4,2 секунд.
  • Раньше мобильная версия сайта загружалась очень долго, показывая белый экран, пока не загрузится весь контент. Теперь пользователь видит первую страницу быстрее, а остальная информация загружается по мере необходимости.
  • HOFF проводил A/B-тесты с 1 июня по 31 августа, сравнивая метрики старого и нового сайта. После оптимизации скорость выросла на 60%.
  • Главный результат, к которому привела оптимизация сайта, — это рост продаж. Конверсия в покупку в мобильной версии сайта выросла на 15%. Трафик также продолжает расти.

В HOFF не планируют останавливаться на достигнутом. Сейчас, кроме продолжения оптимизации скорости и UX, команда работает над тестированием и внедрением новых технологий, таких как Accelerated Mobile Pages и One-tap sign-up/Auto sign-in.

Эффективность: мнение эксперта

«Сейчас основной рост проникновения интернета происходит за счет мобильных устройств, а не десктопов и планшетов, — рассказывает Mobile Activation Lead в Google Илья Сидоров. — Если бизнес хочет расти, необходимо оптимизировать конверсию именно на мобильных устройствах. И здесь мы сталкиваемся с проблемой: мобильные сайты часто менее конверсионные, чем десктопные — люди меньше покупают и реже заполняют заявки, потому что эти сайты требуют отдельного подхода. Если уделить время мобильному сайту, оптимизировать его, регулярно проводить A/B-тесты всех изменений, сделать интерфейс удобным и, последнее, но иногда самое важное — повысить скорость загрузки, то конверсия может расти и порой превышать показатели десктопного сайта и мобильного приложения. Новые пользователи сейчас чаще всего приходит именно на мобильные сайты из поиска и других источников — трафик с компьютеров не растёт, а приложения чаще ставит уже лояльная аудитория. Поэтому обойтись только десктопом и приложением нельзя — мобильный сайт должен быть удобным и быстрым, а его качество должно быть в центре внимания ключевых команд каждого бизнеса».

Как внедрить в компании культуру mobile first