Jak serwis Truebil stworzył kanał rozwoju w internecie

Historia startupu, który stworzył najlepszą w swojej klasie stronę internetową.

Harleen Batra
Harleen Batra

Informacje

Truebil to indyjska platforma handlowa online, która powstała w 2015 r. i sprzedaje w 100% sprawdzone używane samochody. Z usługi korzysta co miesiąc ponad 1,4 miliona aktywnych użytkowników.Jest to kompleksowe rozwiązanie obejmujące przeniesienie własności, ubezpieczenie, pożyczki i gwarancje na usługi. Potencjalni klienci mogą wyświetlać strony poszczególnych produktów z obrazami i szczegółowymi raportami z przeglądu oraz korzystać z funkcji „Porównaj” i „Truescore”, aby ocenić pojazd. Truebil wyróżnia się bogatymi funkcjami, takimi jak spersonalizowane rekomendacje oparte na uczeniu maszynowym, funkcja dodawania do ulubionych, funkcja udostępniania samochodu i inne.

Wyzwanie

Truebil to szczupły startup, który obsługuje transakcje o wysokiej wartości i małej częstotliwości, dlatego bardzo ważne było wybranie odpowiedniej platformy, która będzie miała najwyższy priorytet i w którą warto zainwestować.

Firma Truebil wybrała urządzenia mobilne jako platformę docelową, a na potrzeby swojej pierwszej aplikacji, Truebil Lite, wybrała internet ze względu na łatwość znalezienia aplikacji w internecie i małą liczbę przeszkód. Technologia internetowa zapewnia niższe koszty rozwoju, mniejsze wykorzystanie danych i pamięci oraz znacznie niższe koszty pozyskiwania klientów niż w przypadku tworzenia aplikacji na Androida lub iOS. Dzięki stworzeniu progresywnej aplikacji internetowej (PWA) firma Truebil mogła korzystać ze wszystkich zalet internetu oraz z zalet aplikacji na iOS i Androida.

Rozwiązanie

Nasz zespół potrzebował 4 miesięcy na opracowanie Truebil Lite przy użyciu React, Django i Preact (do migracji w produkcji). Określili oni jasne zasady działania aplikacji internetowej na podstawie celów użytkowników. Aplikacja musiała być:

  • szybko wczytuje się po raz pierwszy i podczas kolejnych nawigacji;
  • niezawodny, niezależny od ograniczeń sieci lub urządzenia użytkownika,
  • Zachęcający, zwłaszcza na małych ekranach urządzeń mobilnych, aby użytkownicy chcieli do niego wracać.

Optymalizacja pod kątem szybkiego wczytywania i nawigacji

Korzystając z narzędzia Lighthouse do optymalizacji wydajności, zespół przyjął kulturę stawiającą na pierwszym miejscu wydajność podczas wdrażania nowych funkcji. Firma Truebil mogła znacznie poprawić wrażenia użytkowników, nadając priorytet wskaźnikom pierwszego wyrenderowania elementu znaczącegoczasu do interakcji (TTI) oraz optymalizując szybkość pierwszego wczytania, powtarzające się wizyty i płynną nawigację. Zespół osiągnął te wyniki, ustawiając budżety skuteczności i stosując różne techniki ich osiągania.

Ustawianie budżetów skuteczności

Z myślą o wydajności zespół Truebil zdecydował się na stworzenie aplikacji jednostronicowej z renderowaniem po stronie serwera podczas pierwszego wczytania i po stronie klienta podczas kolejnych wczytań. Utrzymanie wydajności aplikacji internetowych z renderowaniem po stronie klienta może być trudne, dlatego Truebil ustanowił bardzo rygorystyczne budżety wydajności, aby zapewnić, że nie będzie ona spowalniać, zwłaszcza w miarę dodawania kolejnych funkcji.

Zespół ustanowił ścisłe budżety TTI oparte na kamieniach milowych, aby czas ten nie przekraczał 5 sekund. Aby osiągnąć ten cel, zespół ręcznie zadbał o to, aby żaden z kompilacji nie przekraczał rozmiaru pakietu JavaScriptu 250 KB. Stale sprawdzał też rozmiary obrazów i śledził wynik wydajności Lighthouse aplikacji.

Optymalizowanie pakietów JavaScript

Zespół zaczął od podstaw, używając schematu PRPL do wstępnego buforowania i optymalizowania danych JavaScript oraz przechodząc na HTTP/2, aby dostarczać najważniejsze pakiety JavaScript.

Aby wczytywać niekrytyczne zasoby z opóźnieniem, zespół wykorzystał komponenty opóźnionego wczytywania na poziomie frameworku do wczytywania fragmentów poniżej pola widzenia.

Aby usunąć wąskie gardła w pakietach JavaScript, zespół zmniejszał wagę ładunku za pomocą dzielenia kodu. Użyli podziału na części na podstawie komponentów i tras, aby zmniejszyć rozmiar głównego pakietu i skrócić czas wczytywania o 44%. Czas do pełnej interaktywności spadł z 6 sekund do około 5 sekund, a czas pierwszego wyrenderowania treści (FCP) z 4,1 sekund do 3,6 sekund.

Zrzuty ekranu z Narzędzi deweloperskich w Chrome pokazujące rozmiar kompilacji Truebil Lite przed i po podziale kodu
Wpływ zmniejszenia rozmiaru fragmentu.

Krytyczny kod CSS w tekście

Aby jeszcze bardziej ulepszyć FMP, zespół użył Lighthouse do znalezienia możliwości optymalizacji wydajności i weryfikacji ich wpływu. Lighthouse wskazał, że największy efekt przyniesie zmniejszenie ilości kodu CSS blokującego renderowanie, więc Truebil wstawił w głównym kodzie źródłowym wszystkie krytyczne elementy kodu CSS i opóźnił ładowanie niekrytycznego kodu CSS. Ta technika zmniejszyła FMP o około 2 sekundy.

Zrzuty ekranu przedstawiające Narzędzia deweloperskie w Chrome, pokazujące czas do wyświetlenia pierwszego znaczącego obrazu w przypadku aplikacji Truebil Lite przed i po wstawieniu kodu CSS.
Wpływ wstawiania kluczowych plików CSS.

Unikaj wielokrotnych, kosztownych podróży powrotnych do dowolnego miejsca pochodzenia

Aby ograniczyć obciążenie związane z DNS i TLS, Truebil użył <link rel="preconnect"><link rel="dns-prefetch">. Dzięki temu przeglądarka może jak najszybciej zakończyć uzgadnianie połączenia TLS po wczytaniu strony i wstępnie rozwiązać nazwy domen w różnych domenach, co zapewnia użytkownikom bezpieczne i szybkie działanie.

Zrzuty ekranu przedstawiające Narzędzia deweloperskie w Chrome i wynik działania atrybutu rel=preconnect
Wpływ dodania <link rel=preconnect>.

dynamicznie pobierać w poprzednim pobraniu następną stronę,

Dzięki analizie danych zespół zidentyfikował najczęstsze ścieżki użytkowników, które można zoptymalizować. W takich przypadkach aplikacja dynamicznie pobiera zasób następnej strony za pomocą <link rel=prefetch>, aby zapewnić użytkownikom płynną nawigację. Podczas ręcznego identyfikowania linków do wstępnego pobierania zespół używa webpacka do grupowania plików JS dla tych linków.

Zrzuty ekranu przedstawiające aplikację Truebil Lit i Narzędzie dewelopera w Chrome, które pokazują, że żądania sieci nie są potrzebne podczas zwykłej nawigacji, ponieważ zasoby zostały już pobrane z zapasem.
Wpływ wstępnego pobierania zasobów na częste ścieżki użytkownika.

Optymalizacja obrazów i czcionek

Zdjęcia są kluczowym elementem wizerunku i wiarygodności produktów na Truebill. Każda karta produktu zawiera do 40 zdjęć. Aby mieć pewność, że obrazy nie będą blokować wczytywania strony, zespół zdecydował się przesyłać wszystkie zasoby z CDN i używać narzędzia imagemagick do optymalizacji obrazów. Aby jeszcze bardziej skrócić czas wczytywania, skompresowano też wszystkie zasoby, które można skompresować, m.in. obrazy, JavaScript i CSS.

Aby uniknąć wyświetlania niewidocznego tekstu przy jednoczesnym zachowaniu jak najkrótszego czasu wczytywania, firma Truebil skonfigurowała kod CSS tak, aby używać czcionek systemowych jako czcionek zastępczych do czasu wczytania czcionek zewnętrznych.

Dalsze optymalizacje

Gdy aplikacja była gotowa, zespół chciał jeszcze bardziej zmniejszyć rozmiar pakietu dostawcy i czas wykonywania kodu JavaScript, więc w produkcji zastąpił aplikację React aplikacją Preact. (więcej informacji znajdziesz w kolekcji React). Dzięki temu udało się zmniejszyć rozmiar pakietu dostawcy z 82,3 KB do 51,2 KB.

Zapewnienie niezawodności

Na rynku indyjskim większość użytkowników Truebil korzysta z produktu w sieciach o niestabilnym zasięgu, które czasami mają przepustowość na poziomie zaledwie 2G. Dlatego stworzenie odpornego rozwiązania było kluczowe nie tylko ze względu na poprawę wydajności w ograniczonych warunkach sieciowych, ale też na dostarczenie produktu, na którego użytkownicy mogą polegać, który zawsze działa.

Hybrydowa strategia buforowania na potrzeby niezawodnego wczytywania

Interaktywność i szybkość zmian treści w Truebil różnią się znacznie. Aby wszystkie treści były aktualne i wiarygodne, zespół Truebil wdrożył buforowanie interfejsu API, korzystając z kombinacji strategii priorytetu sieci, priorytetu pamięci podręcznej i priorytetu szybkości.

W przypadku stron statycznych, takich jak strona subskrypcji, Truebil stosuje strategię „najpierw pamięć podręczna”, aby najpierw korzystać z pamięci podręcznej interfejsu API subskrypcji, a potem z sieci.

W przypadku stron z dynamicznymi treściami, które rzadko się zmieniają, np. stron z informacjami o produkcie lub stronami szczegółów, Truebil stosuje strategię sprawdzania sieci w pierwszej kolejności. Oznacza to, że przeglądarka najpierw sprawdza sieć pod kątem treści, a dopiero potem, jeśli sieć jest niedostępna, korzysta z pamięci podręcznej interfejsu API.

W przypadku dynamicznych stron, które często się zmieniają, np. strony głównej, filtrów, wyszukiwania i stron miasta, Truebil stosuje strategię „najszybsza pierwsza”, aby wybrać sieć lub pamięć podręczną na podstawie tego, co jest dostępne jako pierwsze. Aby zapewnić aktualność treści, pamięć podręczna jest aktualizowana za każdym razem, gdy odpowiedź sieci różni się od tego, co jest w niej zapisane.

Skrypty service worker zapewniające pełne działanie w trybie offline

Chociaż większość treści w Truebil jest bardzo dynamiczna (samochody można dodawać i kupować w dowolnym momencie), zespół chciał zapewnić użytkownikom jakiś materiały, które będą mogli oglądać, nawet jeśli korzystają z niestabilnych sieci lub są całkowicie offline.

Dzięki użyciu skryptów service worker zespół mógł zapisać w pamięci podręcznej zarówno dane statyczne, jak i dane dynamiczne, z którymi użytkownik już wcześniej miał styczność, aby użytkownik mógł je wyświetlać w trybie offline. Aby poinformować użytkowników, że treści mogą się zmienić, gdy wrócą do trybu online, zespół zmienił interfejs na skalę szarości, aby wskazać tryb offline. Przeglądanie stron produktów jest kluczowym elementem ścieżki użytkownika w Truebil. Użytkownicy, którzy co najmniej raz odwiedzili PWA, mogą przeglądać strony aplikacji i produktów, które odwiedzili wcześniej, ale nie będą mogli zobaczyć żadnych aktualizacji strony aplikacji ani produktu.

Zrzut ekranu z aplikacją Truebil Lite w trybie offline
Truebil Lite w trybie offline.

Zwiększ zaangażowanie, aby zachęcić użytkowników do powrotu

Zaangażowanie od pierwszego kontaktu

Ponieważ większość użytkowników pochodzi z płatnych kanałów, firma Truebil musiała uzupełnić szybko wczytującą się aplikację internetową o produkt, który wyświetla trafne rekomendacje, aby zwiększyć liczbę konwersji. Chociaż zespół używa systemu rekomendacji opartego na zaawansowanym filtrowaniu dla obecnych użytkowników, nie działa on w przypadku osób, które logują się po raz pierwszy.

Aby uniknąć problemów z pierwszym uruchomieniem aplikacji przez nowych użytkowników, zespół zintegrował system rekomendacji z działaniami marketingu internetowego. Dodają one szczegóły produktów, takie jak model samochodu, cena i typ nadwozia, do docelowego adresu URL reklamy za pomocą parametru UTM, który jest odczytywany przez system rekomendacji i odzwierciedlany w wyświetlanych produktach. Jeśli system nie znajdzie takich informacji w adresie URL, użyje popularnych samochodów, czyli kombinacji popularnych modeli, popularnych budżetów i samochodów, które były popularne w ostatnich tygodniach lub dniach.

Instalowana aplikacja internetowa

Po stworzeniu szybkiej, pełnej funkcji aplikacji internetowej, która zapewniała użytkownikom atrakcyjne wrażenia, firma Truebil chciała zadbać o to, aby użytkownicy chętnie do niej wracali. Zdałemy sobie sprawę, że umożliwienie instalacji aplikacji znacznie ułatwia powtarzające się wizyty.

Zespół wdrożył funkcję Dodaj do ekranu głównego, aby uczynić produkt pełną progresywną aplikacją internetową (PWA). Dzięki temu użytkownicy mogli dodać Truebil Lite do ekranu głównego i uruchomić go w trybie pełnoekranowym. Ponieważ tryb offline był już wdrożony, zespół mógł łatwo dodać nową funkcję.

Aby zapewnić użytkownikom ochronę przed spamem i zwiększyć prawdopodobieństwo zainstalowania aplikacji, zespół niedawno zaktualizował strategię promowania instalacji PWA, tak aby prośby o instalację pojawiały się wtedy, gdy będą przydatne dla różnych typów użytkowników. Truebil wybrał strategię składającą się z 3 elementów:

  • wyświetlać prompty, gdy użytkownik wykonał działanie lub jest nieaktywny;
  • Wyświetlaj kontekstowe prompty dorosłym użytkownikom.
  • wyświetlać baner, gdy użytkownik spędzi w witrynie określony czas;

Domyślne banery po zakończeniu procesu i na stronach o dużym natężeniu ruchu

Zespół zdecydował się wyświetlać baner instalacyjny, gdy użytkownik wykonuje zadanie lub znajduje się na stronie o dużej liczbie wizyt, ale nie wykonuje żadnej czynności, np. nie przewija strony ani nie wypełnia formularza. Dzięki temu nie musieli przerywać czynności użytkownika.

Zrzuty ekranu przedstawiające baner instalacyjny Truebil Lite.

Kontekstowe prompty dla dorosłych użytkowników

W przypadku użytkowników, którzy od jakiegoś czasu korzystali z aplikacji, zespół używał bardzo spersonalizowanych wiadomości kontekstowych, aby pokazać im zalety zainstalowania aplikacji na ekranie głównym:

Zrzuty ekranu z kontekstowymi prośbami o instalację w Truebil Lite dla dorosłych użytkowników

niestandardowy baner dla promptów wyświetlanych w określonym czasie;

Na koniec zespół umieścił nieinwazyjny baner o wyglądzie powiadomienia, który jest uruchamiany w przypadku określonych zdarzeń, takich jak otwarcie strony z informacjami o produkcie lub po upływie określonego czasu spędzonego przez użytkownika w aplikacji:

Zrzut ekranu przedstawiający baner z prośbą o instalację w Truebil Lite, który wyświetla się w określonym czasie.

Dzięki tym ulepszeniom współczynniki konwersji i zaangażowania w Truebil znacznie wzrosły. Sesje użytkowników są dłuższe o 26% , a konwersje częstsze o 61% , co jest istotne dla firmy, biorąc pod uwagę wysoką wartość transakcji każdej konwersji.

W przypadku startupów o ograniczonych zasobach wybór odpowiedniej platformy może mieć kluczowe znaczenie dla sukcesu firmy. Przejście na PWA skoncentrowaną na szybkości, odporności i zaangażowaniu umożliwiło nam zwiększenie przychodów z marketingu o 80% dzięki większej liczbie konwersji i bezproblemowemu zasięgowi w internecie.

Rakesh Raman, współzałożyciel i dyrektor ds. produktów i nauki o danych w Truebil

44%

skrócenie czasu wczytywania,

26%

dłuższe sesje użytkowników,

61%

wzrost liczby konwersji,

80%

wzrost przychodów na wydatki na marketing