Как 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 смог значительно улучшить взаимодействие с пользователем, установив приоритеты показателей «Первая отрисовка контента » и «Время до интерактивности» (TTI), а также оптимизировав быстрые первые загрузки, повторные посещения и плавную навигацию. Команда достигла этих результатов, установив бюджеты производительности и используя различные методы для их достижения.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Обеспечьте надежность

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

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

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

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

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

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

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

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

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

Улучшите взаимодействие, чтобы пользователи возвращались

Увлекательный первый опыт

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

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

Устанавливаемое веб-приложение

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

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

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

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

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

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

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

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

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

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

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

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

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