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

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 днів безкоштовного тесту нашого продукту.