E-Commerce & Конверсія
Фільтрація та пошук у каталозі на 10,000+ товарів: миттєвий відгук за 50 мс без підвисання сторінки та втрат рекламного бюджету
Чому повільні фільтри каталогу спалюють до 60% бюджету Google Shopping та як вивести навігацію на відгук у 50 мілісекунд
Коли асортимент інтернет-магазину перетинає межу у 3,000–10,000+ товарних позицій (SKU), головним вузьким місцем воронки продажів стає не дизайн головної сторінки, а швидкість відбору в каталозі. Уявіть типовий шлях покупця, за якого ви вже заплатили $0.80–$1.50 у Google Performance Max або Meta Catalog Ads: він переходить у категорію, натискає чекбокс потрібного розміру, дозування чи бренду — і екран біліє на 3.2 секунди, сторінка повністю перезавантажується, а позиція скролу скидається на самий верх. До третього параметра фільтрації від 54% до 68% мобільних користувачів закривають вкладку, залишаючи ваш рекламний бюджет без жодної транзакції.
Згідно з масштабним аудитом юзабіліті Baymard Institute, 78% мобільних та 58% десктопних e-commerce сайтів мають критичні помилки в архітектурі списків і фільтрів, тоді як відвідувачі, які користуються швидким пошуком та фасетним відбором, конвертуються у покупку в 2.4–3.2 раза частіше за звичайних глядачів. У цьому інженерному розборі ми покажемо, як організувати великий каталог магазину без зависань бази даних, як працює ajax фільтрація без перезавантаження з відгуком до 50 мс та як правильні фільтри товарів в інтернет магазині ux окупають вкладення в редизайн за перші 35–45 днів.
Чому покупці йдуть до конкурентів: біль очікування перезавантаження при виборі розміру
Більшість українських та західних інтернет-магазинів середнього сегмента досі працюють на застарілій синхронній архітектурі шаблонів OpenCart, WooCommerce, Magento або базових темах Horoshop/Shopify з важкими сторонніми плагінами. Як тільки покупець намагається звузити вибірку з 12,000 товарів за чотирма критеріями, сервер виконує каскад важких SQL-запитів `JOIN` та `COUNT(*)` по неіндексованих таблицях атрибутів.
1. Анатомія 3-секундного фрізу: скидання скролу та пастка «Знайдено 0 товарів»
Коли користувач обирає у бічній колонці три бренди та два розміри, синхронний рушій блокує інтерфейс після кожного кліку. Замість того щоб спокійно відмітити 5 чекбоксів за 4 секунди, людина змушена 5 разів чекати повного перезавантаження DOM-дерева та заново прокручувати екран до потрібної секції фільтрів (Scroll Position Reset).
Ще гірший сценарій — сліпі тупики нульової видачі (Zero-Result Dead Ends). Без попереднього перерахунку фасетів покупець відмічає комбінацію «Бренд А + Розмір XL + Колір Чорний», чекає 3 секунди і бачить порожній екран «Товарів не знайдено». За даними Baymard Institute, після двох поспіль порожніх видач понад 47% покупців назавжди покидають магазин і повертаються у пошукову видачу Google до маркетплейсів.
2. Галузева специфіка атрибутів: чому універсальні чекбокси не працюють
Друга причина відтоку — спроба використати однаковий набір фільтрів для всіх категорій. Понад 51% інтернет-магазинів не виводять критичні галузеві параметри (Category-Specific Facets). Покупцю систем очищення води потрібна фільтрація за типом забруднення та кількістю ступенів осмосу; в аптечному ритейлі — за діючою речовиною, дозуванням у міліграмах та формою випуску; у дитячому одязі — за точним зростом у сантиметрах і сезонністю. Якщо клієнт змушений переглядати 18 сторінок пагінації вручну, бо в каталозі є лише фільтр «Ціна» та «Виробник», коефіцієнт додавання до кошика (Add-to-Cart Rate) падає нижче 1.1%.
3. Порівняльна таблиця архітектури каталогу: синхронний шаблон проти реактивного фасетного рушія
Нижче наведено інженерне порівняння стандартного шаблонного каталогу та сучасної реактивної архітектури, яку ми проєктуємо в межах напрямку E-commerce: конверсія каталогу, чекауту та окупність трафіку.
| Технічний та UX-параметр | Старий шаблон (OpenCart / WooCommerce / базовий плагін) | Реактивна фасетна архітектура (Next.js + Elastic / Meilisearch) | Прямий вплив на поведінку покупця та виручку |
|---|---|---|---|
| Час відгуку при кліку на чекбокс (INP) | 1,800–3,400 мс (повне перезавантаження сторінки або важкий запит) | 35–50 мс (оптимістичний UI + індексований пошуковий рушій у пам'яті) | Покупець комбінує 4–6 параметрів за секунди без візуального гальмування |
| Позиція скролу та стан панелі фільтрів | Скидається на початок сторінки після кожної галочки | 100% збереження фокуса (оновлюється лише сітка карток товарів) | Зменшення показника відмов (Bounce Rate) у каталозі з 64% до 28% |
| Попередження нульової видачі (0 товарів) | Відсутнє (клієнт потрапляє на порожню сторінку після очікування) | Динамічний лічильник `(+14)` та автоматичне блокування порожніх комбінацій | Повна ліквідація тупикових сценаріїв у навігації по асортименту |
| Швидкість живого пошуку з прев'ю | 2.5+ с (пошук через `LIKE %query%` у базі MySQL без морфології) | < 40 мс (автодоповнення з фото, ціною, виправленням помилок і розкладки) | Зростання конверсії користувачів пошуку з 1.8% до 5.4%+ |
| Індексація комбінацій для Google SEO | Дублікати сторінок з `?filter_id=12&attr=45`, закриті в `noindex` | ЧПУ-генерація тисяч посадкових сторінок (`/katalog/filtry-zvorotnogo-osmosu/`) | Безкоштовний органічний трафік за сотнями низькочастотних комерційних запитів |
AJAX-фільтрація та оптимістичний UI: зміна результатів за 50 мілісекунд без втрати позиції
Людський мозок сприймає будь-яку реакцію інтерфейсу швидше за 100 мілісекунд як миттєву фізичну дію. Щоб забезпечити таку швидкодію на каталозі з 10,000–50,000 SKU, правильна багатопараметрична фільтрація товарів будується на відокремленні читання каталогу від основної транзакційної бази даних (CQRS / Read-Replica у пам'яті).
1. Як працює інженерна зв'язка Optimistic UI + Faceted Search Engine за 50 мс
Замість того щоб при кожному кліку опитувати десятки реляційних таблиць, характеристики товарів індексуються у спеціалізованому пошуковому рушії (Elasticsearch, Meilisearch або Algolia) у вигляді плоских JSON-документів з попередньо розрахованими бітовими масками атрибутів.
Коли покупець ставить галочку в чекбоксі, фронтенд на React / Next.js застосовує патерн Optimistic UI: стан чекбокса та верхній тег обраного фільтра відмальовуються за 16 мс (1 кадр екрана), у адресний рядок браузера через `History API (pushState)` без перезавантаження записується чистий URL, а у фоні виконується асинхронний запит, який за 30–50 мс повертає оновлений масив карток і точні лічильники доступних позицій для сусідніх параметрів. Якщо мережа клієнта працює на повільному мобільному 3G/4G, поверх поточної сітки товарів на пів секунди вмикається легкий напівпрозорий Skeleton-шиммер без стрибка висоти сторінки (`CLS = 0.00`).
2. Двокомпонентна фасетна навігація та швидкі пресети у кейсі Перша Вода
У технічно складних нішах покупець часто комбінує категорійну навігацію зі швидким відбором за параметрами об'єкта. Під час повного редизайну інтернет-магазину систем очищення води Перша Вода ми структурували каталог, що містить сотні мембранних та проточних систем, фільтрів зворотного осмосу і змінних картриджів.
Щоб покупець знаходив потрібну станцію за лічені секунди, на сторінці розділу (`Мембранные фильтры`) ми спроєктували двокомпонентну панель керування видачею: ліворуч розміщене дерево підкатегорій із живими лічильниками товарів у дужках (`Фильтры обратного осмоса (120)`, `Ультрафильтрация (55)`, `Нанофильтрация (15)`), повзунок ціни та чекбокси типів і брендів, а зверху над сіткою — горизонтальний блок швидкого підбору за 4 критеріями (`Тип фильтра`, `Назначение`, `Потребление воды`, `Особенности`), рядок активних тегів зі скиданням у 1 клік (`Сбросить`) та індикатор `Підібрано 357 товарів з 981`. При наведенні курсора на картку товару без переходу на нову сторінку миттєво розгортаються ключові характеристики — бренд, країна виробництва, кількість ступенів очищення (`7`) та тип крана:
Розумний пошук з автодоповненням: підказки брендів, виправлення помилок та прев'ю товарів прямо в рядку
За статистикою e-commerce аналітики, лише 15%–25% відвідувачів починають взаємодію з магазином із пошукового рядка, але саме ця аудиторія генерує до 45%–50% усього виторгу, бо приходить із максимально сформованим наміром купити конкретну позицію. Якщо ваш пошук шукає лише за точним збігом літер і вимагає натискання клавіші `Enter`, ви втрачаєте кожного третього гарячого клієнта.
1. П'ять обов'язкових механізмів предикативного пошуку (Predictive Typeahead)
Сучасний швидкий пошук у каталозі товарів — це не просто текстове поле, а повноцінне діалогове вікно мерчандайзингу, яке відкривається вже після введення перших 2–3 символів:
Толерантність до одруківок та транслід (Typo Tolerance & Keyboard Layout): якщо користувач помилково вводить «nurofen», «нурафен» або забув перемкнути розкладку клавіатури і набрав «yeheaty», алгоритм відстані Левенштейна та N-грам за 20 мс розпізнає правильний товар без порожньої видачі.
Морфологія та словник синонімів: запити «знеболююче від голови», «таблетки від мігрені» або конкретна назва активної речовини «ібупрофен 400 мг» мають вести на релевантну групу препаратів.
Візуальні картки прямо у випадаючому списку (Rich Autocomplete): показ мініатюри фото, актуальної ціни, статусу «Є в наявності» та кнопки «До кошика» безпосередньо у підказці пошуку скорочує шлях до покупки до 1 кліку.
Підказки категорій та брендів: паралельно з конкретними товарами ліва колонка саджесту пропонує перейти у відповідний розділ або брендову підбірку.
2. Пошук за назвою, виробником або кодом та фасетний каталог на 29,000+ позицій у кейсі Аптека Доброго Дня
Найвищі вимоги до швидкості пошуку та точності фасетної навігації висуває фармацевтичний e-commerce, де асортимент одного розділу сягає десятків тисяч позицій. Під час комплексного UX/UI-редизайну платформи для всеукраїнської мережі Аптека Доброго Дня ми винесли універсальний рядок розумного пошуку (`Name, manufacturer, product code...`) у центр наскрізної шапки сайту, щоб покупець міг миттєво шукати товари за назвою, виробником або артикулом.
На сторінці високонавантаженого каталогу (на скріншоті нижче — розділ `Supplements` на `29 207 Results`) ми спроєктували лівий фасетний сайдбар зі вбудованими полями живого внутрішнього пошуку всередині самих блоків фільтрації (`Categories` із полем `name of category` та лічильниками `(14315)`, `(14543)`, `(67813)`, а також `Brands` із полем `Brand name` та лічильниками `(12214)`, `(34576)`), доповнений фільтрами `For whom`, `Price`, `Special offers` і `Certification and Diet`. Це дозволяє миттєво звужувати вибірку з 29 тисяч позицій у 6-колонковій сітці товарів, а при переході в картку препарату — підбирати аналоги за діючою речовиною:
Мобільний екран фільтрів: зручна шторка (Drawer), лічильник знайдених позицій та кнопка скидання
Оскільки в українському та європейському e-commerce від 78% до 86% трафіку надходить зі смартфонів, перенесення десктопної лівої колонки фільтрів над списком товарів є фатальною помилкою: покупцю доводиться прокручувати 4 екрани чекбоксів, перш ніж він побачить першу картку товару. Перш ніж розібрати ергономіку мобільної шторки, подивіться на фінансову математику окупності швидкого каталогу.
Як перехід від повільної 3-секундної фільтрації до миттєвого AJAX-каталогу (50 мс) та предикативного пошуку подвоює рентабельність рекламного трафіку
- Час відгуку при виборі фільтра: 3.2 секунди з повним перезавантаженням і скиданням скролу
- Відтік користувачів на 2-му параметрі (Drop-Off): 58% мобільних покупців залишають каталог
- Наскрізна конверсія у замовлення (CR): 1.1% (495 оплачених замовлень із 45,000 сесій)
- Вартість залучення покупця (CAC): $18.18 при чистій маржі $19.50 з одного замовлення
- Чистий прибуток після вирахування реклами: +$652/міс (практично весь прибуток з'їдає Google Ads)
- Час відгуку при виборі фільтра або пошуку: 45–50 мс без перезавантаження сторінки та стрибків верстки
- Частка сесій з успішним підбором товару: +118% глибини перегляду без тупиків «0 товарів»
- Наскрізна конверсія у замовлення (CR): 2.4% (1,080 замовлень на тому самому трафіку)
- Вартість залучення покупця (CAC): $8.33 (зниження вартості клієнта у 2.18 раза)
- Чистий прибуток після вирахування реклами: +$12,060/міс (+$11,408 чистої дельти щомісяця)
На великому каталозі інвестиція $6,500 у швидку фасетну фільтрацію та предикативний пошук дає більший приріст прибутку (+$11,408/міс), ніж двократне збільшення рекламного бюджету на повільному сайті.
1. Анатомія ідеальної мобільної шторки (Bottom Sheet / Slide-Over Drawer)
На екрані смартфона (375×812px) система фільтрації має підпорядковуватися фізіології керування великим пальцем однією рукою (Thumb Zone):
Закріплена кнопка виклику (Sticky Filter & Sort Bar): під час прокручування каталогу у верхній або нижній зоні екрана фіксується компактна панель «Фільтри (3) | Сортування».
Горизонтальні чіпси швидких підкатегорій (Quick Filter Pills): над сіткою товарів в один рядок розміщуються найпопулярніші теги (наприклад, «Розпродаж», «Зріст 110–116 см», «Зимові куртки»), які вмикаються в 1 тап без відкриття повного меню.
Фіксований підвал шторки з живим лічильником: всередині відкритої шторки фільтрів у нижній частині екрана завжди закріплені дві контрастні кнопки: вторинна «Скинути все» та головна «Показати 48 товарів», цифра на якій перераховується миттєво при кожному дотику до чекбокса або кольорового свотча.
2. Мобільна навігація за віком і розміром у 2 кліки на прикладі магазину Dobramama
У ніші дитячого одягу та взуття батьки купують зі смартфона у стислих часових проміжках, а головним критерієм відбору є комбінація статі, вікової групи, точного зросту та матеріалу. Під час проєктування інтернет-магазину Dobramama ми повністю перебудували мобільну архітектуру каталогу та 15 типових екранів під одноручну навігацію.
Чотири мобільні екрани нижче демонструють повний цикл швидкого мобільного підбору: бічне меню з рядком пошуку (`Search...`) та багаторівневим деревом за статтю і віком дитини (`Girl (2-14)`, `Boy (2-14)`, `Child (0-2)`, `Shoes`), екран мобільного каталогу (`Girls 68-104 / Cardigans`) із закріпленими кнопками `Cardigans | Filter` та відображенням доступних розмірів зросту (`104 110 116 122 128 134`) прямо на картках товарів, виїзна мобільна шторка `Product filter` із повзунком ціни (`380 – 4850`), акордеонами `Gender / Season / Brand / Material` і живими лічильниками позицій праворуч (`64`, `91`, `63`, `938`), та мобільна картка товару зі швидким вибором розміру (`Choose a size`) і кнопкою `Add to cart` у зоні великого пальця:
SEO-фільтри: як генерувати тисячі індексованих посадкових сторінок для низькочастотних запитів
Правильно спроєктована фасетна навігація вирішує не лише завдання конверсії платного трафіку, а й стає головним генератором безкоштовної пошукової органіки з Google. Секрет полягає у гібридній архітектурі: для користувача фільтр працює миттєво через клієнтський AJAX, але для пошукового робота Googlebot кожен цільовий перетин параметрів є окремою серверною посадковою сторінкою (SSR).
1. Як перетворити комбінації «Категорія + Бренд + Атрибут» на SEO-магніт без роздування краулінгового бюджету
Якщо просто відкрити всі комбінації чекбоксів для індексації, каталог на 10,000 товарів створить мільярди технічних дублікатів URL (Spider Trap), і Google песимізує весь домен. Інженерне рішення базується на матриці контрольованої індексації:
1-й та 2-й рівень перетину (`Категорія + Бренд` або `Категорія + 1 ключовий параметр`): генерують статичні людинозрозумілі URL (ЧПУ), унікальні мета-теги `Title`, `Description`, заголовок `H1` за формулою шаблонізатора та відкриті для індексації (`index, follow`).
Вибір 2+ значень одного параметра або сортування/ціна: оновлюють видачу через AJAX, але містять директиву `<meta name="robots" content="noindex, nofollow">` та канонічне посилання (`rel="canonical"`) на базову категорію.
2. Поєднання швидких SEO-підкатегорій та фасетного фільтра в кейсі True Cloud
Показовим прикладом поєднання миттєвої фільтрації та SEO-структури є розроблений нами інтернет-магазин кальянів, тютюну та аксесуарів True Cloud. У ніші з сотнями смаків, брендів та технічних модифікацій (висота шахти, матеріал колби, тип з'єднання) покупці шукають товари за вузькими запитами.
Ми спроєктували сторінку каталогу так, що ліворуч розташоване чітке дерево категорій, повзунок діапазону цін і фільтр за брендами, а безпосередньо над сіткою товарів виведені клікабельні плашки швидких SEO-підкатегорій. Це дозволяє покупцю в один клік провалюватися у вузькі вибірки, а бізнесу — отримувати цільовий трафік з пошуку та миттєво конвертувати його завдяки лаконічним карткам товарів і двокроковому чекауту:
3. Чек-лист технічної готовності каталогу перед масштабуванням Google Shopping
Перш ніж збільшувати витрати на товарні кампанії, перевірте свій каталог за 4 інженерними критеріями або проскануйте сайт у нашому автоматичному інструменті Сканер готовності до рекламного трафіку:
Відгук фільтра < 100 мс: при кліку на чекбокс сторінка не перезавантажується, а позиція скролу залишається на місці.
Нуль порожніх вибірок: біля кожного параметра відображається актуальна кількість товарів у дужках, а недоступні комбінації деактивуються до кліку.
Скидання в 1 дотик: над сіткою товарів виведені чіпси всіх застосованих фільтрів із хрестиком видалення кожного окремо або всіх разом.
Збереження URL-стану: якщо клієнт відфільтрував каталог, перейшов у картку товару і натиснув кнопку «Назад» у браузері смартфона, він повертається рівно на ту саму відфільтровану позицію каталогу, а не на початок першої сторінки.
Головні висновки
Ваш каталог підвисає на фільтрах і зливає оплачені кліки з товарної реклами?
Повільна синхронна фільтрація (3+ секунди на перезавантаження сторінки зі скиданням скролу) знищує до 58% мобільного трафіку з Google Shopping та Meta Catalog Ads.
Перехід на реактивну AJAX-архітектуру з індексованим пошуковим рушієм (Meilisearch / Elasticsearch) скорочує час відгуку каталогу на 10,000+ SKU до 35–50 мілісекунд.
Предикативний пошук із виправленням одруківок, розкладки клавіатури та прев'ю товарів прямо у випадаючому рядку підвищує конверсію пошукових сесій у 2.5–3 рази.
Гібридні SEO-фільтри з ЧПУ-адресами для двокомпонентних перетинів (Категорія + Бренд/Атрибут) приносять тисячі безкоштовних органічних переходів без ризику дублів.
