Die Erfolgsgeschichte eines Start-ups zu erstklassigen Weberlebnissen
Info
Truebil wurde 2015 gegründet und ist ein indischer Onlinemarktplatz für 100% zertifizierte Gebrauchtwagen. Mit über 1, 4 Millionen monatlich aktiven Nutzern stellt die Lösung eine Komplettlösung dar, die die Übertragung von Fahrzeugbriefen, Versicherungen, Kredite und Garantien umfasst. Potenzielle Kunden können einzelne Produktseiten mit Bildern und detaillierten Inspektionsberichten aufrufen und mit den Funktionen „Vergleichen“ und „Truescore“ der Website Fahrzeugbewertungen abrufen. Truebil hebt sein Produkt durch vielfältige Funktionen ab, darunter personalisierte Empfehlungen auf der Grundlage von maschinellem Lernen, eine Funktion zum Hinzufügen zu den Favoriten, die Funktion zum Teilen eines Autos und vieles mehr.
Herausforderung
Truebil ist ein schlankes Start-up mit wenigen Transaktionen mit hohem Wert. Daher war es wichtig, die richtige Plattform auszuwählen und in die Sie investieren.
Truebil hat Mobilgeräte als Zielplattform identifiziert und das Web für seine erste App, Truebil Lite, entschieden, da es einfach zu finden ist und reibungslos funktioniert. Im Vergleich zur Entwicklung einer Android-/iOS-App bietet Webtechnologie geringere Entwicklungskosten, eine geringere Daten- und Speichernutzung sowie deutlich niedrigere Kosten für die Kundenakquisition. Und durch die Entwicklung einer progressiven Web-App (PWA) könnte Truebil alle Vorteile des Webs und von iOS/Android nutzen.
Lösung
Ein internes Team brauchte vier Monate, um Truebil Lite mit React, Django und Preact (für die Produktionsmigration) zu entwickeln. Es wurden klare Leitprinzipien für die Webanwendung festgelegt, die auf den Zielen der Nutzer basieren:
- Schnell beim ersten Laden und bei nachfolgenden Navigationen
- zuverlässig und unabhängig von den Netzwerk- oder Geräteeinschränkungen des Nutzers sind und
- Ansprechend, insbesondere für kleine Mobilgerätebildschirme, sodass Nutzer gern zu ihr zurückkehren werden.
Für schnelles erstes Laden und schnelles Aufrufen optimieren
Das Team nutzte Lighthouse als Leitfaden für die Leistungsoptimierung und implementierte bei der Implementierung neuer Funktionen eine Kultur, bei der die Leistung im Vordergrund steht. Truebil konnte die Nutzererfahrung erheblich verbessern, indem die Messwerte First Contentful Paint und Time to Interactive (TTI) priorisiert und eine Optimierung für schnelles erstes Laden, wiederholte Besuche und eine reibungslose Navigation vorgenommen wurde. Das Team erzielte diese Ergebnisse, indem es Leistungsbudgets festgelegt und eine Vielzahl von Techniken anwendete, um diese Ergebnisse zu erreichen.
Leistungsbudgets festlegen
Das Truebil-Team entschied sich, die Leistung als eine einseitige App mit serverseitigem Rendering für den ersten Ladevorgang und clientseitiges Rendering für nachfolgende Ladevorgänge zu optimieren. Es kann schwierig sein, Webanwendungen mit clientseitigem Rendering leistungsfähig zu halten. Daher legte Truebil sehr strenge Leistungsbudgets fest, um sicherzustellen, dass die Geschwindigkeit nicht beeinträchtigt wird, insbesondere wenn weitere Funktionen hinzugefügt werden.
Das Team legte strenge Meilensteinbudgets für TTI mit dem Ziel fest, diese unter fünf Sekunden zu halten. Um dieses Ziel zu erreichen, stellte das Team manuell sicher, dass kein Build eine JavaScript-Bundle-Größe von 250 KB überschreiten würde, überprüfte die Bildgrößen kontinuierlich und verfolgte kontinuierlich die Lighthouse-Leistungsbewertung der App.
JavaScript-Bundles optimieren
Zuerst verwendete das Team das PRPL-Muster, um JavaScript-Nutzlasten vorab im Cache zu speichern und zu optimieren, und wechselte zu HTTP/2, um wichtige JavaScript-Bundles bereitzustellen.
Zum Lazy Loading von nicht kritischen Ressourcen wurden die „Below the fold“-Fragmente mithilfe der Lazy Loading-Komponenten auf Framework-Ebene geladen.
Zur Beseitigung von Engpässen im JavaScript-Bundle hat das Team die Nutzlasten durch Codeaufteilung reduziert. Das Unternehmen verwendete komponenten- und routenbasiertes Aufteilen, um die Größe des Hauptsets 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.
Wichtiges CSS inline einbinden
Zur weiteren Verbesserung von FMP nutzte das Team Lighthouse, um Möglichkeiten für Leistungsoptimierungen zu ermitteln und deren Auswirkungen zu prüfen. Lighthouse gab an, dass eine Reduzierung von CSS, das das Rendering blockiert, den größten Effekt hätte. Daher fügte Truebil alle wichtigen und zurückgestellten nicht kritischen CSS ein. Mit diesem Verfahren konnte die FMP um etwa 2 Sekunden reduziert werden.
Mehrfache, kostspielige Hin- und Rückflug zu einem beliebigen Startort vermeiden
Um den durch DNS und TLS verursachten Aufwand zu minimieren, verwendete Truebil <link rel="preconnect"> und <link rel="dns-prefetch">. Auf diese Weise führt der Browser den TLS-Handshake beim Seitenaufbau so schnell wie möglich aus und löst ursprungsübergreifende Domainnamen vorab auf, was für eine sichere und schnelle Nutzererfahrung sorgt.
<link rel=preconnect>.Nächste Seite dynamisch vorab abrufen
Durch die Analyse der Daten identifizierte das Team die häufigsten User Journeys, für die es optimiert werden konnte. In diesen Fällen lädt die App die nächste Seitenressource dynamisch mithilfe von <link rel=prefetch> herunter, um für eine reibungslose Navigation zu sorgen. Das Team identifiziert die Links für den Vorabruf zwar manuell, verwendet jedoch Webpack, um das JavaScript für diese Links zu bündeln.
Bilder und Schriftarten optimieren
Bilder sind ein wesentlicher Aspekt der Nutzerfreundlichkeit und Glaubwürdigkeit von Truebil. Jeder Produkteintrag kann bis zu 40 Bilder enthalten. Um sicherzustellen, dass Bilder den Seitenaufbau nicht blockieren, entschied sich das Team, 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 blasses Unsichtbares zu vermeiden und gleichzeitig die Ladezeit so kurz wie möglich zu halten, hat Truebil den CSS-Code 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. Also stellte das Team die React-Anwendung in der Produktion auf Preact um. Weitere Informationen finden Sie in der Sammlung React. Auf diese Weise konnte das Unternehmen die Größe des Anbieter-Bundles von 82,3 KB auf 51,2 KB reduzieren.
Zuverlässigkeit erhöhen
Der Schwerpunkt liegt auf dem indischen Markt. Die große Mehrheit der Nutzerinnen und Nutzer von Truebil greift auf ihr Produkt zu, wenn es instabil ist und manchmal nur eine Bandbreite von nur 2 Gbit/s verfügbar ist. Daher war es nicht nur wichtig, eine stabile Umgebung zu schaffen, um die Leistung unter eingeschränkten Netzwerkbedingungen zu verbessern, sondern auch, um ein Produkt zu liefern, auf das sich die Nutzer verlassen können – eines, 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 sowohl aktuell als auch zuverlässig sind, implementierte das Truebil-Team API-Caching mit einer Kombination aus Network-First-, Cache-First- und Rapid-First-Strategien.
Bei statischen Seiten, z. B. der Aboseite, nutzt Truebil eine Cache-orientierte Strategie, um zuerst den Abo-API-Cache zu öffnen und auf das Netzwerk zurückzugreifen.
Für Seiten mit dynamischen Inhalten, die sich selten ändern, wie Produkteintrags- oder Detailseiten, verwendet Truebil eine netzwerkorientierte Strategie. Der Browser prüft dann zuerst das Netzwerk auf Inhalte, bevor er in den API-Cache zurückgreift, wenn das Netzwerk nicht verfügbar ist.
Und für dynamische Seiten, die sich häufig ändern, wie die Startseiten-, Filter-, Such- und Stadtseiten, verwendet TrueView die schnellste Methode, um zwischen Netzwerk oder Cache zu wählen, je nachdem, was zuerst eintritt. Damit der Inhalt immer aktuell ist, wird der Cache immer dann aktualisiert, wenn die Netzwerkantwort vom Inhalt des Cache abweicht.
Service Worker für eine optimale Offline-Nutzung
Auch wenn ein großer Teil der Inhalte von Truebil sehr dynamisch ist und Autos jederzeit hinzugefügt oder gekauft werden können, wollte das Team dafür sorgen, dass Nutzer einige Inhalte zur Verfügung haben, auch wenn sie sich durch lückenhafte Netzwerke bewegen oder vollständig offline waren.
Mithilfe von Service Workern konnte das Team sowohl statische als auch dynamische Daten im Cache speichern, mit denen ein Nutzer bereits interagiert hat, sodass er sie offline ansehen 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 Bestandteil des Kaufprozesses von Truebil. Nutzer, die die PWA mindestens einmal besucht haben, können sich Einträge und Produktseiten ansehen, die sie zuvor besucht haben, sehen aber keine Aktualisierungen des Eintrags oder des Produkts.
Interaktionen optimieren, damit Nutzer*innen immer wieder zurückkommen
Ein ansprechendes erstes Erlebnis
Da die meisten Nutzer aus bezahlten Kanälen stammen, musste Truebil seine schnell ladende Web-App mit einem Produkt ergänzen, das hochrelevante Empfehlungen abgibt, um die Conversions zu steigern. Das Team verwendet zwar ein Empfehlungssystem, das auf ausgefeilten Filtern für bestehende Nutzer basiert, funktioniert jedoch nicht bei Nutzern, die sich zum ersten Mal anmelden.
Das Team integrierte ein Empfehlungssystem auf Basis der digitalen Marketingaktivitäten, um neuen Nutzern keine Kaltstarts zu geben. Mithilfe eines UTM-Parameters werden Produktdetails wie Automodell, Preis und Karosserietyp in die Ziel-URL einer Anzeige eingefügt. Diese Informationen werden vom Empfehlungssystem gelesen und in den angezeigten Produkten berücksichtigt. Falls das System keine solchen Details in der URL liest, greift es auf beliebte Autos zurück. Diese sind eine Kombination aus beliebten Modellen, beliebten Budgets und Autos, die in den letzten Wochen oder Tagen beliebt waren.
Eine installierbare Webanwendung
Mit einer schnellen, voll funktionsfähigen Webanwendung mit einer überzeugenden User Experience wollte Truebil sicherstellen, dass die Nutzenden immer wieder zurückkommen. Das Unternehmen erkannte, dass wiederholte Besuche deutlich einfacher werden, wenn die App installierbar wäre.
Das Team implementierte die Funktion Zum Startbildschirm hinzufügen, um aus dem Produkt eine progressive Web-App (PWA) zu machen. So konnten Nutzer Truebil Lite zum Startbildschirm hinzufügen und im Vollbildmodus starten. Da das Team bereits einen Offline-Modus implementiert hatte, konnte es die neue Funktion problemlos hinzufügen.
Um sicherzustellen, dass die Nutzer keine Spam erhalten, und um die Wahrscheinlichkeit zu erhöhen, dass Nutzer die App installieren, hat das Team vor Kurzem seine Strategie zur Werbung für die Installation von PWAs aktualisiert. Jetzt werden Aufforderungen zur Installation angezeigt, wenn sie für verschiedene Nutzertypen tatsächlich nützlich sind. TrueView hat sich auf eine dreiteilige Strategie entschieden:
- Aufforderungen anzeigen, wenn der Nutzer eine Aktion ausgeführt hat oder inaktiv ist.
- Nicht jugendfreien Nutzern kontextbezogene Aufforderungen anzeigen.
- Ein Banner einblenden, wenn der Nutzer eine bestimmte Zeit auf der Website verbracht hat
Standardbanner am Ende des Prozesses und auf Seiten mit hohen Zugriffszahlen
Das Team beschloss, ein Installationsbanner anzuzeigen, wenn Nutzende eine Aufgabe erledigen oder sich auf Seiten mit hohen Zugriffszahlen befinden, aber nicht aktiv sind (d. h. keine Aktion ausführen, wie z. B. scrollen oder ein Formular ausfüllen). Auf diese Weise konnten sie vermeiden, die Aktivitäten der Nutzenden zu unterbrechen.
Kontextbezogene Prompts für erwachsene Nutzer
Für Nutzer, die schon länger mit der App interagiert hatten, verwendete das Team stark kontextbezogene benutzerdefinierte Nachrichten, um den Nutzen der App-Installation auf dem Startbildschirm aufzuzeigen:
Benutzerdefiniertes Banner für zeitbasierte Aufforderungen
Schließlich hat das Team ein unaufdringliches Banner mit einem benachrichtigungsähnlichen Design eingebaut, das bei bestimmten Ereignissen wie dem Öffnen einer Eintragsseite oder nachdem der Nutzer eine bestimmte Zeit in der App verbracht hat, ausgelöst wird:
Aufgrund dieser Verbesserungen sind die Conversion- und Engagement-Raten von Truebil deutlich gestiegen: 26% längere Nutzersitzungen und 61% mehr Conversions. Das ist angesichts des hohen Transaktionswerts jeder Conversion für das Unternehmen von Bedeutung.
Für ein Start-up mit begrenzten Ressourcen kann die Auswahl der richtigen Plattform entscheidend für den Erfolg des Unternehmens sein. Durch den Wechsel zu einer PWA, bei der es um Geschwindigkeit, Stabilität und Interaktion geht, konnten wir unsere Ausgaben für Marketingumsätze um 80% steigern – dank mehr Conversions und einer reibungslosen Reichweite im Web.
Rakesh Raman, Mitgründer und Chief of Product & Data Science bei Truebil
44%
Verbesserung der Ladezeit
26%
Längere Nutzersitzungen
61%
mehr Conversions
80%
Umsatzsteigerung in Marketingausgaben