Wie Truebil das Web zu seinem Wachstumskanal macht

Die Geschichte eines Start-ups, das eine erstklassige Weboberfläche entwickelt hat.

Info

Truebil wurde 2015 gegründet und ist ein indischer Onlinemarktplatz, auf dem ausschließlich zertifizierte Gebrauchtwagen verkauft werden. Mit über 1, 4 Millionen aktiven Nutzern pro Monat ist es eine Komplettlösung, die unter anderem die Übertragung von Fahrzeugpapieren, 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 unterscheidet sich von anderen Anbietern durch umfangreiche Funktionen wie personalisierte Empfehlungen auf Grundlage von maschinellem Lernen, eine Funktion zum Hinzufügen von Favoriten und eine Funktion zum Teilen von Autos.

Herausforderung

Truebil ist ein schlankes Startup mit Transaktionen, die selten, aber von hohem Wert sind. Daher war es entscheidend, die richtige Plattform auszuwählen, in die investiert werden sollte.

Truebil hat Mobilgeräte als Zielplattform identifiziert und sich für das Web als erste App, Truebil Lite, entschieden, da das Web eine einfache Auffindbarkeit und geringe Reibung bietet. Webtechnologie bietet niedrigere Entwicklungskosten, weniger Daten- und Arbeitsspeicherverbrauch und deutlich niedrigere Kosten für die Kundenakquisition als die Entwicklung einer Android-/iOS-App. Durch die Entwicklung einer progressiven Web-App (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 legten klare Leitprinzipien für die Web-App auf Grundlage der Nutzerziele fest. Die Nutzung musste:

• Schnell beim ersten Laden und bei nachfolgenden Navigationsvorgängen
• Zuverlässig, unabhängig von den Netzwerk- oder Gerätebeschränkungen des Nutzers, und
• Ansprechend, insbesondere für kleine mobile Displays, damit Nutzer gerne wieder darauf zurückkommen.

Für schnelles erstes Laden und schnelle Navigation optimieren

Das Team nutzte Lighthouse, um Leistungsoptimierungen vorzunehmen, und führte bei der Implementierung neuer Funktionen eine „Performance-First“-Kultur ein. Truebil konnte die Nutzerfreundlichkeit deutlich verbessern, indem das Unternehmen die Messwerte First Contentful Paint und Time to Interactive (TTI) priorisierte und für schnelle erste Ladevorgänge, wiederholte Besuche und eine reibungslose Navigation optimierte. Das Team hat diese Ergebnisse erzielt, indem es Leistungsbudgets festgelegt und verschiedene Techniken eingesetzt hat, um diese zu erreichen.

Leistungsbudgets festlegen

Das Truebil-Team hat sich für eine Single-Page-App mit serverseitigem Rendering für den ersten und clientseitigem Rendering für die nachfolgenden Ladevorgänge entschieden. Es kann schwierig sein, Web-Apps mit clientseitigem Rendering leistungsstark zu halten. Daher hat Truebil sehr strenge Leistungsbudgets festgelegt, um sicherzustellen, dass die Geschwindigkeit nicht beeinträchtigt wird, insbesondere wenn weitere Funktionen hinzugefügt werden.

Das Team legte strenge meilensteinbasierte Budgets für die TTI fest, um sie unter fünf Sekunden zu halten. Um dieses Ziel zu erreichen, sorgten sie manuell dafür, dass kein Build die JavaScript-Bundle-Größe von 250 KB überschritt, behielten die Bildgrößen im Blick und verfolgten kontinuierlich den Lighthouse-Leistungsscore der App.

JavaScript-Bundles optimieren

Das Team begann mit den Grundlagen, indem es das PRPL-Muster verwendete, um JavaScript-Nutzlasten vorab im Cache zu speichern und zu optimieren, und auf HTTP/2 umstellte, um wichtige JavaScript-Bundles bereitzustellen.

Um unkritische Ressourcen verzögert zu laden, nutzten sie die Komponenten für das verzögerte Laden auf Framework-Ebene, um Fragmente unter dem Falz zu laden.

Um Engpässe bei JavaScript-Bundles zu beseitigen, hat das Team die Nutzlasten durch Codeaufteilung reduziert. Sie nutzten die komponenten- und routenbasierte Aufteilung in Chunks, um die Größe des Haupt-Bundles zu reduzieren und die Ladezeit um 44 % zu verbessern. Die TTI sank von 6 auf etwa 5 Sekunden und First Meaningful Paint (FMP) von 4,1 auf 3,6 Sekunden.

:

Kritischen CSS-Code einbetten

Um die FMP weiter zu verbessern, nutzte das Team Lighthouse, um Möglichkeiten für Leistungsoptimierungen zu finden und deren Auswirkungen zu validieren. Lighthouse hat darauf hingewiesen, dass die Reduzierung von renderblockierendem CSS die größte Wirkung hätte. Daher hat Truebil das gesamte kritische CSS inline eingefügt und nicht kritisches CSS zurückgestellt. Durch diese Technik wurde der FMP um etwa 2 Sekunden verkürzt.

Mehrere kostspielige Hin- und Rückfahrten zu einem beliebigen Ursprungsort vermeiden

Um den Overhead durch 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 so schnell wie möglich beim Laden der Seite aus und löst domainübergreifende Domainnamen vorab auf. So wird eine sichere und schnelle Nutzererfahrung ermöglicht.

Nächste Seite dynamisch vorab abrufen

Durch die Analyse ihrer Daten ermittelte das Team die häufigsten Nutzerpfade, die sich optimieren ließen. In diesen Fällen lädt die App die nächste Seitenressource dynamisch mit <link rel=prefetch> herunter, um Nutzern eine reibungslose Navigation zu ermöglichen. Das Team identifiziert die vorab abzurufenden Links zwar manuell, verwendet aber webpack, um das JS für diese Links zu bündeln.

Bilder und Schriftarten optimieren

Bilder sind ein wichtiger Bestandteil der Produktpräsentation und Glaubwürdigkeit von Truebil. Jedes Produktangebot enthält bis zu 40 Bilder. Damit Bilder das Laden der Seite nicht blockieren, hat das Team beschlossen, alle Ressourcen über ein CDN bereitzustellen und imagemagick zur Bildoptimierung zu verwenden. Außerdem wurden alle komprimierbaren Ressourcen wie Bilder, JavaScript und CSS mit Gzip komprimiert, um die Ladezeit weiter zu verkürzen.

Um ein Aufblitzen von unsichtbarem Text zu vermeiden und gleichzeitig die Ladezeit so gering wie möglich zu halten, hat Truebil das CSS so eingerichtet, dass Systemschriftarten 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 stellten sie ihre React-App in der Produktion auf Preact um. Weitere Informationen So konnten sie die Größe des Anbieter-Bundles von 82,3 KB auf 51,2 KB reduzieren.

Zuverlässigkeit einbauen

Da der Fokus von Truebil auf dem indischen Markt liegt, greift die überwiegende Mehrheit der Nutzer über unzuverlässige Netzwerke auf das Produkt zu, die manchmal nur eine Bandbreite von 2G bieten. Eine robuste Nutzererfahrung war also nicht nur wichtig, um die Leistung unter eingeschränkten Netzwerkbedingungen zu verbessern, sondern auch, um ein Produkt zu liefern, auf das sich die Nutzer verlassen können – ein Produkt, das immer funktioniert.

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 „Network-first“, „Cache-first“ und „Fastest-first“ implementiert.

Für statische Seiten wie die Aboseite verwendet Truebil eine Cache-First-Strategie. Dabei wird zuerst der Cache der Abo-API aufgerufen und dann auf das Netzwerk zurückgegriffen.

Für Seiten mit dynamischen Inhalten, die sich selten ändern, z. B. Produktlisten oder Detailseiten, verwendet Truebil eine Network-First-Strategie. Der Browser prüft also zuerst das Netzwerk auf Inhalte, bevor er auf den API-Cache zurückgreift, wenn das Netzwerk nicht verfügbar ist.

Bei dynamischen Seiten, die sich häufig ändern, z. B. Start-, Filter-, Such- und Stadtseiten, verwendet Truebil eine „Fastest-First“-Strategie, um zwischen Netzwerk und Cache zu wählen. Damit die Inhalte aktuell sind, wird der Cache immer dann aktualisiert, wenn sich die Netzwerkantwort von den Inhalten im Cache unterscheidet.

Service Worker für eine vollständige Offline-Nutzung

Obwohl ein Großteil der Inhalte von Truebil sehr dynamisch ist – Autos können jederzeit hinzugefügt oder gekauft werden –, wollte das Team sicherstellen, dass die Nutzer einige Inhalte haben, mit denen sie interagieren können, auch wenn sie sich in einem Netzwerk mit schlechter Verbindung befinden oder vollständig offline sind.

Mithilfe von Service Workern konnte das Team sowohl statische als auch dynamische Daten, mit denen ein Nutzer bereits interagiert hat, im Cache speichern, damit der Nutzer 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 Aufrufen von Produktseiten ist ein wichtiger Teil des Truebil-Kaufprozesses. Nutzer, die die PWA mindestens einmal besucht haben, können sich Einträge und Produktseiten ansehen, die sie bereits besucht haben. Sie sehen jedoch keine Aktualisierungen des Eintrags oder des Produkts.

Interaktionen verbessern, um Nutzer zu binden

Ein ansprechender erster Eindruck

Da die meisten Nutzer über bezahlte Kanäle auf die Website gelangen, musste Truebil die schnell ladende Web-App durch ein Produkt ergänzen, das hochrelevante Empfehlungen liefert, um die Conversions zu steigern. Das Team verwendet zwar ein Empfehlungssystem, das auf ausgefeilter Filterung für bestehende Nutzer basiert, aber für Nutzer, die sich zum ersten Mal anmelden, funktioniert das System nicht.

Um zu vermeiden, dass neue Nutzer einen Kaltstart erleben, hat das Team ein Empfehlungssystem in seine digitalen Marketingmaßnahmen integriert. Sie fügen der Ziel-URL einer Anzeige über einen UTM-Parameter Produktdetails wie Automodell, Preis und Karosserietyp hinzu. Diese werden von ihrem Empfehlungssystem gelesen und in den angezeigten Produkten berücksichtigt. Wenn das System keine solchen Details in der URL findet, greift es auf beliebte Autos zurück. Das ist eine Kombination aus beliebten Modellen, beliebten Budgets und Autos, die in den letzten Wochen oder Tagen beliebt waren.

Eine installierbare Web-App

Truebil hatte eine schnelle, funktionsreiche Web-App mit einer überzeugenden Nutzererfahrung entwickelt und wollte dafür sorgen, dass die Nutzer immer wieder zurückkehren. Sie stellten fest, dass wiederholte Besuche viel nahtloser wären, wenn die App installiert werden könnte.

Das Team implementierte die Funktion Zum Startbildschirm hinzufügen, um ihr Produkt zu einer vollständigen progressiven Web-App (PWA) zu machen. So konnten Nutzer Truebil Lite dem Startbildschirm hinzufügen und im Vollbildmodus starten. Da sie bereits einen Offlinemodus implementiert hatten, 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 seine Strategie für die Bewerbung der PWA-Installation kürzlich aktualisiert. Installationsaufforderungen werden jetzt nur noch dann angezeigt, wenn sie für die verschiedenen Arten von Nutzern tatsächlich nützlich sind. Truebil entschied sich für eine dreiteilige Strategie:

• Aufforderungen einblenden, wenn der Nutzer eine Aktion abgeschlossen hat oder inaktiv ist.
• Kontextbezogene Aufforderungen für Nutzer mit Altersfreigabe anzeigen
• Ein Banner anzeigen, wenn der Nutzer eine bestimmte Zeit auf der Website verbracht hat.

Standardbanner nach Abschluss des Prozesses und auf Seiten mit hohem Traffic

Das Team entschied sich, ein Installationsbanner einzublenden, wenn ein Nutzer eine Aufgabe erledigt oder sich auf Seiten mit hohem Traffic befindet, aber inaktiv ist (d. h. keine Aktion ausführt, z. B. scrollen oder ein Formular ausfüllen). So konnten sie die Aktivität des Nutzers nicht unterbrechen.

Kontextbezogene Prompts für volljährige Nutzer

Nutzer, die schon länger mit der App interagiert hatten, erhielten hochgradig kontextbezogene benutzerdefinierte Nachrichten, in denen der Wert der Installation der App auf dem Startbildschirm erläutert wurde:

Benutzerdefiniertes Banner für zeitbasierte Aufforderungen

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

Dank dieser Verbesserungen sind die Conversion- und Interaktionsraten von Truebil deutlich gestiegen. Die Nutzer-Sitzungen dauern 26% länger und es gibt 61% mehr Conversions. Das ist für das Unternehmen angesichts des hohen Transaktionswerts jeder Conversion von großer Bedeutung.

Für ein Start-up mit begrenzten Ressourcen kann die Wahl der richtigen Plattform entscheidend für den Erfolg des Unternehmens sein. Durch die Umstellung auf eine PWA, die auf Geschwindigkeit, Stabilität und Engagement ausgerichtet ist, konnten wir das Verhältnis von Umsatz zu Marketingausgaben um 80% steigern. Das ist auf die erhöhte Anzahl von Conversions und die reibungslose Reichweite des Internets zurückzuführen.

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