Eva.ua

Eva.ua розпочала свою історію як офлайн-магазин у Дніпрі ще у 2002 році. До 2017-го мережа виросла до 900 магазинів, і компанія вирішила розвивати онлайн-продажі. Спершу це був невеликий веб-магазин із кількома замовленнями на день, здебільшого від власної команди контролю якості.

Ми долучилися до проєкту у 2019 році, коли Eva.ua звернулась із проблемою повільного Magento-сайту: сторінки завантажувалися понад 10 секунд, а стабільність залишала бажати кращого. Завдяки нашій оптимізації швидкодія та ефективність сайту суттєво зросли, і вже незабаром компанія побачила подвоєння продажів.

• Аудит швидкодії та коду
• Вдосконалення архітектури Magento
• Оновлення дизайну та функціоналу доставки
• Оновлення корзини та її функціоналу
• Кастомізація процесу оформлення замовлення
• Оптимізація управління статичним контентом
• Міграція на новий хостинг (DigitalOcean)
• Покращення швидкодії сайту
• Оптимізація пошуку за допомогою Elasticsearch
• Масштабування кеш-серверів
• Розподіл трафіку між кількома серверами

Під час пікових навантажень сайт без проблем витримував понад 11 000 одночасних користувачів, а у моменти на кшталт Чорної п’ятниці - до одного замовлення щосекунди. При цьому завантаження системи навіть у пікові години не перевищувало 50%, що забезпечило подвійний запас продуктивності. Завдяки сучасній архітектурі пропускну здатність можна було б підвищити ще у 5–7 разів лише за кілька годин.

Eva.ua лідер висококонкурентного ринку і щоб втримувати цю позицію необхідно постійно вдосконалювати користувацький досвід, динамічно впроваджувати нові фічі й швидко тестувати ідеї. Така швидкість впроваджень дуже витратна при монолітній архітектурі, тому компанія вирішила перейти на headless: залишити Magento на бекенді, а фронтенд замінити на Progressive Web App (PWA) - Vue Storefront (тепер Alokai).

Зниження витрат на розробку, підтримку та обслуговування

• Достатньо одного рішення - PWA, яке працює як додаток, але залишається веб-платформою. Не потрібно підтримувати окремо веб-магазин і мобільні додатки.
• Headless-архітектура спрощує обслуговування: фронтенд і бекенд працюють незалежно, тож оновлення можна впроваджувати без ризику для бізнесу.

Швидший запуск нових фіч

• Оновлення PWA відбуваються значно швидше, ніж на класичних сайтах чи в нативних додатках (iOS, Android).
• Завдяки headless-підходу фронтенд-команда може впроваджувати нові ідеї незалежно від бекенду, що пришвидшує інновації.

SEO та видимість у пошукових системах

• PWA індексуються пошуковими системами, на відміну від нативних додатків, що підвищує органічну видимість.
• Headless-архітектура дає змогу ефективно впроваджувати SEO-практики: кастомізувати URL, метадані та контент без обмежень бекенду.

Покращення швидкодії та масштабованості

• Магазини на класичному Magento часто мають проблеми зі швидкістю, тоді як PWA використовує сучасні веб-технології (Service Workers, ліниве завантаження, кешування) для швидких сторінок і плавної взаємодії.
• Headless-архітектура дозволяє побудувати легкий, API-орієнтований фронтенд, що позитивно впливає на швидкість, надійність та масштабованість.

Омніканальність і гнучкість на майбутнє

• Headless-комерція забезпечує єдиний досвід покупця на різних каналах - веб, мобільний, маркетплейси, офлайн-точки, IoT, голосова комерція тощо.
• PWA та headless-рішення не залежать від пристрою, тому легко масштабуються на нові ринки й платформи без зайвих витрат.

Більше персоналізації та кращий користувацький досвід

• З headless-архітектурою можна впроваджувати персоналізацію, A/B-тести та інноваційні UX-інструменти без ризику для бекенду.
• Швидке завантаження, плавні переходи та "app-like" досвід збільшують залученість і конверсію.

Свобода вибору фронтенду

• При headless-підході ви не прив’язані до однієї технології, можна змінювати фронтенд без повної переробки системи.
• Можливість експериментувати з різними фреймворками (Vue.js, React, Next.js чи власні рішення) для максимальної відповідності потребам бізнесу.

Впроваджуючи PWA з headless-архітектурою, бізнес отримує сучасну, гнучку та потужну eCommerce-екосистему, яка спрощує роботу, покращує досвід клієнтів і стимулює зростання.

Ми розпочали розробку нового PWA-рішення для eva.ua у квітні 2021 року, і весь процес зайняв 1 рік. З-поміж різних PWA-опцій ми разом із командою eva.ua обрали Vue Storefront (тепер Alokai). Вибір базувався на відгуках розробників та широкому наборі функцій «з коробки».

Vue Storefront на той час був одним із найкращих PWA-рішень, але не ідеальним — платформа постійно змінюється і вдосконалюється з кожною новою версією.

Серед основних складнощів:

• Фільтри працювали лише через конфіг, не були інтегровані з Magento та реальними атрибутами фільтрації.
• Стандартний чекаут відрізнявся від вимог, тому ми впровадили власні інтеграції для доставки, оплати, промокодів, чекауту для зареєстрованих користувачів тощо.
• Авторизація та особистий кабінет також не відповідали завданням, тому ці модулі були повністю перероблені з нуля.
• Довелося самостійно реалізовувати функціонал для створення CMS-лендінгів з адмін-панелі, а також сторінки брендів, промоцій і порталу.

Ці виклики вимагали чималих зусиль, але дозволили створити кастомне рішення, що повністю відповідало бізнес-потребам eva.ua.

• Multisearch (пошук)
• Esputnik (push-сповіщення, події, email-розсилки)
• OWOX (система трекінгу, веб-аналітика)
• Google Tag Manager (GTM)
• CPA-маркетинг: Admitad, SellAction
• Novapay, Wayforpay (платіжні системи)
• Нова Пошта, MeestExpress, Укрпошта (служби доставки)
• Авторизація через внутрішню систему eva.ua

• PWA дала більше гнучкості завдяки поділу моноліту на менші частини: фронтенд, API, ElasticSearch, бекенд (сервісна архітектура).
• Можливість оновлювати фронтенд незалежно від бекенду, без простоїв для сайту.
• ElasticSearch забезпечив простішу, швидшу й більш гнучку роботу з даними та атрибутами. Наприклад, з’явилася можливість показувати характеристики товару при наведенні у списку.
• Робота в офлайн-режимі.
• Швидша та гнучкіша робота фільтрів.
• Вища швидкодія фронтенду, навігація між сторінками без перезавантаження.
• Код став структурованим і багаторазово використовуваним: один компонент можна застосовувати на різних сторінках, немає потреби дублювати код, що також зберігає час розробки.
• Розробка стала швидшою, код став чистішим та зрозумілішим.

• Зібрали команду “під ключ” для eCommerce: допомогли сформувати виділену команду розробників, архітекторів та eCommerce-спеціалістів для підтримки проєкту, від стратегії до реалізації та подальшого масштабування.
• Кастомізація кошика й розширений чекаут: впровадили унікальні правила й механіки для кошика, удосконалили процес оформлення замовлення, підвищили конверсію та врахували складну бізнес-логіку.
• Розробка кастомної головної сторінки: створили абсолютно індивідуальну головну — із власним Magento-модулем і фронтенд-покращеннями для унікального брендингу, UX і швидкодії.
• SEO-оптимізація та глибокі інтеграції: оптимізували структуру сайту, мета-теги, редіректи та індексацію, додали SEO-функціонал для підвищення позицій у пошуку та зростання трафіку.
• Розширений пошук: покращили пошук за рахунок оптимізованих алгоритмів, автопідказок та гнучких фільтрів для швидких і релевантних результатів.
• Stories (промо у стилі соцмереж): реалізували інтерактивний функціонал stories для презентації акцій і новин у захопливому форматі, що підвищує залученість користувачів.
• Кастомне меню та шапка: спроєктували й розробили власну навігацію для кращої зручності, доступності та користувацького досвіду.
• Функціонал і інтеграції з редіректами: реалізували гнучку систему обробки редіректів для зручної навігації, SEO та коректної структури URL.
• Кастомізація хлібних крихт: удосконалили “breadcrumbs” для логічної навігації, чіткого ієрархічного шляху та кращого SEO.

…і ще десятки дрібних, але важливих доробок для максимальної ефективності проєкту.

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

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