Jak serwis Truebil stworzył kanał rozwoju w internecie

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

Informacje

Założona w 2015 r. firma Truebil to indyjska platforma handlowa online, która sprzedaje w 100% certyfikowane samochody używane. Korzysta z niej ponad 1, 4 mln aktywnych użytkowników miesięcznie.Jest to kompleksowe rozwiązanie, które obejmuje przeniesienie własności, ubezpieczenie, pożyczki i gwarancje serwisowe. Potencjalni klienci mogą wyświetlać poszczególne strony produktów ze zdjęciami i szczegółowymi raportami z kontroli, a także uzyskiwać wyceny pojazdów dzięki funkcjom „Porównaj” i „Truescore” w witrynie. Truebil wyróżnia się bogatą ofertą funkcji, w tym spersonalizowanymi rekomendacjami opartymi na uczeniu maszynowym, funkcją dodawania do ulubionych, funkcją udostępniania samochodu i innymi.

Wyzwanie

Truebil to startup o niskiej częstotliwości transakcji i wysokiej wartości, dlatego wybór odpowiedniej platformy, w którą warto inwestować, był kluczowy.

Firma Truebil uznała urządzenia mobilne za platformę docelową i wybrała sieć jako pierwszą aplikację, Truebil Lite, ze względu na łatwość odkrywania i niskie tarcie. Technologia internetowa zapewnia niższe koszty rozwoju, mniejsze zużycie danych i pamięci oraz znacznie niższe koszty pozyskiwania klientów niż tworzenie aplikacji na Androida lub iOS. Dzięki stworzeniu progresywnej aplikacji internetowej (PWA) Truebil mógł korzystać ze wszystkich zalet internetu i korzyści, jakie daje iOS/Android.

Rozwiązanie

Wewnętrzny zespół przez 4 miesiące opracowywał Truebil Lite, korzystając z React, Django i Preact (do migracji produkcyjnej). Określili jasne zasady dotyczące aplikacji internetowej na podstawie celów użytkowników. Aplikacja musiała być:

• Szybkie pierwsze ładowanie i dalsza nawigacja,
• niezawodne, niezależne od ograniczeń sieci lub urządzenia użytkownika;
• angażująca, zwłaszcza na małych ekranach urządzeń mobilnych, aby użytkownicy chcieli do niej wracać;

Optymalizacja pod kątem szybkiego pierwszego ładowania i nawigacji

Korzystając z narzędzia Lighthouse jako przewodnika po optymalizacji wydajności, zespół wdrożył kulturę, w której wydajność jest najważniejsza, a jednocześnie wprowadzał nowe funkcje. Firma Truebil zdołała znacznie poprawić wrażenia użytkowników, nadając priorytet wskaźnikom pierwszego wyrenderowania treści i czasu do pełnej interaktywności oraz optymalizując szybkość pierwszego wczytywania, powtórnych wizyt i płynność nawigacji. Zespół osiągnął te wyniki, ustalając budżety na skuteczność i stosując różne techniki, aby je zrealizować.

Ustawianie budżetów skuteczności

Zespół Truebil, kierując się przede wszystkim wydajnością, zdecydował się na zaprojektowanie swojej platformy jako aplikacji jednostronicowej z renderowaniem po stronie serwera przy pierwszym wczytaniu i renderowaniem po stronie klienta przy kolejnych wczytaniach. Utrzymanie wydajności aplikacji internetowych z renderowaniem po stronie klienta może być trudne, dlatego Truebil ustalił bardzo rygorystyczne budżety wydajności, aby nie rezygnować z szybkości, zwłaszcza w miarę dodawania kolejnych funkcji.

Zespół ustalił ścisłe budżety oparte na kamieniach milowych dla TTI, aby utrzymać ten wskaźnik poniżej 5 sekund. Aby osiągnąć ten cel, ręcznie sprawdzali, czy rozmiar pakietu JavaScript nie przekracza 250 KB, stale monitorowali rozmiary obrazów i na bieżąco śledzili wynik aplikacji w Lighthouse.

Optymalizowanie pakietów JavaScript

Zespół zaczął od podstaw, korzystając z wzorca PRPL do wstępnego buforowania i optymalizacji pakietów JavaScript oraz przechodząc na HTTP/2, aby obsługiwać krytyczne pakiety JavaScript.

Aby opóźnić wczytywanie niekrytycznych zasobów, używali komponentów opóźnionego wczytywania na poziomie platformy do wczytywania fragmentów znajdujących się poniżej linii podziału.

Aby usunąć wąskie gardła w pakietach JavaScript, zespół zmniejszył rozmiar ładunków przez dzielenie kodu. Użyli dzielenia na części opartego na komponentach i trasach, aby zmniejszyć rozmiar głównego pakietu i skrócić czas wczytywania o 44%. Czas do pełnej interaktywności (TTI) spadł z 6 sekund do około 5 sekund, a pierwsze wyrenderowanie treści (FMP) – z 4,1 sekundy do 3,6 sekundy.

Wbudowany krytyczny CSS

Aby jeszcze bardziej poprawić FMP, zespół użył narzędzia Lighthouse do znajdowania możliwości optymalizacji wydajności i sprawdzania ich wpływu. Lighthouse wskazał, że największy wpływ będzie miało ograniczenie blokującego renderowanie kodu CSS, więc Truebil umieścił w kodzie strony cały krytyczny kod CSS i opóźnił ładowanie niekrytycznego kodu CSS. Ta technika skróciła czas FMP o około 2 sekundy.

Unikaj wielokrotnych, kosztownych podróży w obie strony do dowolnego miejsca początkowego.

Aby zmniejszyć obciążenie związane z DNS i TLS, Truebil używało <link rel="preconnect"> i <link rel="dns-prefetch">. Dzięki temu przeglądarka jak najszybciej przeprowadza uzgadnianie połączenia TLS podczas wczytywania strony i wcześniej rozwiązuje nazwy domen z innych źródeł, co zapewnia bezpieczne i szybkie działanie.

Dynamiczne wstępne pobieranie następnej strony

Analizując dane, 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ą funkcji <link rel=prefetch>, aby zapewnić użytkownikom płynną nawigację. Zespół ręcznie identyfikuje linki do wstępnego pobierania, ale do tworzenia pakietów JS dla tych linków używa webpacka.

Optymalizacja obrazów i czcionek

Zdjęcia są kluczowym elementem oferty i wiarygodności Truebil. Każda lista produktów zawiera do 40 zdjęć. Aby obrazy nie blokowały wczytywania strony, zespół zdecydował się udostępniać wszystkie zasoby z sieci CDN i używać imagemagick do optymalizacji obrazów. Skonwertowali też wszystkie zasoby, które można skompresować, w tym obrazy, skrypty JavaScript i pliki CSS, do formatu Gzip, aby jeszcze bardziej skrócić czas wczytywania.

Aby uniknąć nagłego pojawienia się niewidocznego tekstu i jednocześnie utrzymać jak najkrótszy czas ładowania, firma Truebil skonfigurowała kod CSS tak, aby używać czcionek systemowych jako zastępczych do czasu załadowania 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 środowisku produkcyjnym zastąpił Reacta Preactem. (Więcej informacji znajdziesz w kolekcji React). Dzięki temu udało im się zmniejszyć rozmiar pakietu dostawcy z 82,3 KB do 51,2 KB.

Zwiększanie niezawodności

Większość użytkowników Truebil w Indiach korzysta z usługi w sieciach o niestabilnym zasięgu, które czasami działają w paśmie o przepustowości 2G. Dlatego stworzenie odpornego rozwiązania było kluczowe nie tylko dla poprawy wydajności w warunkach ograniczonej przepustowości sieci, ale także dla dostarczenia produktu, na którym użytkownicy mogą polegać – który zawsze działa.

Hybrydowa strategia buforowania zapewniająca niezawodne wczytywanie

Interaktywność i szybkość zmian treści w przypadku Truebil są bardzo zróżnicowane. Aby mieć pewność, że wszystkie treści są aktualne i wiarygodne, zespół Truebil wdrożył buforowanie interfejsu API, stosując kombinację strategii „najpierw sieć”, „najpierw pamięć podręczna” i „najpierw najszybsze”.

W przypadku stron statycznych, takich jak strona subskrypcji, Truebil stosuje strategię „najpierw pamięć podręczna”, aby najpierw przejść do pamięci podręcznej interfejsu API subskrypcji, a następnie wrócić do sieci.

W przypadku stron z dynamiczną treścią, która rzadko się zmienia, np. stron z listą produktów lub stron ze szczegółami, Truebil stosuje strategię „sieć jako pierwsza”, dzięki czemu przeglądarka najpierw sprawdza sieć pod kątem treści, a dopiero potem korzysta z pamięci podręcznej interfejsu API, jeśli sieć jest niedostępna.

W przypadku stron dynamicznych, które często się zmieniają, takich jak strona główna, strony filtrów, wyszukiwania i miast, Truebil stosuje strategię „najszybsze pierwszeństwo”, aby wybrać między siecią a pamięcią podręczną na podstawie tego, co jest dostępne jako pierwsze. Aby mieć pewność, że treści są aktualne, pamięć podręczna jest aktualizowana, gdy odpowiedź sieci różni się od tego, co znajduje się w pamięci podręcznej.

Skrypty service worker zapewniające pełną obsługę offline

Mimo że duża część treści Truebil jest bardzo dynamiczna (samochody można dodawać lub kupować w dowolnym momencie), zespół chciał mieć pewność, że użytkownicy będą mieli dostęp do pewnych treści, nawet jeśli korzystają z niestabilnej sieci lub są całkowicie offline.

Dzięki skryptom service worker zespół mógł zapisywać w pamięci podręcznej zarówno dane statyczne, jak i dynamiczne, z którymi użytkownik już wszedł w interakcję, aby mógł je wyświetlać w trybie offline. Aby użytkownicy wiedzieli, że po powrocie do trybu online treści mogą się zmienić, zespół zmienił interfejs na odcienie szarości, aby wskazać tryb offline. Przeglądanie stron produktów jest kluczowym elementem ścieżki użytkownika Truebil. Użytkownicy, którzy odwiedzili PWA co najmniej raz, mogą przeglądać strony z ofertami i produktami, które odwiedzili wcześniej, ale nie będą widzieć żadnych aktualizacji oferty ani produktu.

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

Atrakcyjne pierwsze wrażenie

Większość użytkowników Truebil pochodzi z płatnych kanałów, dlatego firma potrzebowała rozwiązania, które uzupełniłoby szybko działającą aplikację internetową i zapewniłoby wysoce trafne rekomendacje, aby zwiększyć liczbę konwersji. Zespół korzysta z systemu rekomendacji opartego na zaawansowanym filtrowaniu w przypadku obecnych użytkowników, ale nie działa on w przypadku użytkowników, którzy logują się po raz pierwszy.

Aby uniknąć uruchomienia „na zimno” u nowych użytkowników, zespół zintegrował system rekomendacji z działaniami marketingu cyfrowego. Dodają oni szczegóły produktu, takie jak model samochodu, cena i typ nadwozia, do docelowego adresu URL reklamy za pomocą parametru monitora UTM, który jest odczytywany przez ich system rekomendacji i odzwierciedlany w wyświetlanych produktach. Jeśli system nie znajdzie takich szczegółów w adresie URL, powróci do popularnych samochodów, czyli połączenia popularnych modeli, popularnych budżetów i samochodów, które były popularne w ciągu ostatnich kilku tygodni lub dni.

Aplikacja internetowa, którą można zainstalować

Firma Truebil stworzyła szybką, w pełni funkcjonalną aplikację internetową o atrakcyjnym interfejsie i chciała mieć pewność, że użytkownicy będą do niej wracać. Zauważyli, że możliwość zainstalowania aplikacji znacznie ułatwi powracanie do niej.

Zespół wdrożył funkcję Dodaj do ekranu głównego, aby przekształcić produkt w 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. Zespół wdrożył już tryb offline, więc mógł łatwo dodać nową funkcję.

Aby uniknąć spamu i zwiększyć prawdopodobieństwo instalacji aplikacji, zespół niedawno zaktualizował strategię promowania instalacji PWA. Dzięki temu prośby o instalację pojawiają się wtedy, gdy są przydatne dla różnych typów użytkowników. Firma Truebil zdecydowała się na strategię składającą się z 3 części:

• Wyświetlaj prompty, gdy użytkownik wykona działanie lub jest nieaktywny.
• Wyświetlaj użytkownikom, którzy osiągnęli pełnoletność, kontekstowe prompty.
• Wyświetl 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 wykona zadanie lub znajduje się na stronach o dużym natężeniu ruchu, ale jest nieaktywny (tzn. nie wykonuje żadnych działań, np. nie przewija strony ani nie wypełnia formularza). Dzięki temu nie przerywali aktywności użytkownika.

Prompty kontekstowe dla pełnoletnich użytkowników

W przypadku użytkowników, którzy korzystali z aplikacji przez pewien czas, zespół używał wysoce kontekstowych wiadomości niestandardowych, aby pokazać wartość instalowania aplikacji na ekranie głównym:

Niestandardowy baner z prośbą o zgodę na przetwarzanie danych wyświetlaną po upływie określonego czasu

Zespół opracował też nieinwazyjny baner z powiadomieniem, który wyświetla się w określonych sytuacjach, np. po otwarciu strony z ofertą lub po upływie określonego czasu spędzonego przez użytkownika w aplikacji:

Dzięki tym ulepszeniom współczynniki konwersji i zaangażowania Truebil znacznie wzrosły: sesje użytkowników są o 26% dłuższe, a liczba konwersji wzrosła o 61% , co ma duże znaczenie dla tej firmy ze względu na wysoką wartość transakcji każdej konwersji.

W przypadku startupu z ograniczonymi zasobami wybór odpowiedniej platformy może mieć kluczowe znaczenie dla sukcesu firmy. Przejście na progresywną aplikację internetową, która koncentruje się na szybkości, odporności i zaangażowaniu, umożliwiło nam zwiększenie stosunku przychodów do wydatków na marketing o 80% dzięki wzrostowi liczby konwersji i łatwemu docieraniu do użytkowników w internecie.

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