Wie Truebil das Web zu seinem Wachstumskanal macht

Die Geschichte eines Start-ups, das eine erstklassige Web-Umgebung entwickelt hat.

Harleen Batra
Harleen Batra

Info

Truebil wurde 2015 gegründet und ist ein indischer Onlinemarktplatz, auf dem zu 100% zertifizierte Gebrauchtwagen verkauft werden. Mit über 1, 4 Millionen aktiven Nutzern pro Monat ist es eine Komplettlösung, die unter anderem die Eigentumsübertragung, Versicherungen, Kredite und Servicegarantien umfasst. Potenzielle Kunden können sich einzelne Produktseiten mit Bildern und detaillierten Prüfberichten ansehen und mit den Funktionen „Vergleichen“ und „Truescore“ Fahrzeugbewertungen abrufen. Truebil hebt sein Produkt durch umfangreiche Funktionen ab, darunter personalisierte Empfehlungen auf Grundlage von maschinellem Lernen, eine Funktion zum Hinzufügen zu den Favoriten und eine Funktion zum Teilen eines Autos.

Herausforderung

Truebil ist ein schlankes Start-up mit seltenen, aber hochpreisigen Transaktionen. Daher war es wichtig, die richtige Plattform auszuwählen, die priorisiert und in die investiert werden sollte.

Truebil hat die mobilen Geräte als Zielplattform identifiziert und sich für das Web für seine erste App, Truebil Lite, entschieden, da das Web leicht zu finden und nutzerfreundlich ist. Webtechnologien bieten niedrigere Entwicklungskosten, weniger Daten- und Arbeitsspeichernutzung sowie deutlich niedrigere Kosten für die Kundenakquisition als die Entwicklung einer Android-/iOS-App. Durch die Entwicklung einer progressiven Webanwendung (PWA) konnte Truebil alle Vorteile des Webs und die Vorteile von iOS/Android nutzen.

Lösung

Ein internes Team benötigte vier Monate, um Truebil Lite mit React, Django und Preact (für die Produktionsmigration) zu entwickeln. Sie haben klare Leitprinzipien für die Webanwendung festgelegt, die auf den Zielen der Nutzer basieren. Die Nutzung musste:

  • schnell beim ersten Laden und bei nachfolgenden Navigationen,
  • Zuverlässig, unabhängig von den Netzwerk- oder Geräteeinschränkungen des Nutzers, und
  • Interaktiv, insbesondere auf kleinen Bildschirmen, damit Nutzer wieder darauf zurückgreifen möchten.

Für schnelles Laden und schnelle Navigation optimieren

Mithilfe von Lighthouse als Leitfaden für Leistungsoptimierungen hat das Team bei der Implementierung neuer Funktionen die Leistung in den Mittelpunkt gestellt. Truebil konnte die Nutzerfreundlichkeit erheblich verbessern, indem die Messwerte First Contentful Paint und Time to Interactive (TTI) priorisiert und für schnelles Laden beim ersten Aufruf, wiederholte Besuche und reibungslose Navigation optimiert wurden. Das Team hat diese Ergebnisse erzielt, indem es Leistungsbudgets festgelegt und eine Vielzahl von Techniken eingesetzt hat.

Leistungsbudgets festlegen

Das Truebil-Team hat sich aufgrund seiner leistungsorientierten Herangehensweise für eine Single-Page-App mit serverseitigem Rendering beim ersten Laden und clientseitigem Rendering bei nachfolgenden Ladevorgängen entschieden. Es kann schwierig sein, die Leistung von Webanwendungen mit clientseitigem Rendering aufrechtzuerhalten. Deshalb hat Truebil sehr strenge Leistungsbudgets festgelegt, um die Geschwindigkeit zu gewährleisten, insbesondere wenn weitere Funktionen hinzugefügt werden.

Das Team hat strenge Meilenstein-basierte Budgets für die TTI festgelegt, mit dem Ziel, sie unter fünf Sekunden zu halten. Um dieses Ziel zu erreichen, sorgten sie manuell dafür, dass kein Build eine JavaScript-Bundle-Größe von 250 KB überschreitet, prüften ständig die Bildgrößen und verfolgten kontinuierlich den Lighthouse-Leistungsbewertung der App.

JavaScript-Bundles optimieren

Das Team begann mit den Grundlagen und nutzte das PRPL-Muster, um JavaScript-Nutzlast im Voraus zu speichern und zu optimieren, und wechselte zu HTTP/2, um kritische JavaScript-Bundles bereitzustellen.

Um nicht kritische Ressourcen mit Lazy Loading zu laden, verwendete das Team die Lazy-Loading-Komponenten auf Framework-Ebene, um Fragmente unterhalb des sichtbaren Bereichs zu laden.

Um Engpässe bei JavaScript-Bundles zu beseitigen, reduzierte das Team die Nutzlast durch Codesplitting. Mithilfe von komponenten- und routenbasiertem Chunking konnte das Unternehmen die Größe des Hauptbundles reduzieren und die Ladezeit um 44 % verbessern. Der TTI sank von 6 Sekunden auf etwa 5 Sekunden und der First Meaningful Paint (FMP) von 4,1 Sekunden auf 3,6 Sekunden.

Screenshots der Chrome-Entwicklertools, die die Größe der Build-Datei von Truebil Lite vor und nach dem Code-Splitting zeigen
Auswirkungen der Verringerung der Blockgröße

Kritisches CSS (Inline)

Um FMP weiter zu verbessern, nutzte das Team Lighthouse, um Möglichkeiten für Leistungsoptimierungen zu finden und die Auswirkungen zu validieren. Lighthouse hat gezeigt, dass die größte Wirkung durch die Reduzierung von renderblockierendem CSS erzielt wird. Deshalb hat Truebil alle kritischen CSS-Elemente inline eingefügt und nicht kritische CSS-Elemente zurückgestellt. Durch diese Methode konnte die FMP um etwa 2 Sekunden reduziert werden.

Screenshots der Chrome-Entwicklertools, die die Zeit bis zur ersten aussagekräftigen Darstellung von Truebil Lite vor und nach dem Einfügen von CSS zeigen
Auswirkungen des Einfügens von kritischem CSS

Vermeiden Sie mehrere teure Rundfahrten zu einem beliebigen Startpunkt.

Um den Overhead von DNS und TLS zu reduzieren, verwendete Truebil <link rel="preconnect"> und <link rel="dns-prefetch">. Bei diesem Ansatz führt der Browser den TLS-Handshake beim Laden der Seite so schnell wie möglich durch und löst plattformübergreifende Domainnamen vorab auf, was für eine sichere und schnelle Nutzererfahrung sorgt.

Screenshots der Chrome-Entwicklertools, die die Auswirkungen von rel=preconnect zeigen
Auswirkungen der Hinzufügung von <link rel=preconnect>

Nächste Seite dynamisch im Voraus abrufen

Durch die Analyse der Daten identifizierte das Team die häufigsten User Journeys, die optimiert werden konnten. In diesen Fällen lädt die App die Ressource der nächsten Seite dynamisch mithilfe von <link rel=prefetch> herunter, um eine reibungslose Navigation für Nutzer zu ermöglichen. Das Team identifiziert die Links, die vorab geladen werden sollen, manuell und verwendet webpack, um das JS für diese Links zu bündeln.

Screenshots der Truebil Lit App und der Chrome DevTools, die zeigen, dass bei häufigen Navigationen keine Netzwerkanfragen erforderlich sind, da die Assets bereits vorab abgerufen wurden.
Die Auswirkungen des Vorabladens von Assets für häufige Nutzerpfade.

Bilder und Schriftarten optimieren

Bilder sind ein wichtiger Bestandteil der Produkterfahrung und Glaubwürdigkeit von Truebil. Jeder Produkteintrag enthält bis zu 40 Bilder. Damit Bilder das Laden der Seite nicht blockieren, entschied sich das Team, alle Ressourcen über ein CDN bereitzustellen und imagemagick für die Bildoptimierung zu verwenden. Außerdem wurden alle komprimierbaren Ressourcen, einschließlich Bildern, JavaScript und CSS, mit Gzip komprimiert, um die Ladezeit weiter zu verkürzen.

Um das Aufblitzen unsichtbaren Texts zu vermeiden und gleichzeitig die Ladezeit so kurz wie möglich zu halten, hat Truebil sein CSS so eingerichtet, dass Systemschriften als Fallback verwendet werden, bis externe Schriftarten geladen sind.

Weitere Optimierungen

Als die App fertig war, wollte das Team die Größe des Anbieter-Bundles und die JavaScript-Ausführungszeit weiter reduzieren. Daher stellte es seine React-App in der Produktion auf Preact um. Weitere Informationen finden Sie in der Sammlung React. So konnte das Anbieter-Bundle von 82,3 KB auf 51,2 KB reduziert werden.

Zuverlässigkeit einbauen

Da Truebil auf den indischen Markt ausgerichtet ist, greifen die meisten Nutzer über dürftige Netzwerke auf das Produkt zu, die manchmal nur eine Bandbreite von 2G haben. Daher war es nicht nur wichtig, die Leistung unter eingeschränkten Netzwerkbedingungen zu verbessern, sondern auch ein Produkt zu entwickeln, auf das sich die Nutzer verlassen können – ein Produkt, das immer funktioniert.

Eine hybride Caching-Strategie für zuverlässiges Laden

Die Interaktivität und die Änderungsrate der Inhalte von Truebil variieren stark. Damit alle Inhalte aktuell und zuverlässig sind, hat das Truebil-Team API-Caching mit einer Kombination aus Netzwerk-, Cache- und Schnellste-Ergebnis-Strategie implementiert.

Für statische Seiten wie die Seite „Abos“ verwendet Truebil eine Cache-first-Strategie, bei der zuerst der Abo-API-Cache abgerufen und bei Bedarf auf das Netzwerk zurückgegriffen wird.

Für Seiten mit dynamischen Inhalten, die sich selten ändern, z. B. Produktlisten oder Detailseiten, verwendet Truebil eine Netzwerk-first-Strategie. Dabei sucht der Browser zuerst im Netzwerk nach Inhalten, bevor er bei Nichtverfügbarkeit des Netzwerks auf den API-Cache zurückgreift.

Bei dynamischen Seiten, die sich häufig ändern, z. B. der Startseite, den Filter-, Such- und Städteseiten, verwendet Truebil die Strategie „schnellste zuerst“, um zwischen Netzwerk oder Cache zu wählen, je nachdem, was zuerst verfügbar ist. Damit die Inhalte immer aktuell sind, wird der Cache aktualisiert, wenn sich die Netzwerkantwort von den im Cache gespeicherten Daten unterscheidet.

Service Worker für eine vollständige Offlinenutzung

Auch wenn ein Großteil der Inhalte von Truebil sehr dynamisch ist – Autos können jederzeit hinzugefügt oder gekauft werden –, wollte das Team dafür sorgen, dass die Nutzer einige Inhalte haben, mit denen sie interagieren können, auch wenn sie sich in einer Gegend mit schlechtem Empfang befinden oder komplett offline sind.

Mithilfe von Dienst-Workern konnte das Team sowohl statische Daten als auch die dynamischen Daten im Cache speichern, mit denen ein Nutzer bereits interagiert hat, damit er sie offline aufrufen kann. Damit Nutzer wissen, dass sich Inhalte ändern können, wenn sie wieder online sind, hat das Team die Benutzeroberfläche in Graustufen geändert, um den Offlinemodus anzuzeigen. Das Durchsuchen von Produktseiten ist ein wichtiger Teil der User Journey von Truebil. Nutzer, die die PWA mindestens einmal besucht haben, können Produkteinträge und Produktseiten aufrufen, die sie bereits zuvor besucht haben. Sie sehen jedoch keine Aktualisierungen des Eintrags oder des Produkts.

Screenshot der Truebil Lite App im Offlinemodus
Truebil Lite im Offlinemodus.

Interaktionen verbessern, damit Nutzer wiederkommen

Ein ansprechender erster Eindruck

Da die meisten Nutzer über kostenpflichtige Kanäle kamen, musste Truebil seine schnell ladende Webanwendung um ein Produkt ergänzen, das relevante Empfehlungen präsentiert, um Conversions zu steigern. Das Team verwendet zwar ein Empfehlungssystem, das auf ausgefeilten Filtern für bestehende Nutzer basiert, aber das System funktioniert nicht für Nutzer, die sich zum ersten Mal anmelden.

Um den Einstieg für Erstnutzer zu erleichtern, hat das Team ein Empfehlungssystem mithilfe seiner digitalen Marketingaktivitäten integriert. Dazu fügt er Produktdetails wie Fahrzeugmodell, Preis und Karosserietyp über einen UTM-Parameter in die Ziel-URL einer Anzeige ein. Dieser Parameter wird von seinem Empfehlungssystem gelesen und in den angezeigten Produkten berücksichtigt. Wenn das System keine solchen Details in der URL findet, wird auf beliebte Autos zurückgegriffen. Das sind eine Kombination aus beliebten Modellen, beliebten Budgets und Autos, die in den letzten Wochen oder Tagen beliebt waren.

Eine installierbare Webanwendung

Truebil hatte eine schnelle, voll funktionsfähige Web-App mit einer überzeugenden Nutzererfahrung entwickelt und wollte dafür sorgen, dass die Nutzer auch künftig wiederkommen. Sie erkannte, dass die Installation der App wiederholte Besuche viel einfacher machen würde.

Das Team implementierte die Funktion Zum Startbildschirm hinzufügen, um sein Produkt zu einer vollständigen progressiven Web-App (PWA) zu machen. So konnten Nutzer Truebil Lite auf dem Startbildschirm hinzufügen und im Vollbildmodus starten. Da bereits ein Offlinemodus implementiert war, konnte das Team die neue Funktion ganz einfach hinzufügen.

Um zu verhindern, dass Nutzer mit Spam belästigt werden, und die Wahrscheinlichkeit zu erhöhen, dass Nutzer die App installieren, hat das Team vor Kurzem seine Strategie für die Installation von PWAs beworben, sodass Installationsaufforderungen angezeigt werden, wenn sie für verschiedene Nutzer tatsächlich nützlich sind. Truebil entschied sich für eine dreiteilige Strategie:

  • Prompts werden angezeigt, wenn der Nutzer eine Aktion ausgeführt hat oder inaktiv ist.
  • Kontextbezogene Aufforderungen für ältere Nutzer anzeigen
  • Ein Banner wird angezeigt, wenn der Nutzer eine bestimmte Zeit auf der Website verbracht hat.

Standardbanner nach Abschluss des Vorgangs und auf Seiten mit hohem Traffic

Das Team entschied sich, ein Installationsbanner anzuzeigen, wenn ein Nutzer eine Aufgabe erledigt hat oder sich auf Seiten mit hohem Traffic befindet, aber inaktiv ist, d. h. keine Aktion ausführt, z. B. scrollt oder ein Formular ausfüllt. So konnte die Aktivität der Nutzer nicht unterbrochen werden.

Screenshots des Installationsbanners von Truebil Lite

Kontextbezogene Prompts für reife Nutzer

Für Nutzer, die schon länger mit der App interagiert hatten, verwendete das Team benutzerdefinierte, stark kontextbezogene Mitteilungen, um den Vorteil der Installation der App auf dem Startbildschirm zu verdeutlichen:

Screenshots der kontextbezogenen Installationsaufforderungen von Truebil Lite für ältere Nutzer

Ein benutzerdefiniertes Banner für zeitbasierte Aufforderungen

Schließlich fügte das Team ein unaufdringliches Banner mit einem benachrichtigungsähnlichen Design ein, das bei bestimmten Ereignissen ausgelöst wird, z. B. beim Öffnen einer Listenseite oder nachdem der Nutzer eine bestimmte Zeit in der App verbracht hat:

Screenshot des zeitbasierten Installationsaufforderungsbanners von Truebil Lite

Durch diese Verbesserungen haben sich die Conversion- und Interaktionsraten von Truebil deutlich erhöht. Die Nutzersitzungen waren 26% länger und es wurden 61% mehr Conversions erzielt. Aufgrund des hohen Transaktionswerts jeder Conversion ist dies für das Unternehmen von großer Bedeutung.

Für ein Start-up mit begrenzten Ressourcen kann die Auswahl der richtigen Plattform entscheidend für den Erfolg des Unternehmens sein. Durch die Umstellung auf eine PWA, die auf Geschwindigkeit, Zuverlässigkeit und Interaktion ausgerichtet ist, konnten wir dank mehr Conversions und der reibungslosen Reichweite des Webs unseren Umsatz im Verhältnis zu den Marketingausgaben um 80% steigern.

Rakesh Raman, Mitbegründer und Chief of Product & Data Science bei Truebil

44 %

Verkürzte Ladezeit

26 %

Längere Nutzersitzungen

61 %

mehr Conversions

80 %

Steigerung des Umsatzes im Verhältnis zu den Marketingausgaben