Как Truebil сделал Интернет своим каналом роста

История стартапа, создавшего лучший в своем классе веб-интерфейс.

Harleen Batra

О

Компания Truebil, основанная в 2015 году, — это индийская онлайн-площадка по продаже 100% сертифицированных подержанных автомобилей. С более чем 1,4 миллионами активных пользователей в месяц, она предлагает комплексное решение, включающее переоформление права собственности, страхование, кредиты и сервисные гарантии. Потенциальные покупатели могут просматривать страницы отдельных товаров с изображениями и подробными отчетами об осмотре, а также получать оценку автомобиля с помощью функций «Сравнить» и «Truescore» на сайте. Truebil выделяется своим продуктом благодаря богатому функционалу, включая персонализированные рекомендации на основе машинного обучения, функцию добавления в избранное, функцию обмена автомобилями и многое другое.

Испытание

Truebil — это стартап с низкой частотой и высокой стоимостью транзакций, поэтому выбор правильной платформы для приоритетного инвестирования был крайне важен.

Компания Truebil определила мобильные устройства в качестве целевой платформы и выбрала веб-технологии для своего первого приложения, Truebil Lite , из-за простоты поиска и низкой сложности веб-разработки. Веб-технологии обеспечивают более низкие затраты на разработку, меньшее потребление данных и памяти, а также значительно более низкие затраты на привлечение клиентов по сравнению с разработкой приложения для Android/iOS. Создав прогрессивное веб-приложение (PWA), Truebil смогла получить все преимущества веб-технологий и выгоды iOS/Android.

Решение

Внутренняя команда разработчиков потратила четыре месяца на создание Truebil Lite с использованием React, Django и Preact (для миграции в продакшн). Они определили четкие руководящие принципы для веб-приложения, основанные на целях пользователей. Пользовательский опыт должен был быть следующим:

• Быстрая загрузка при первом нажатии и последующие переходы.
• Надежный , независимый от сетевых или аппаратных ограничений пользователя, и
• Привлекательный , особенно для небольших экранов мобильных устройств, сайт, к которому пользователи захотят вернуться.

Оптимизация для быстрой первой загрузки и навигации.

Используя Lighthouse для оптимизации производительности, команда внедрила культуру, ориентированную на производительность, одновременно реализуя новые функции. Компания Truebil смогла значительно улучшить пользовательский опыт, уделяя приоритетное внимание показателям First Contentful Paint и Time to Interactive (TTI) , а также оптимизируя быструю первую загрузку, повторные посещения и плавную навигацию. Команда достигла этих результатов, установив бюджеты производительности и используя различные методы для их достижения.

Установите бюджеты производительности

Руководствуясь принципом приоритета производительности, команда Truebil выбрала архитектуру одностраничного приложения с серверным рендерингом при первой загрузке и клиентским рендерингом при последующих. Поддержание высокой производительности веб-приложений с клиентским рендерингом может быть сложной задачей, поэтому Truebil установила очень строгие ограничения по производительности , чтобы гарантировать отсутствие компромиссов в скорости, особенно по мере добавления новых функций.

Команда установила строгие поэтапные бюджеты для TTI с целью уложиться в пять секунд. Для достижения этой цели они вручную следили за тем, чтобы размер JavaScript-пакета ни одной сборки не превышал 250 КБ, постоянно контролировали размеры изображений и непрерывно отслеживали показатель производительности приложения в Lighthouse.

Оптимизация пакетов JavaScript

Команда начала с основ, используя шаблон PRPL для предварительного кэширования и оптимизации JavaScript-данных, а также перешла на HTTP/2 для обслуживания критически важных пакетов JavaScript.

Для отложенной загрузки некритичных ресурсов они использовали компоненты отложенной загрузки на уровне фреймворка для загрузки фрагментов, расположенных ниже видимой части экрана.

Чтобы устранить любые узкие места в сборке JavaScript-кода, команда уменьшила размер полезной нагрузки за счет разделения кода . Они использовали разбиение на части на основе компонентов и маршрутов, чтобы уменьшить размер основного пакета и улучшить время загрузки на 44%, при этом время загрузки сократилось с 6 секунд до примерно 5 секунд, а время первой значимой отрисовки (FMP) — с 4,1 секунды до 3,6 секунды.

Встроенный критический CSS

Для дальнейшего улучшения FMP команда использовала Lighthouse, чтобы найти возможности для оптимизации производительности и подтвердить её эффективность. Lighthouse показал, что наибольший эффект окажет уменьшение количества блокирующих рендеринг CSS-стилей, поэтому Truebil встроил все критически важные CSS-стили и отложил выполнение некритических . Этот метод сократил FMP примерно на 2 секунды .

Избегайте многочисленных и дорогостоящих поездок туда и обратно в любой пункт отправления.

Для снижения накладных расходов, связанных с DNS и TLS, компания Truebil использовала <link rel="preconnect"> и <link rel="dns-prefetch"> . Такой подход заставляет браузер завершать рукопожатие TLS как можно быстрее при загрузке страницы и предварительно разрешать доменные имена между источниками, обеспечивая безопасную и быструю работу для пользователя.

Динамическая предварительная загрузка следующей страницы

Проанализировав данные, команда выявила наиболее распространенные сценарии взаимодействия пользователей с приложением, которые можно оптимизировать. В этих случаях приложение динамически загружает ресурсы следующей страницы, используя <link rel=prefetch> , чтобы обеспечить плавную навигацию для пользователей. Хотя команда вручную определяет ссылки для предварительной загрузки, она использует webpack для сборки JavaScript-кода для этих ссылок.

Оптимизируйте изображения и шрифты.

Изображения играют решающую роль в удобстве использования и повышении доверия к продукту Truebil, при этом каждое описание товара может содержать до 40 фотографий. Чтобы изображения не замедляли загрузку страницы, команда решила размещать все ресурсы на CDN и использовать ImageMagick для оптимизации изображений. Кроме того, все сжимаемые ресурсы, включая изображения, JavaScript и CSS, были сжаты с помощью Gzip, что еще больше сократило время загрузки.

Чтобы избежать появления невидимого текста и свести время загрузки к минимуму, Truebil настроили свой CSS таким образом, чтобы в качестве резервного варианта использовались системные шрифты до тех пор, пока не загрузятся внешние шрифты.

Дальнейшая оптимизация

Когда приложение было готово, команда захотела еще больше уменьшить размер пакета сторонних разработчиков и время выполнения JavaScript, поэтому они перевели свое React-приложение на Preact в продакшене. (Подробнее в коллекции React .) Такой подход помог им уменьшить размер пакета сторонних разработчиков с 82,3 КБ до 51,2 КБ.

Встроенная надежность

Ориентируясь на индийский рынок, подавляющее большинство пользователей Truebil используют их продукт в сетях с нестабильной связью, где пропускная способность иногда опускается до 2G. Поэтому создание отказоустойчивого решения было критически важным не только для повышения производительности в условиях ограниченной сети, но и для предоставления пользователям надежного продукта, который всегда работает.

Гибридная стратегия кэширования для надежной загрузки

Интерактивность и скорость обновления контента Truebil сильно различаются. Чтобы гарантировать актуальность и надежность всего контента, команда Truebil внедрила кэширование API, используя комбинацию стратегий network-first, cache-first и fastest-first.

Для статических страниц, таких как страница подписки, Truebil использует стратегию кэширования, сначала обращаясь к кэшу своего API подписки, а затем используя сетевой кэш.

Для страниц с динамическим контентом, который редко меняется, например, страниц со списком товаров или подробным описанием, Truebil использует стратегию «сначала сеть», так что браузер сначала проверяет наличие контента в сети, а затем, если сеть недоступна, обращается к кэшу API.

А для динамических страниц, которые часто меняются, таких как главная страница, страница фильтра, поиска и страница города, Truebil использует стратегию «быстрейший первым», выбирая между сетью и кэшем в зависимости от того, что произойдет раньше. Чтобы гарантировать актуальность контента, кэш обновляется всякий раз, когда ответ от сети отличается от того, что находится в кэше.

Сервисные работники для полноценного офлайн-опыта

Несмотря на то, что значительная часть контента Truebil носит динамичный характер — автомобили можно добавлять или покупать в любое время — команда хотела обеспечить пользователям доступ к контенту, даже если у них нестабильное соединение или они находятся в полной офлайн-режиме.

Используя сервис-воркеры , команда смогла кэшировать как статические, так и динамические данные, с которыми пользователь уже взаимодействовал, чтобы он мог просматривать их в автономном режиме. Чтобы пользователи знали, что контент может измениться при повторном подключении к сети, команда изменила интерфейс на оттенки серого, чтобы обозначить автономный режим. Просмотр страниц товаров является важной частью пользовательского пути Truebil. Пользователи, которые хотя бы раз посещали PWA, могут просматривать списки и страницы товаров, которые они посещали ранее, но не смогут увидеть обновления списка или товара.

Повысьте вовлеченность пользователей, чтобы они возвращались снова и снова.

Увлекательное первое впечатление

Поскольку большинство пользователей Truebil переходят на их сайты через платные каналы, компании потребовалось дополнить свое быстро загружающееся веб-приложение продуктом, который бы предлагал максимально релевантные рекомендации для повышения конверсии. Хотя команда использует систему рекомендаций, основанную на сложной фильтрации для существующих пользователей, эта система не работает для пользователей, которые входят в систему впервые.

Чтобы избежать негативного старта для новых пользователей, команда внедрила систему рекомендаций, используя свои усилия в области цифрового маркетинга. Они добавляют информацию о продукте, такую ​​как модель автомобиля, цена и тип кузова, в целевой URL объявления с помощью UTM-параметра, который считывается системой рекомендаций и отображается в результатах поиска. В случае, если система не считывает такие данные в URL, она переключается на популярные автомобили, представляющие собой комбинацию популярных моделей, популярных ценовых категорий и автомобилей, которые были популярны в последние несколько недель или дней.

Веб-приложение, которое можно установить.

Разработав быстрое, полнофункциональное веб-приложение с привлекательным пользовательским интерфейсом, компания Truebil хотела убедиться, что пользователи будут возвращаться снова и снова. Они поняли, что возможность установки приложения значительно упростит повторные посещения.

Команда реализовала функцию «Добавить на главный экран» , чтобы сделать свой продукт полноценным прогрессивным веб-приложением (PWA). Такой подход позволил пользователям добавить Truebil Lite на главный экран и запустить его в полноэкранном режиме. А поскольку у них уже был реализован автономный режим, команда смогла легко добавить новую функцию.

Чтобы предотвратить рассылку спама и повысить вероятность установки приложения, команда недавно обновила свою стратегию продвижения установки PWA, так что уведомления об установке появляются тогда, когда они действительно будут полезны для разных категорий пользователей. Компания Truebil остановилась на трехэтапной стратегии:

• Отображает подсказки, когда пользователь выполнил действие или находится в режиме ожидания.
• Показывать контекстные подсказки пользователям старшего возраста.
• Отображать баннер, когда пользователь проведет на сайте определенное количество времени.

Баннеры по умолчанию при завершении процесса и на страницах с высокой посещаемостью.

Команда решила показывать баннер установки, когда пользователь завершает задачу или находится на страницах с высокой посещаемостью, но в режиме ожидания (то есть, не совершает никаких действий, таких как прокрутка или заполнение формы). Такой подход позволил им избежать прерывания активности пользователя.

Контекстные подсказки для пользователей старшего возраста

Для пользователей, которые уже некоторое время взаимодействовали с приложением, команда использовала контекстно-ориентированные сообщения, чтобы показать преимущества установки приложения на главный экран:

Пользовательский баннер для подсказок, привязанных ко времени.

Наконец, команда добавила ненавязчивый баннер с дизайном, напоминающим уведомление, который срабатывает при определенных событиях, таких как открытие страницы со списком товаров или после того, как пользователь провел в приложении определенное количество времени:

Благодаря этим улучшениям показатели конверсии и вовлеченности пользователей в Truebil значительно выросли: продолжительность пользовательских сессий увеличилась на 26% , а количество конверсий — на 61% , что имеет большое значение для их бизнеса, учитывая высокую стоимость каждой транзакции.

Для стартапа с ограниченными ресурсами выбор правильной платформы может иметь решающее значение для успеха бизнеса. Переход на PWA, ориентированный на скорость, отказоустойчивость и вовлеченность пользователей, позволил нам увеличить соотношение выручки к маркетинговым расходам на 80% благодаря росту конверсий и беспрепятственному охвату аудитории в интернете.

Ракеш Раман, соучредитель и руководитель отдела продуктов и анализа данных в Truebil.