Е-комерція

Як поліпшити мобільну версію сайту – досвід Хорошопа

15:57, 15/06/2021

15 квітня 2021 року, платформа для створення інтернет-магазинів Хорошоп презентувала оновлену мобільну версію клієнтських сайтів. Фахівці платформи більш детально розкажуть про результати своєї роботи і про те, як оновлення вплинуло на інтернет-магазини клієнтів.

Навіщо ми оновлювали мобільну версію

Перша мобільна версія Хорошопа була розроблена в 2016 році. У неї був актуальний дизайн і технології, які навіть через п’ять років залишалися на гідному рівні, але e-commerce змінився. Трафік з мобільних пристроїв виріс у два рази, а частка покупок – в чотири. Мобільна версія сайту стала чи не важливіше десктопної, тому ми вирішили зробити її ще краще. Потрібно було:

  • оновити дизайн;
  • поліпшити користувальницький досвід;
  • прискорити завантаження сторінок.

Якщо зручність інтерфейсу можна оцінити по набору функцій, то зі швидкістю завантаження сторінок все складніше. Швидкість завантаження можна оцінити на око, але це занадто суб’єктивно, а різниця буде помітна тільки на тлі зовсім повільних сайтів. Можна навіть сидіти з секундоміром, хоча такий спосіб сумнівний. Серед усіх методів оцінки, загальноприйнятим вважається Google PageSpeed ​​Insights.

Google PageSpeed ​​Insights – це сервіс, який аналізує вміст і швидкість завантаження сторінок, оцінюючи їх продуктивність за 100-бальною шкалою. На користь Google PageSpeed ​​Insights є два важливі аргументи. По-перше, оцінка впливає на ранжування сайту в пошуковій видачі, по-друге – сервіс загальнодоступний і аналіз всіх сайтів проходить за однаковим алгоритмом.

Переважна більшість мобільних сайтів, навіть у великих інтернет-магазинів, отримують оцінку на рівні 30-40 балів, а все, що нижче 50 – слабкий результат на думку PageSpeed ​​Insights. Ці магазини можуть підвищити оцінку, шляхом оптимізації мобільної версії, але це дорогий варіант, який можуть собі дозволити не всі. Хорошоп поставив перед собою мету підвищити оцінку відразу для всіх клієнтських сайтів.

Деякі розробники вважають, що в оцінки Google PageSpeed ​​Insights немає прямого зв’язку з зручністю і швидкістю сайту. Хоча сервіс заявляє протилежне. Ми взяли на себе роль руйнівників міфів і заглибилися в цю тему, щоб зрозуміти від чого на практиці залежить оцінка. Дослідним шляхом встановлено, що поліпшення швидкості і юзабіліті сайту призводить до поліпшення оцінки. А якщо впроваджувати рекомендації сервісу для підвищення оцінки, то поліпшується швидкість і зручність. Висновок був однозначним – з сервісами Google краще не сперечатися.

Новий дизайн мобільної версії

Основна проблема дизайну минулого мобільної версії, яку ми усвідомлювали, – відсутність індивідуальності. Набір компонентів і їх розміщення були фіксованими, через що сайти ставали схожими один на одного. У новій мобільній версії цю проблему вирішив модульний принцип. Багато компонентів сайту перетворилися в модулі, які користувачі можуть вмикати / вимикати, переміщати, змінювати їх колір і фон. Модульної стала головна сторінка, шапка сайту, основне меню, сторінка і мінікарточка товару. 

Розташування та набір модулів можна налаштовувати індивідуально, незалежно від того, як вони налаштовані на десктопній версії. Це відноситься не тільки до модульних компонентів, а й, наприклад, банерів на головній сторінці. Налаштовуючи мобільний сайт за своїм бажанням, наші клієнти роблять його унікальним, як це видно на прикладі головних сторінок.

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

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

Оцінка швидкості завантаження сторінок

Для оцінки швидкості сайту ми брали сторінки, на які йде основна частка трафіку. Перш за все, це сторінки каталогу і товару, а вже після – головна сторінка. Оновлена ​​мобільна версія демо-сайту отримала 99 балів від Google PageSpeed ​​Insights. Після додавання елементів, які використовують більшість інтернет-магазинів, наприклад Facebook Pixel і кастомних шрифтів, – оцінка склала 80 балів.

Важливо розуміти, що деякі чинники впливають на оцінку, але не впливають на реальну швидкість завантаження. Наприклад, для відвідувачів сайту шрифт одноразово подгружается в кеш і в подальшому не гальмує сайт. А PageSpeed ​​Insights оцінює сторінку кожен раз, як в перший.

Працюючі клієнтські сайти отримують оцінки на рівні 70-90 балів – це у два рази вище, ніж до поновлення мобільної версії. І це результат, якого ми хотіли досягти – мобільна версія стала працювати швидше. Оцінка PageSpeed ​​Insights може стати ще більше, але це вже залежить від дій клієнтів і того, як вони будуть використовувати інструменти Хорошопа. 

Зростання продажів після поновлення

Для того, щоб зрозуміти як змінилися продажу після поновлення ми вивчили динаміку коефіцієнта транзакцій. Коефіцієнт транзакцій – це відношення кількості покупок до кількості сеансів. На одному з проєктів цей показник для мобільного сайту виріс на 10% і зрівнявся з десктопом. А зростання кількості сторінок за сеанс підтвердив те, що мобільна версія стала зручніше.

На іншому проекті коефіцієнт транзакцій і кількість сторінок за сеанс виросли щодо десктопа, зрівнявшись з ним. У третього інтернет-магазину, який ми вивчали, коефіцієнт транзакцій виріс на 30%. 

Оновлення мобільної версії отримали 2500 клієнтів Хорошопа, незалежно від свого тарифу. Ознайомитися з усіма змінами в новій версії ви можете подивившись нашу презентацію на YouTube. А наші слова можна завжди перевірити на практиці – для цього у вас є 14 днів безкоштовного тесту нашого продукту.