Historia start-upu dotycząca tworzenia najlepszych w swojej klasie rozwiązań internetowych.
Informacje
Założona w 2015 roku indyjska platforma handlowa Truebil umożliwia sprzedaż w 100% certyfikowanych używanych samochodów. Dzięki ponad 1, 4 mln aktywnych użytkowników miesięcznie jest to kompleksowe rozwiązanie, które obejmuje przeniesienie tytułu własności, ubezpieczenie, pożyczki i gwarancje na usługi. Potencjalni klienci mogą zobaczyć strony poszczególnych produktów ze zdjęciami i szczegółowymi raportami z przeglądu, a także uzyskać ocenę pojazdu za pomocą dostępnych w witrynie funkcji „Porównaj” i „Truescore”. Truebil oferuje wiele przydatnych funkcji, w tym spersonalizowane rekomendacje oparte na systemach uczących się, funkcje dodawania do ulubionych czy udostępnianie samochodu.
Wyzwanie
Truebil to startup, który prowadzi o niskiej częstotliwości i wysokiej wartości transakcji, dlatego kluczowe było wybranie odpowiedniej platformy, na której można potraktować priorytetowo i w którą inwestować.
Firma Truebil ustaliła, że jej docelową platformą jest telefon komórkowy. W związku z łatwością jej znalezienia i prostymi utrudnieniami wybrał internet, swoją pierwszą aplikację, Truebil Lite. Technologia internetowa pozwala na niższe koszty programowania, mniejsze zużycie danych i pamięci oraz znacznie niższe koszty pozyskiwania klientów niż tworzenie aplikacji na Androida lub iOS. A dzięki stworzeniu progresywnej aplikacji internetowej (PWA) firma Truebil może korzystać ze wszystkich zalet internetu oraz z zalet iOS/Androida.
Rozwiązanie
Zespół wewnętrzny zajął 4 miesiące, aby opracować usługę Truebil Lite z wykorzystaniem React, Django i Preact (na potrzeby migracji w środowisku produkcyjnym). Ustaliliśmy jasne zasady tworzenia aplikacji internetowej w odniesieniu do celów użytkownika. Procesor powinien:
- szybkie przy pierwszym wczytaniu i kolejnych nawigacji;
- niezawodne, niezależnie od ograniczeń sieci i urządzenia użytkownika;
- atrakcyjna, zwłaszcza w przypadku małych ekranów urządzeń mobilnych, aby zachęcić użytkowników do powrotu do niej.
Optymalizuj pod kątem szybkiego pierwszego wczytywania i nawigacji
Wykorzystując Lighthouse do optymalizacji skuteczności, zespół wdrożył kulturę, w której liczy się przede wszystkim wydajność, jednocześnie wdrażając nowe funkcje. Usługa Truebil znacznie poprawiła wygodę użytkowników, skupiając się na danych First Contentful Paint i Time to Interactive (TTI), i optymalizując ją pod kątem szybkiego pierwszego wczytywania, ponownych wizyt i płynnej nawigacji. Zespół osiągnął te wyniki, wyznaczając budżety wydajności i stosując różne techniki, aby je osiągnąć.
Ustaw budżety wydajności
Z myślą o wydajności zespół Truebil zdecydował się zaprojektować architekturę swojej aplikacji jako jednostronicowej z renderowaniem po stronie serwera na potrzeby pierwszego wczytywania i renderowaniem po stronie klienta w przypadku kolejnych wczytywania. Utrzymanie wydajności aplikacji internetowych z renderowaniem po stronie klienta może być trudne, dlatego Truebil ustala bardzo rygorystyczne budżety wydajności, aby mieć pewność, że nie będą miały negatywnego wpływu na szybkość, zwłaszcza gdy dodają więcej funkcji.
Zespół ustalił rygorystyczne budżety dla technologii TTI, których celem było utrzymanie go poniżej 5 sekund. Aby osiągnąć ten cel, zespół ds. ręcznego dbania o to, by żadna kompilacja nie przekraczała rozmiaru pakietu JavaScript o wielkości 250 KB, regularnie sprawdzała rozmiary obrazów i nieustannie śledziła wyniki wydajności aplikacji w Lighthouse.
Optymalizuj pakiety JavaScript
Zespół zaczął od podstaw, używając wzorca PRPL do wstępnego buforowania i optymalizowania ładunków JavaScript, a także od przejścia na protokół HTTP/2 w celu obsługi kluczowych pakietów JavaScript.
Do leniwego ładowania zasobów, które nie są kluczowe, do wczytywania fragmentów w części strony widocznej po przewinięciu wykorzystano komponenty leniwego ładowania na poziomie platformy.
Aby usunąć ewentualne wąskie gardła pakietów JavaScript, zespół zmniejszył ładunki, dzieląc kod. Wykorzystano fragmentację na podstawie komponentów i trasy, aby zmniejszyć rozmiar pakietu głównego i skrócić czas wczytywania o 44%, przy czym wartość TTI zmniejszyła się z 6 sekund do około 5 sekund, a Pierwsze wyrenderowanie znaczące (FMP) z 4,1 s do 3,1 s.
Wbudowany krytyczny kod CSS
Aby jeszcze bardziej ulepszyć FMP, zespół skorzystał z Lighthouse do znalezienia możliwości i weryfikacji wpływu optymalizacji skuteczności. Narzędzie Lighthouse pokazało, że największe efekty przyniesie ograniczenie CSS blokującego renderowanie, więc Truebil wbudowane są wszystkie krytyczne CSS i odroczone niekrytyczne CSS. Ta technika zmniejszyła liczbę FMP o około 2 sekundy.
Unikaj wielokrotnych, kosztownych podróży w obie strony do dowolnego miejsca wylotu
Aby zmniejszyć koszty związane z usługami DNS i TLS, Truebil wykorzystano <link rel="preconnect"> i <link rel="dns-prefetch">. To podejście sprawia, że przeglądarka jak najszybciej uzgadnia połączenie TLS podczas wczytywania strony i wstępnie rozpoznaje nazwy domen z innych domen, co zapewnia użytkownikom bezpieczeństwo i szybkie działanie.
<link rel=preconnect>.Dynamiczne pobieranie następnej strony z wyprzedzeniem
Dzięki analizie danych zespół ustalił najczęstsze ścieżki użytkowników, pod kątem których można zoptymalizować kampanię. W takich przypadkach aplikacja dynamicznie pobiera zasób następnej strony, korzystając z elementu <link rel=prefetch>, aby zapewnić użytkownikom płynną nawigację. Zespół ręcznie identyfikuje linki do pobrania z wyprzedzeniem, ale zespół używa pakietu webpack, aby utworzyć pakiet JS dla tych linków.
Optymalizuj obrazy i czcionki
Obrazy odgrywają kluczową rolę w przydatności i wiarygodności produktu, a każde informacje o produkcie mogą zawierać do 40 zdjęć. Aby upewnić się, że obrazy nie blokują wczytywania strony, zespół zdecydował się wyświetlać wszystkie zasoby z sieci CDN i optymalizować obrazy za pomocą narzędzia imagemagick. Skompresowane zostały również wszystkie zasoby kompresujące, w tym obrazy, JavaScript i CSS, w celu skrócenia czasu wczytywania.
Aby uniknąć błysku niewidocznego tekstu, a jednocześnie utrzymać jak najkrótszy czas wczytywania, Truebil skonfiguruje CSS tak, aby używał czcionek systemowych jako kreacji zastępczych do momentu załadowania czcionek zewnętrznych.
Dalsza optymalizacja
Gdy aplikacja była już gotowa, zespół postanowił zmniejszyć rozmiar pakietu dostawcy i skrócić czas wykonywania kodu JavaScript, więc zmienił wersję aplikacji React na Preact. (Więcej informacji znajdziesz w kolekcji Reakcje). To podejście pomogło zmniejszyć rozmiar pakietu dostawcy z 82,3 KB do 51,2 KB.
Większa niezawodność
Z koncentracji na rynku indyjskim zdecydowana większość użytkowników korzysta z usługi, korzystając z nieregularnych sieci, które czasami mają ograniczoną przepustowość 2G. Dlatego zapewnienie odporności miało kluczowe znaczenie nie tylko w przypadku poprawy wydajności w warunkach ograniczonych sieci, lecz także do dostarczania użytkownikom usługi, na której użytkownicy mogli polegać – czyli takiego, który zawsze działa.
Strategia hybrydowego buforowania zapewniająca niezawodne wczytywanie
Interaktywność i szybkość zmian treści Truebil są bardzo różne. Aby cała treść była zarówno aktualna, jak i niezawodna, zespół Truebil zaimplementował buforowanie interfejsu API, wykorzystując połączenie strategii opartych na sieci, pamięci podręcznej i najszybszych priorytetach.
W przypadku stron statycznych, na przykład strony subskrypcji, Truebil wykorzystuje strategię opartą na pamięci podręcznej, aby najpierw przejść do pamięci podręcznej interfejsu API subskrypcji, a potem wrócić do sieci.
W przypadku stron z zawartością dynamiczną, która rzadko się zmienia, np. strony z informacjami o produktach lub strony z informacjami, Truebil korzysta ze strategii opartej na sieci. Dzięki temu w przypadku niedostępności sieci przeglądarka najpierw sprawdza zawartość sieci, a następnie wróci do pamięci podręcznej interfejsu API.
W przypadku stron dynamicznych, które często się zmieniają, takich jak strona główna, filtr, wyszukiwanie i strony miast, Truebil wykorzystuje strategię najszybciej działającą, aby wybrać sieć lub pamięć podręczną w zależności od tego, co nastąpi wcześniej. Aby treści były aktualne, pamięć podręczna jest aktualizowana za każdym razem, gdy odpowiedź sieci różni się od stanu w pamięci podręcznej.
Skrypty service worker zapewniające pełne wykorzystanie w trybie offline
Duża część treści Truebil jest bardzo dynamiczna – samochody można dodawać i kupować w dowolnym momencie. Zespół chciał mieć pewność, że użytkownicy mają jakieś treści, z którymi mogą wchodzić w interakcje, nawet jeśli przeglądają oni różne sieci lub byli całkowicie offline.
Dzięki skryptom service worker zespół mógł zapisać w pamięci podręcznej zarówno dane statyczne, jak i dynamiczne, z którymi użytkownik już wchodził w interakcje, dzięki czemu użytkownik może je przeglądać offline. Aby mieć pewność, że użytkownicy wiedzą, że treści mogą się zmienić po powrocie do trybu online, zespół zmienił tryb szarości, aby wskazać tryb offline. Przeglądanie stron produktów to kluczowy element ścieżki użytkownika Truebil. Użytkownicy, którzy co najmniej raz odwiedzili progresywną aplikację internetową, mogą przeglądać informacje o produktach i strony produktów, ale nie zobaczą żadnych aktualizacji tych informacji o produkcie.
Zwiększaj zaangażowanie, aby użytkownicy wracali do Twojej witryny
Pierwszy film, który przyciąga uwagę
Większość użytkowników pochodzi z kanałów płatnych, dlatego firma Truebil musi uzupełnić swoją szybko ładującą się aplikację internetową o produkt, który wyświetla bardzo trafne rekomendacje w celu zwiększenia liczby konwersji. Zespół korzysta z systemu rekomendacji opartego na zaawansowanym filtrowaniu istniejących użytkowników, ale nie działa w przypadku użytkowników logujących się po raz pierwszy.
Aby uniknąć uruchomienia „na zimno” użytkownikom po raz pierwszy, zespół wdrożył system rekomendacji za pomocą marketingu internetowego. Dodaje szczegóły produktu, 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 uwzględniany w wyświetlanych produktach. Jeśli system nie odczyta takich informacji w adresie URL, system użyje popularnych samochodów, czyli kombinacji popularnych modeli, popularnych budżetów i samochodów, które były popularne w ciągu ostatnich kilku tygodni lub dni.
Aplikacja internetowa z możliwością zainstalowania
Firma Truebil stworzyła szybką, w pełni funkcjonalną aplikację internetową i atrakcyjną dla użytkowników, więc chciała mieć pewność, że użytkownicy będą chętnie do niej wracać. Uświadomiła sobie, że zwiększenie możliwości zainstalowania aplikacji znacznie ułatwiłoby jej ponowne odwiedziny.
Zespół wdrożył funkcję Dodaj do ekranu głównego, aby przekształcić aplikację w pełną progresywną aplikację internetową (PWA). To podejście pozwoliło użytkownikom dodać usługę Truebil Lite do ekranu głównego i uruchomić ją w trybie pełnoekranowym. A ponieważ zespół wdrożył już tryb offline, zespół mógł łatwo dodać tę nową funkcję.
Aby zapobiec spamowaniu użytkownikom i zwiększyć prawdopodobieństwo zainstalowania przez nich aplikacji, zespół zmodyfikował ostatnio swoją strategię promowania instalacji PWA. Dzięki temu prośby o instalację pojawiają się wtedy, gdy są przydatne dla różnych użytkowników. Kampania TrueView została rozwiązana na podstawie 3-częściowej strategii:
- Pokazuj prośby, gdy użytkownik zakończy działanie lub jest nieaktywny.
- Pokazuj prompty kontekstowe pełnoletnim użytkownikom.
- Wyświetlaj baner, gdy użytkownik spędza określony czas w witrynie.
domyślne banery po zakończeniu procesu i na stronach z dużą liczbą wizyt,
Zespół zdecydował się wyświetlać baner instalacji, gdy użytkownik wykonuje zadanie lub znajduje się na często odwiedzanych stronach, ale jest nieaktywny (czyli nie wykonuje żadnej czynności, np. nie przewinie strony lub wypełnia formularz). Takie podejście pozwoliło uniknąć przerywania aktywności użytkownika.
prompty kontekstowe dla dorosłych użytkowników;
W przypadku użytkowników, którzy przez jakiś czas korzystali z aplikacji, zespół użył niestandardowych komunikatów o wysoce kontekstowym kontekście, aby pokazać, dlaczego warto zainstalować aplikację na ekranie głównym:
Własny baner z promptami ograniczonymi czasowo
Na koniec zespół opracował nieuciążliwy baner z projektem przypominającym powiadomienia, który uruchamia się w określonych zdarzeniach, takich jak otwarcie strony z informacjami o aplikacji lub spędzony czas w aplikacji przez użytkownika:
Dzięki tym ulepszeniom współczynniki konwersji i zaangażowania Truebil wzrosły znacznie przy dłuższych sesjach użytkownika o 26% i 61% większej liczbie konwersji, co jest istotne dla firmy, biorąc pod uwagę wysoką wartość transakcji każdej z konwersji.
W przypadku startupu z ograniczonymi zasobami wybór odpowiedniej platformy może mieć kluczowe znaczenie dla powodzenia firmy. Przejście na aplikację PWA skoncentrowaną na szybkości, odporności i zaangażowaniu pozwoliło nam zwiększyć przychody z marketingu o 80% dzięki większej liczbie konwersji i bezproblemowemu zasięgowi internetu.
Rakesh Raman, współzałożyciel i dyrektor ds. badań nad produktami i danymi w firmie Truebil
44%
Skrócenie czasu wczytywania
26%
Dłuższe sesje użytkownika
61%
wzrost liczby konwersji
80%
wzrost wydatków na marketing