История стартапа о создании лучшего в своем классе веб-интерфейса.
О
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, чтобы найти возможности и проверить влияние оптимизации производительности. Лайтхаус указал, что сокращение CSS, блокирующего рендеринг, будет иметь наибольший эффект, поэтому Truebil встроил все важные CSS и отложил некритические CSS . Этот метод уменьшил FMP примерно на 2 секунды .
Избегайте многочисленных дорогостоящих поездок туда и обратно в любой пункт отправления.
Чтобы снизить нагрузку на DNS и TLS, Truebil использовал <link rel="preconnect"> и <link rel="dns-prefetch"> . Этот подход заставляет браузер завершать подтверждение TLS как можно скорее при загрузке страницы и предварительно разрешать доменные имена из разных источников, обеспечивая безопасный и быстрый пользовательский интерфейс.
<link rel=preconnect> . Динамическая предварительная загрузка следующей страницы
Проанализировав свои данные, команда определила наиболее распространенные пути пользователя, которые можно оптимизировать. В этих случаях приложение динамически загружает ресурс следующей страницы, используя <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
44 %
Улучшение времени загрузки
26 %
Более длительные пользовательские сессии
61 %
Увеличение конверсий
80 %
Увеличение доходов от расходов на маркетинг
История стартапа о создании лучшего в своем классе веб-интерфейса.
О
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, чтобы найти возможности и проверить влияние оптимизации производительности. Лайтхаус указал, что сокращение CSS, блокирующего рендеринг, будет иметь наибольший эффект, поэтому Truebil встроил все важные CSS и отложил некритические CSS . Этот метод уменьшил FMP примерно на 2 секунды .
Избегайте многочисленных дорогостоящих поездок туда и обратно в любой пункт отправления.
Чтобы снизить нагрузку на DNS и TLS, Truebil использовал <link rel="preconnect"> и <link rel="dns-prefetch"> . Этот подход заставляет браузер завершать подтверждение TLS как можно скорее при загрузке страницы и предварительно разрешать доменные имена из разных источников, обеспечивая безопасный и быстрый пользовательский интерфейс.
<link rel=preconnect> . Динамическая предварительная загрузка следующей страницы
Проанализировав свои данные, команда определила наиболее распространенные пути пользователя, которые можно оптимизировать. В этих случаях приложение динамически загружает ресурс следующей страницы, используя <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
44 %
Улучшение времени загрузки
26 %
Более длительные пользовательские сессии
61 %
Увеличение конверсий
80 %
Увеличение доходов к маркетинговым расходам
История стартапа о создании лучшего в своем классе веб-интерфейса.
О
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, чтобы найти возможности и проверить влияние оптимизации производительности. Лайтхаус указал, что сокращение CSS, блокирующего рендеринг, будет иметь наибольший эффект, поэтому Truebil встроил все важные CSS и отложил некритические CSS . Этот метод уменьшил FMP примерно на 2 секунды .
Избегайте многочисленных дорогостоящих поездок туда и обратно в любой пункт отправления.
Чтобы снизить нагрузку на DNS и TLS, Truebil использовал <link rel="preconnect"> и <link rel="dns-prefetch"> . Этот подход заставляет браузер завершать подтверждение TLS как можно скорее при загрузке страницы и предварительно разрешать доменные имена из разных источников, обеспечивая безопасный и быстрый пользовательский интерфейс.
<link rel=preconnect> . Динамическая предварительная загрузка следующей страницы
Проанализировав свои данные, команда определила наиболее распространенные пути пользователя, которые можно оптимизировать. В этих случаях приложение динамически загружает ресурс следующей страницы, используя <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 использует стратегию-первого кэша, чтобы сначала перейти к своему кэше подписки, возвращаясь к сети.
Для страниц с динамическим контентом, которые редко меняются, например, их список продуктов или подробные страницы, TrueBil использует стратегию первой сети, так что браузер сначала проверяет сеть на наличие контента, прежде чем вернуться в кэш API, если сеть недоступна.
И для динамических страниц, которые часто меняются, такие как дом, фильтр, поиск и городские страницы, TrueBil использует самую быструю стратегию для выбора между сетью или кэшем на основе того, каким бы ни был на первом месте. Чтобы гарантировать, что контент является свежим, кэш обновляется всякий раз, когда отклик сети отличается от того, что находится в кэше.
Работники обслуживания для полного офлайнового опыта
Несмотря на то, что большая часть контента TrueBil очень динамична - Cars можно добавить или купить в любое время - команда хотела убедиться, что у их пользователей есть какой -то контент для участия, даже если они проходили нечистительные сети или были полностью офлайн.
Используя услуги , команда смогла кэшировать как статические данные, так и динамические данные, с которыми пользователь уже взаимодействовал, чтобы пользователь мог просмотреть их в автономном режиме. Чтобы пользователи знали, что контент может измениться, когда они возвращаются в Интернете, команда изменила пользовательский интерфейс на GreyScale, чтобы указать в автономном режиме. Просмотр страниц продукта является важной частью пути пользователя TrueBil. Пользователи, которые посетили PWA, по крайней мере, один раз могут просматривать списки и страницы продуктов, которые они посещали раньше, но не смогут увидеть какие -либо обновления в списке или продукт.
Улучшить взаимодействие, чтобы пользователи возвращались
Увлекательный первый опыт
Поскольку большинство их пользователей поступают по платным каналам, TrueBil необходимо дополнить свое приложение для быстрого загрузки веб -приложением с продуктом, который выделяет очень важные рекомендации для увеличения конверсий. В то время как команда использует систему рекомендаций, основанную на сложной фильтрации для существующих пользователей, их система не работает для пользователей, которые входят в систему в первый раз.
Чтобы не дать своим новым пользователям холодный старт, команда интегрировала систему рекомендаций, используя свои усилия по цифровому маркетингу. Они добавляют детали продукта, такие как модель автомобиля, цена и тип тела в URL -адрес назначения объявления через параметр UTM, который читается их системой рекомендаций и отражается в всплеске продуктов. В случае, если SYSME не читает такие детали в URL, он возвращается к популярным автомобилям, который представляет собой комбинацию популярных моделей, популярных бюджетов и автомобилей, которые были популярны в последние несколько недель или дни.
Установленное веб -приложение
Создав быстрое, полнофункциональное веб-приложение с убедительным пользовательским опытом, TrueBil хотел, чтобы их пользователи продолжали возвращаться. Они поняли, что создание приложения будет установленным повторным посещением гораздо более плавными.
Команда внедрила функцию «Добавить на домашний экран» , чтобы сделать их продукт полным прогрессивным веб -приложением (PWA). Этот подход позволил пользователям добавить TrueBil Lite на домашний экран и запустить его в полноэкранном режиме. И поскольку они уже внедрили автономный режим, команда смогла легко добавить новую функцию.
Чтобы гарантировать, что их пользователи не были спамили и увеличили вероятность того, что пользователи установит приложение, команда недавно обновила свою стратегию для продвижения установки PWA , чтобы появились подсказки по установке, когда они будут полезны для разных видов пользователей. TrueBil обосновалась на стратегии из трех частей:
- Показать подсказки, когда пользователь завершил действие или простаивает.
- Показать контекстные подсказки для зрелых пользователей.
- Покажите баннер, когда пользователь потратил на сайт определенное количество времени.
Баннеры по умолчанию по завершению процесса и на страницах с высоким трафиком
Команда решила показать баннер по установке, когда пользователь выполняет задачу или находится на страницах с высоким трафиком, но холостое время (то есть не предпринимает действия, например, прокрутка или заполнение формы). Этот подход позволил им избежать прерывания деятельности пользователя.
Контекстуальные подсказки для зрелых пользователей
Для пользователей, которые какое -то время взаимодействовали с приложением, команда использовала очень контекстные пользовательские сообщения, чтобы показать ценность установки приложения на домашний экран:
Пользовательский баннер для подсказок на основе времени
Наконец, команда построила неинтрузивную баннер с дизайном, подобным уведомлениям, который запускается на определенных событиях, таких как открытие страницы листинга или после того, как пользователь потратил определенное количество времени, затрачиваемого в приложении:
Из -за этих улучшений уровень конверсии и вовлечения TrueBil значительно вырос с 26% более длинными пользовательскими сеансами и на 61% больше конверсий , что является значимым для их бизнеса, учитывая высокую стоимость транзакции каждой конверсии.
Для стартапа с ограниченными ресурсами выбор правильной платформы может иметь решающее значение для успеха бизнеса. Переходя к PWA, сосредоточенному на скорости, устойчивости и вовлеченности, позволил нам увеличить наши расходы на прибыль на рынок на 80% благодаря увеличению конверсий и без трения в Интернете.
Ракеш Раман, соучредитель и руководитель науки о продуктах и данных в TrueBil
44 %
Улучшение времени загрузки
26 %
Более длинные пользовательские сеансы
61 %
Увеличение конверсий
80 %
Увеличение расходов на выручку до продажи
История стартапа о создании лучшего в своем классе веб-опыта.
О
Основанная в 2015 году, TrueBil - это индийский онлайн -рынок, который продает 100% сертифицированных подержанных автомобилей. С более чем 1,4 миллионами активных пользователей в месяц, это универсальное решение, которое включает в себя перевод титула, страхование, кредиты и гарантии на обслуживание. Потенциальные клиенты могут видеть отдельные страницы продукта с изображениями и подробными отчетами о проверке и получать оценки транспортных средств с функциями сайта «Compare» и «TrueScore». TrueBil различает свой продукт с богатыми функциями, включая персонализированные рекомендации, основанные на машинном обучении, функции дополнительных любимых, функции Share-A-Car и многое другое.
Испытание
TrueBil-это худой стартап с низкочастотными транзакциями высокой стоимости, поэтому было важно выбрать правильную платформу для расстановки приоритетов и инвестиций.
TrueBil идентифицировал Mobile в качестве целевой платформы, и они выбрали Интернет для своего первого приложения TrueBil Lite из -за простого открытия и низкого трения в Интернете. Веб -технология обеспечивает более низкие затраты на разработку, меньше использования данных и памяти, а также значительно снижает затраты на привлечение клиентов, чем создание приложения Android/iOS. И создав прогрессивное веб -приложение (PWA), TrueBil может получить все льготы в Интернете и преимущества iOS/Android.
Решение
Внутренняя команда потребовалось четыре месяца, чтобы разработать TrueBil Lite с использованием React, Django и Preact (для миграции производства). Они устанавливают четкие руководящие принципы для веб -приложения на основе целей пользователей. Опыт должен был быть:
- Быстро при первой нагрузке и последующих навигациях,
- Надежный , независимый от ограничений сети пользователя или устройства, и
- Занимаясь , особенно для небольших мобильных экранов, поэтому пользователи захотят вернуться к нему.
Оптимизируйте для быстрой первой нагрузки и навигации
Используя Lighthouse для руководства оптимизацией производительности, команда приняла культуру, первую производительность, внедряя новые функции. TrueBil смог значительно улучшить пользовательский опыт, определив приоритеты первой плотной краски и времени для интерактивных (TTI) метрик и оптимизации для быстрых первых нагрузок, повторных посещений и плавной навигации. Команда достигла этих результатов, установив бюджеты производительности и используя различные методы для их достижения.
Установить бюджеты производительности
Благодаря мышлению Performance, команда TrueBil решила архимировать свой опыт в качестве приложения для одной страницы с рендерингом на стороне сервера для первой нагрузки и рендеринга на стороне клиента для последующих нагрузок. Сохранение веб -приложений с помощью рендеринга на стороне клиента может быть трудным, поэтому TrueBil устанавливает очень строгие бюджеты производительности , чтобы убедиться, что они не ставят под угрозу скорость, тем более что они добавляют больше функций.
Команда установила строгие бюджеты на основе вехи для TTI с целью держать его ниже пяти секунд. Чтобы достичь этой цели, они вручную обеспечили, чтобы ни одна сборка не превысила бы размер пакета JavaScript 250 КБ, постоянно проверяла размеры изображений и постоянно отслеживал оценку производительности маяка приложения.
Оптимизируйте пакеты JavaScript
Команда начала с оснований с использования шаблона PRPL для предварительного обеда и оптимизации полезных нагрузок JavaScript и переезжая на HTTP/2, чтобы обслуживать критические пакеты JavaScript.
Для ленивых нагрузочных некритических ресурсов они использовали свои ленивые компоненты на уровне фреймворта для загрузки ниже фрагментов.
Чтобы удалить любые узкие места для пакета JavaScript, команда сократила полезные нагрузки через разделение кода . Они использовали Chunking на основе компонентов и маршрутов, чтобы уменьшить размер основного пакета и улучшить время загрузки на 44%, при этом TTI падает с 6 секунд до примерно 5 секунд и первой значимой краски (FMP) с 4,1 секунды до 3,6 секунды.
Встроенные критические CSS
Для дальнейшего улучшения FMP команда использовала маяк, чтобы найти возможности и подтвердить влияние оптимизации производительности. Маяк указал, что снижение блокировки рендеринга CSS будет иметь наибольший эффект, поэтому TrueBil инлиментировала все критические CSS и отложенные некритические CSS . Эта техника уменьшила FMP примерно на 2 секунды .
Избегайте многочисленных дорогостоящих круглых поездок до любого происхождения
Чтобы смягчить накладные расходы от DNS и TLS, TrueBil использовал <link rel="preconnect"> и <link rel="dns-prefetch"> . Этот подход заставляет браузер завершить рукопожатие TLS как можно скорее на доменных именах доменных доменов с предварительной разрешением, что позволяет обеспечить безопасный, резкий пользовательский опыт.
<link rel=preconnect> . Динамически предварительно переполнить следующую страницу
Анализируя их данные, команда определила наиболее распространенные поездки пользователей, которые они могли бы оптимизировать. В этих случаях приложение динамически загружает ресурс следующей страницы, используя <link rel=prefetch> , чтобы обеспечить плавную навигацию для пользователей. В то время как команда вручную идентифицирует ссылки на предварительную фиксацию, они используют WebPack для объединения JS для этих ссылок.
Оптимизировать изображения и шрифты
Изображения являются важной частью опыта и авторитета продукта TrueBil, при этом каждый список продуктов, включающий до 40 картин. Чтобы убедиться, что изображения не блокируют загрузку страницы, команда решила обслуживать все свои ресурсы из CDN и использовать ImageMagick для оптимизации изображений. Они также GZES поставили все сжатые ресурсы, включая изображения, JavaScript и CSS, для дальнейшего сокращения времени нагрузки.
Чтобы избежать вспышки невидимого текста при сохранении времени загрузки как можно меньше, TrueBil настроила свои CSS для использования системных шрифтов в качестве запасного шрифта, пока внешние шрифты не будут загружены.
Дополнительные оптимизации
Когда приложение было готово, команда хотела еще больше сократить размер пакета поставщиков и время выполнения JavaScript, поэтому они переключили свое приложение React на Preact в производстве. (Узнайте больше в сборе React .) Этот подход помог им уменьшить размер пакета поставщиков с 82,3 КБ до 51,2 КБ.
Строить в надежности
С акцентом на индийский рынок, подавляющее большинство пользователей TrueBil получают доступ к своему продукту в неоднозначных сетях, которые иногда попадают в полосу пропускания всего 2 г. Таким образом, создание устойчивого опыта имело решающее значение не только для повышения производительности в условиях ограниченных сетевых условий, но и для предоставления продукта, на который могут положиться их пользователи - тот, который всегда работает.
Стратегия гибридного кэширования для надежной загрузки
Интерактивность и скорость изменений для контента TrueBil сильно различаются. Чтобы гарантировать, что весь его контент является одновременно свежим и надежным, команда TrueBil внедрила кэширование API с использованием комбинации сетевых первых, кэша-первых и самых быстрых первых стратегий.
Для статических страниц, таких как страница подписок, TrueBil использует стратегию-первого кэша, чтобы сначала перейти к своему кэше подписки, возвращаясь к сети.
Для страниц с динамическим контентом, которые редко меняются, например, их список продуктов или подробные страницы, TrueBil использует стратегию первой сети, так что браузер сначала проверяет сеть на наличие контента, прежде чем вернуться в кэш API, если сеть недоступна.
И для динамических страниц, которые часто меняются, такие как дом, фильтр, поиск и городские страницы, TrueBil использует самую быструю стратегию для выбора между сетью или кэшем на основе того, каким бы ни был на первом месте. Чтобы гарантировать, что контент является свежим, кэш обновляется всякий раз, когда отклик сети отличается от того, что находится в кэше.
Работники обслуживания для полного офлайнового опыта
Несмотря на то, что большая часть контента TrueBil очень динамична - Cars можно добавить или купить в любое время - команда хотела убедиться, что у их пользователей есть какой -то контент для участия, даже если они проходили нечистительные сети или были полностью офлайн.
Используя услуги , команда смогла кэшировать как статические данные, так и динамические данные, с которыми пользователь уже взаимодействовал, чтобы пользователь мог просмотреть их в автономном режиме. Чтобы пользователи знали, что контент может измениться, когда они возвращаются в Интернете, команда изменила пользовательский интерфейс на GreyScale, чтобы указать в автономном режиме. Просмотр страниц продукта является важной частью пути пользователя TrueBil. Пользователи, которые посетили PWA, по крайней мере, один раз могут просматривать списки и страницы продуктов, которые они посещали раньше, но не смогут увидеть какие -либо обновления в списке или продукт.
Улучшить взаимодействие, чтобы пользователи возвращались
Увлекательный первый опыт
Поскольку большинство их пользователей поступают по платным каналам, TrueBil необходимо дополнить свое приложение для быстрого загрузки веб -приложением с продуктом, который выделяет очень важные рекомендации для увеличения конверсий. В то время как команда использует систему рекомендаций, основанную на сложной фильтрации для существующих пользователей, их система не работает для пользователей, которые входят в систему в первый раз.
Чтобы не дать своим новым пользователям холодный старт, команда интегрировала систему рекомендаций, используя свои усилия по цифровому маркетингу. Они добавляют детали продукта, такие как модель автомобиля, цена и тип тела в URL -адрес назначения объявления через параметр UTM, который читается их системой рекомендаций и отражается в всплеске продуктов. В случае, если SYSME не читает такие детали в URL, он возвращается к популярным автомобилям, который представляет собой комбинацию популярных моделей, популярных бюджетов и автомобилей, которые были популярны в последние несколько недель или дни.
Установленное веб -приложение
Создав быстрое, полнофункциональное веб-приложение с убедительным пользовательским опытом, TrueBil хотел, чтобы их пользователи продолжали возвращаться. Они поняли, что создание приложения будет установленным повторным посещением гораздо более плавными.
Команда внедрила функцию «Добавить на домашний экран» , чтобы сделать их продукт полным прогрессивным веб -приложением (PWA). Этот подход позволил пользователям добавить TrueBil Lite на домашний экран и запустить его в полноэкранном режиме. И поскольку они уже внедрили автономный режим, команда смогла легко добавить новую функцию.
Чтобы гарантировать, что их пользователи не были спамили и увеличили вероятность того, что пользователи установит приложение, команда недавно обновила свою стратегию для продвижения установки PWA , чтобы появились подсказки по установке, когда они будут полезны для разных видов пользователей. TrueBil обосновалась на стратегии из трех частей:
- Показать подсказки, когда пользователь завершил действие или простаивает.
- Показать контекстные подсказки для зрелых пользователей.
- Покажите баннер, когда пользователь потратил на сайт определенное количество времени.
Баннеры по умолчанию по завершению процесса и на страницах с высоким трафиком
Команда решила показать баннер по установке, когда пользователь выполняет задачу или находится на страницах с высоким трафиком, но холостое время (то есть не предпринимает действия, например, прокрутка или заполнение формы). Этот подход позволил им избежать прерывания деятельности пользователя.
Контекстуальные подсказки для зрелых пользователей
Для пользователей, которые какое -то время взаимодействовали с приложением, команда использовала очень контекстные пользовательские сообщения, чтобы показать ценность установки приложения на домашний экран:
Пользовательский баннер для подсказок на основе времени
Наконец, команда построила неинтрузивную баннер с дизайном, подобным уведомлениям, который запускается на определенных событиях, таких как открытие страницы листинга или после того, как пользователь потратил определенное количество времени, затрачиваемого в приложении:
Из -за этих улучшений уровень конверсии и вовлечения TrueBil значительно вырос с 26% более длинными пользовательскими сеансами и на 61% больше конверсий , что является значимым для их бизнеса, учитывая высокую стоимость транзакции каждой конверсии.
Для стартапа с ограниченными ресурсами выбор правильной платформы может иметь решающее значение для успеха бизнеса. Переходя к PWA, сосредоточенному на скорости, устойчивости и вовлеченности, позволил нам увеличить наши расходы на прибыль на рынок на 80% благодаря увеличению конверсий и без трения в Интернете.
Ракеш Раман, соучредитель и руководитель науки о продуктах и данных в TrueBil
44 %
Улучшение времени загрузки
26 %
Более длинные пользовательские сеансы
61 %
Увеличение конверсий
80 %
Увеличение расходов на выручку до продажи