Пятнадцать лет строю и масштабирую распределённые системы — застал переход индустрии от bare-metal серверов и монолитов к cloud-native, Kubernetes и GitOps. Берусь за то, что команды откладывают: технический долг, выкладка релизов с нуля и удержание систем в рабочем состоянии.
Шесть переходов, которые сегодня продают готовыми решениями. Я проходил их, когда готовых решений не существовало.
Engel & Völkers
Люксовая недвижимость — региональное представительство сети · 2023 · Единственный разработчик, фронтенд и бэкенд
Ситуация
Элитный объект продаётся медиа: галереями, планировками, съёмкой. Те же файлы, что продают, и тормозят страницу.
Что сделано
Сделал сайт и каталог объектов для регионального представительства сети — медиагалереи, фильтрация по локациям, интерактивная карта. Затем облегчил страницы: изображения грузятся по мере прокрутки и в формате примерно втрое легче исходного.
Что построено
Каталог объектов: сетка, фильтры по локациям, карточка объекта
Медиагалереи с отложенной загрузкой и отдачей в WebP
Интерактивная карта, связанная с тем же состоянием фильтра, что и список
Бэкенд каталога и конвейер обработки медиа
В цифрах
Страниц за визит: 1.8 стр. → 4.1 стр. — Рост более чем вдвое
Мобильный Lighthouse: 45 → 92+ — Оценка скорости страницы от Google, из 100. С тяжёлой галереи уходило больше 55% мобильных посетителей
Что изменилось
Посетители стали смотреть ~4.1 страницы за визит вместо ~1.8, оценка скорости от Google на мобильных — с 45 до 92+. До этого тяжёлая галерея прогоняла больше половины тех, кто заходил с телефона.
В чём была сложность
Ленивая загрузка медиа высокого разрешения и связки похожих объектов: галерея премиум-класса весит столько, что на мобильном она и есть причина отказа.
Элитные объекты продаются съёмкой и планировками. Те же файлы, что продают, делают страницу тяжёлой, поэтому «просто сжать» было нельзя.
Карта и список делят одно состояние фильтра: изменение в любом из них должно двигать второй без обращения к серверу и без потери позиции, до которой посетитель дошёл в каталоге.
Чем подтверждается
Работа по договору с заказчиком. Исходный код и внутренние замеры остаются у него, и цифра выше — его, а не публичный бенчмарк.