Два місяці тому пошук на маркетплейсі чогось звичного, наприклад, велосипеда, був грою в здогадки. Бічна панель показувала всі наші категорії, згори донизу, у вигляді дерева. Ви обирали одну, гортали, впиралися в глухий кут, тиснули назад, пробували наступну, і так по колу. Бічна панель описувала наш каталог, а не ваші результати.
Це нас турбувало. Тож ми розібрали бічну панель на частини й перебудували її. Заодно ми зрізали зайві байти з кожного фото на сайті, змусили шапку відступати з вашого шляху під час гортання та додали кілька дрібних браузерних хитрощів, які разом складаються у відчуття «тут щось стало інакше». Ось короткий огляд.
Швидші зображення
Кожне зображення проходить через нас. Користувачі завантажують JPEG на 4 МБ зі своїм кухонним столом; ми змінюємо його розмір для карток товарів, сторінок товарів і мініатюр, а потім назавжди роздаємо ці копії. Конвеєр налаштували роками тому, і він працював, але мав дві проблеми, які ми ігнорували.
Проблема перша: ми зберігали кожне зображення в тому форматі, у якому його завантажили. JPEG залишався JPEG, PNG залишався PNG. Ми агресивно зменшували розмір, але ніколи не перекодовували у менший сучасний формат, лишаючи приблизно третину байтів кожного фото марно лежати.
Проблема друга: браузер не мав уявлення, яке саме зображення на сторінці товару найважливіше. Велике головне зображення, чотири мініатюри поруч із ним, рядок рекомендованих товарів нижче, усе завантажувалося з однаковим пріоритетом, змагаючись одне з одним за те саме з'єднання. Головне зображення з'являлося, коли йому заманеться.
Обидві проблеми можна виправити.
Один формат для кожного фото
Ми стандартизували єдиний сучасний формат зображень на вході. Хоч би в якому форматі ви завантажили, JPEG, PNG, анімований GIF, ми перекодовуємо його в менший. Для анімованих GIF ми залишаємо перший кадр; фото товарів, це не анімації, і ми радше матимемо менше нерухоме зображення, ніж громіздкий цикл, якого ніхто не просив.
Підказуємо браузеру, що важливо
Це був більший виграш. Браузеру можна підказати, яке зображення на сторінці найважливіше, «головне», щоб він завантажив його раніше за все інше. Ми додали ці підказки у трьох місцях:
- Головне зображення на сторінці товару: найвищий пріоритет. Бічні мініатюри явно нижчі, щоб не конкурувати.
- Перший рядок карток у головній стрічці та стрічці пошуку: високий. Рядки нижче за згином чекають, поки ви до них догортаєте.
- Декоративні зображення (маленькі іконки категорій тощо): низький, і завантажуються лише за потреби.
The hero downloads first; thumbnails wait their turn.
Один тихий баг, який ми спіймали по дорозі
Галерея на сторінці товару обирала розмір фото на основі того порядку, у якому сервер випадково їх повертав, а не на основі того, який розмір насправді був потрібен. Іноді головним був мініатюрний 300-піксельний кадр; іноді мініатюра виявлялася версією повної роздільності. Свіжий показ тепер «відчувається» чіткішим, бо правильний розмір опиняється у правильному слоті.
Розумніше фільтрування пошуку
Повернімося до прикладу з велосипедом. Такий пошук перетинає багато категорій, дорослі велосипеди, дитячі велосипеди, запчастини, аксесуари, а стара бічна панель не мала уявлення, у яких із них насправді є збіги. Ви дізнавалися про це, клікаючи кожну. Нова бічна панель просто показує набір відповідностей із кількістю.
Та сама ідея розгортається для кожного атрибута, який нам відомий. Бренд, колір, розмір, розмір рами, вага, якщо у результатах-відповідностях є значення для нього, цей атрибут з'являється в бічній панелі з прапорцями та кількістю.
Для числових атрибутів (ціна, вага, місткість тощо) ми замінили старі поля «введіть мінімум і максимум» повзунком, межі якого відповідають фактичному діапазону, наявному в результатах. Якщо найдешевше оголошення-відповідність коштує €120, повзунок починається з €120. Більше ніякого введення мінімуму €10, коли все одно немає результату, дешевшого за €120.
Статичне дерево категорій (кожен вузол каталогу). Порожні поля мінімуму/максимуму для ціни. Жодного уявлення, у яких категоріях насправді є результати, поки ви не проклацаєте їх усі.
Лише категорії з відповідними результатами, відсортовані за кількістю. Множинний вибір для розширення. Повзунок із межами за реальним мінімумом/максимумом оголошень-відповідностей. Бічна панель, це карта набору результатів, а не довідник каталогу.
Коли набір результатів порожній
Ще один нюанс: якщо ви перефільтрували й опинилися на нулі результатів, уся бічна панель зникає. Тут немає чого уточнювати, чіпи фільтрів і прапорці були б лише візуальним шумом. Сторінка згортається до єдиної кнопки «Очистити всі фільтри» по центру. Один клік, і ви повертаєтеся туди, де бічна панель може допомогти.
Більш відшліфоване відчуття перегляду
Цього спринту з'явилося п'ять дрібниць, які разом змінюють відчуття від сайту. Жодна з них не є гучною функцією; кожна, це одне-два оголошення CSS. Вони перелічені в порядку того, як часто типовий користувач їх зустрічатиме.
Шапка відступає з дороги
Білий навігаційний рядок угорі кожної сторінки тепер ховається вгору за екран, коли ви гортаєте вниз, і повертається у поле зору, коли ви гортаєте вгору, класичний шаблон «шапка зникає з мого шляху, поки я читаю». Браузери, які не підтримують базову можливість, просто залишають рядок видимим; нічого не ламається.
Плавніші переходи картка → товар
Клацніть картку товару в головній стрічці чи стрічці пошуку, і її головне зображення тепер плавно анімується на місце на сторінці деталей товару, замість колишнього різкого стрибка. Назва картки, ціна та кнопка «подобається» роблять те саме. Це різниця між сторінкою, яка «завантажується», і тією, що «трансформується».
Заголовки переносяться красивіше
Назви товарів, заголовки карток, заголовки розділів, жоден з них тепер не лишає однослівного «сироту» в останньому рядку. Браузер балансує розриви рядків за нас. Одне оголошення CSS, застосоване по всьому сайту, одразу видиме всюди, де переноситься заголовок.
Більше ніякого горизонтального тремтіння під час відкриття модальних вікон
Раніше: відкриваєте модальне вікно поширення, і сторінка смикається на 15 пікселів праворуч, коли смуга прокручування зникає, а все під нею зсувається. Тепер: зарезервований відступ утримує місце незалежно від того, є смуга прокручування чи ні. Модальні вікна відкриваються без смикання сторінки.
Швидше перемикання мов
Форматування дат вашою мовою раніше постачалося в комплекті з даними форматування для всіх інших підтримуваних мов, близько 100 КБ локальних даних, хоча вам коли-небудь потрібна була лише одна. Тепер ми завантажуємо лише ту мову, якою ви користуєтеся. Менший бандл, швидший перший показ.
Прибирання під капотом
Ціла купа дрібних коригувань, які важко помітити окремо, але які проявляються як чистіші траси на наших панелях продуктивності. Жодне з них не змінило поведінки, яку ви побачили б. Ключові цифри:
Що ми (поки) не випустили
Кілька пунктів почалися, але не потрапили в цей спринт:
- Фільтрування атрибутів за кількома значеннями. Інтерфейс приймає кілька позначених значень на атрибут (можна відмітити три бренди), але сьогодні на стороні сервера враховується лише одне. Наступний спринт.
- Розумніший перерахунок фасетів. Зараз позначення «ASUS» прибирає інші варіанти брендів зі списку. У відшліфованій версії кожен фасет перераховується без урахування власного фільтра, щоб варіанти лишалися видимими. Здійсненно; просто дорожчий шлях запиту.
- Зображення AVIF. Ще менші за те, що ми постачаємо сьогодні. Коштують більше роботи кодувальника на стороні сервера; відкладено, поки не проведемо бенчмарк.
Це все на цей спринт. Наступний допис має охопити роботу, яку ми почали над спільними оголошеннями між користувачами, тихцем найзапитуванішою функцією за останній квартал, щойно вона просунеться достатньо, щоб про неї говорити.