КЕЙС:
Редизайн каталога на 12 000 товаров: фильтрация без перезагрузки страницы
Коллеги, на днях закрыли проект, который начинался со слов клиента: «У нас каталог тормозит, покупатели уходят». А заканчивался тем, что мы перебрали всю логику фильтрации с нуля. Делюсь, что сработало в продакшене.
Дано: интернет-магазин строительных материалов. 12 000+ SKU, 6 уровней вложенности категорий, 14 параметров фильтрации (цена, бренд, материал, размер, наличие и т. д.). Старая реализация — классический сабмит формы, перезагрузка, белый экран на 3–4 секунды. Конверсия в корзину: 1,2%.
Что сделали:
1️⃣ Перенесли фильтрацию на клиент. Сервер отдаёт один раз срез по категории (макс. ~3 000 позиций), дальше крутим на фронте. Для 12 000 товаров по всей витрине — ленивая подгрузка через IntersectionObserver + пагинация по 200 карточек.
2️⃣ Debounce + Web Worker. Ввод в поиск и чекбоксы фильтров уходят в воркер с задержкой 300 мс. Воркер гоняет фильтрацию по индексу (простой Map по каждому параметру), возвращает массив ID. Основной поток не фризит.
3️⃣ Скелетоны вместо спиннера. Пока воркер считает, показываем анимированные заглушки карточек. Пользователь видит, что «что-то происходит», а не тупит в пустоту.
4️⃣ Синхронизация с URL. Каждый набор фильтров пишется в query-params через History API. Ссылку можно скопировать, отправить, добавить в закладки. Без перезагрузки.
5️⃣ Счётчик результатов в реальном времени. «Найдено 347 товаров» обновляется мгновенно, ещё до отрисовки карточек. Даёт ощущение контроля.
Результат через 3 недели после деплоя:
— Время отклика фильтра: 3–4 сек → 120 мс (медиана).
— Конверсия в корзину: 1,2% → 2,7%.
— Показатель отказов на страницах каталога упал на 38%.
Грабли, на которые наступили: на первом прототипе грузили все 12 000 объектов разом. На слабых мобилках Safari просто умирал по памяти. Пришлось резать на чанки и выгружать невидимые карточки из DOM.
Главный вывод: не бойтесь переносить логику на клиент, если объём данных вменяемый. Но всегда тестируйте на реальных устройствах, а не на MacBook с 32 ГБ оперативки. 😄
Вот так. Идем кодить дальше! 🚀