Поиск автомобилей оценивается в первые триста миллисекунд и запоминается по его изображениям. Результаты поиска, которые сразу появляются полностью, выглядят как каталог, а те, которые собираются с рывками, — как скрейпер. Разница редко в поисковой системе и почти всегда в слое изображений, прикрепленном к ней, поэтому этот раздел охватывает поиск именно через этот призму.
Автозаполнение с лицами
Предложения с миниатюрами конвертируются значительно лучше, чем текстовые списки, потому что распознавание опережает чтение. Схема: по мере сужения запроса до моделей каждое предложение несет небольшое изображение передней трети в три четверти, обслуживаемое точно в размере миниатюры. Изображения поступают из предсказуемых параметризованных URL, поэтому загрузка предложений — это горстка строк, а короткая предзагрузка при фокусе делает первые нажатия клавиш похожими на экстрасенсорику. Разрешение поиска обрабатывает нечёткое соответствие под капотом
Сетка результатов под давлением
- Ячейки с фиксированным соотношением сторон, зарезервированные до прибытия любого изображения
- Миниатюры в формате WebP, а не детали страниц, уменьшенные с помощью CSS
- Ленивая загрузка ниже сгиба, жадная — выше
- Стабильные URL для каждого автомобиля, чтобы пагинация и навигация назад попадала в тёплый кэш
Фильтры добавляют изюминку, которую инженеры по поиску недооценивают: каждое изменение фасета перемешивает сетку, и наивные реализации повторно загружают изображения, которые сессия уже содержит. Ключевые карточки на стабильных идентификаторах автомобилей позволяют кэшу браузера поглощать перемешивания, поэтому фильтрованный просмотр на хорошо построенной сетке становится мгновенным со второго взаимодействия.
Цветовой фильтр, выполненный честно
Фильтрация по цвету — это то, что может тихо радовать в поиске автомобилей: отфильтруйте по красному, и сетка покажет именно те модели, которые перекрашены в красный цвет, а не тот цвет, который был на фотографии из запасов. С цветом как параметром рендеринга, фасет и изображение совпадают по конструкции, и результат поиска становится небольшим конфигуратором без необходимости его создания.
Пустые состояния и длинные хвосты
Поиск выводит на поверхность края каталога: редкую комплектацию, снятую с производства модель, запрос, который совпадает с одним автомобилем в стране. Именно эти результаты фотография никогда не охватывала, а рендеринг обеспечивает равномерность сетки до последнего ряда. Пустое состояние тоже заслуживает изображения; брендированный заполнитель с предложением пути превосходит безразличный рисунок, потому что именно здесь концентрируется отказ от поиска
Пользователи прощают поиск, который ничего не нашел. Они не прощают тот, который выглядит сломанным, пока ищет.
Измерьте весь цикл как одну метрику: нажатие клавиши до завершения окрашенной сетки на среднем смартфоне по сотовой сети. Руководство по бенчмаркам поставляет метод, а стратегия кэширования поставляет большую часть улучшений.
Сохранённые поиски закрывают круг
Сетка поиска оплачивается дважды на поверхностях удержания: сохраненные поиски и уведомления используют те же миниатюры в письмах и уведомлениях, и согласованность между карточкой уведомления и сеткой, на которую она ссылается, делает повторный визит плавным. Одна система изображений, закрепленная за стабильными идентификаторами, тихо питает весь цикл от первого нажатия клавиши до уведомления, которое возвращает покупателя.
