Ele.me ist das größte Unternehmen für Essensbestellung und -lieferung auf dem chinesischen Festland. Es bedient 260 Millionen registrierte Nutzer aus über 200 Städten in ganz China und hat über 1, 3 Millionen Restaurants. 99% der Nutzer bestellen Essen über ihr Mobilgerät. Ele.me wollte daher das mobile Web verbessern, um es bei instabilen Verbindungen schneller und zuverlässiger zu machen. Gleichzeitig nutzte das zentrale technische Modell einer mehrseitigen App, um den betrieblichen Anforderungen gerecht zu werden.
- Die Ladezeit wurde auf allen vorab im Cache gespeicherten Seiten um 11,6% verkürzt.
- Die Ladezeit sank auf allen Seiten durchschnittlich um 6,35 %.
- Die Zeit bis zur konsistenten Interaktivität in einem 3G-Netzwerk sank beim ersten Laden auf 4,93 Sekunden
Nach der Veröffentlichung der ele.me-PWA sind unsere Ladezeiten deutlich gesunken. Dadurch ist unser mobiles Web zu einer der schnellsten Websites für Essensreservierungen in China.
Spencer Yang, Product Manager von Ele.me PWA
Zwischen mehrseitiger App und einseitiger App wählen
In einer mehrseitigen Anwendung (MPA) löst jede Route, zu der ein Nutzer navigiert, eine vollständige Anfrage der Seite zusammen mit den zugehörigen Skripts und erforderlichen Stilen an den Server aus. Dies steht im Gegensatz zu einem Single-Page-App-Modell (SPA), bei dem jede Routennavigation einen Abruf nur für die Inhalte und Daten auslöst, die für diese Route relevant sind. Die Benutzeroberfläche wird dann durch JavaScript-Code erstellt, der in der Client-App ausgeführt wird.
Das explosive Wachstum von Ele.me in den letzten Jahren hat zur Entwicklung unterschiedlicher Geschäftseinheiten innerhalb des Unternehmens geführt, die jeweils für die Ausführung des Mikrodiensts unter der Hauptdomain https://ele.me verantwortlich sind. Das Ele.me-Team kam zu dem Schluss, dass die Entkopplung dieser einzelnen Dienste am besten durch ein Modell für mehrseitige Anwendungen (Multi-Page Application, MPA) bereitgestellt wird, bei dem jedes Team einen eigenen Dienst ausführt und verwaltet.
PRPL auf eine MPA anwenden
Das PRPL-Muster (kritische Ressourcen vorab laden, Render erste Route, verbleibende Routen Pre-Cache, verbleibende Routen für Lazy-Loading) bietet Webentwicklern eine Reihe von Schienen, um die Struktur einer PWA zu steuern. Der Schwerpunkt liegt dabei auf einer schnellen Interaktionsdauer und der Maximierung des Cachings, um Netzwerkumläufe zu reduzieren. PRPL wurde zwar gut auf SPAs getestet, es war jedoch weniger klar, wie es auf eine MPA angewendet werden sollte. Ele.me entschied sich, die PRPL-Mentalität anzunehmen, um ihre MPA als PWA neu zu erstellen. Dazu sorgen sie dafür, dass beim Aufrufen einer Seite wichtige Ressourcen für diese Seite vorab geladen werden. Dazu wird bei Bedarf <link rel="preload"> eingefügt oder die Skripts werden auf einer ausreichend flachen Ebene angezeigt, damit der Preloader des Browsers ohne zusätzliche Hinweise funktioniert. Außerdem wird die PWA nach und nach optimiert, indem ein Service Worker installiert wird, der vom Browser unterstützt wird. Er wird dann verwendet, um andere Navigationsrouten auf oberster Ebene abzurufen und vorab im Cache zu speichern. So erhält der Nutzer ein schnelleres Laden und Rendering, wenn er sich durch die PWA klickt. Jede Seite in einer MPA ist eine eigene Route. Das Beschleunigen des Renderings der ursprünglichen Route entspricht also der Implementierung von Best Practices zur Optimierung des kritischen Rendering-Pfads für jede Route. Durch diese Änderungen sank die Gesamtladezeit auf allen Seiten im Durchschnitt um 6, 35 %.
Bereitstellung der Basisbildschirme für die Umstellung so bald wie möglich
Ele.me wollte die Idee von Skeleton Screens auf die UX anwenden. Damit soll sichergestellt werden, dass die Seite so schnell wie möglich reagiert, wenn der Nutzer auf eine Schaltfläche oder einen Link tippt. Der Nutzer wird auf diese neue Seite weitergeleitet und der Inhalt wird geladen, sobald der Inhalt verfügbar ist. Dies ist auch der Schlüssel zur Verbesserung der wahrgenommenen Leistung der PWA. Da jedoch jede Seite in einer MPA ihre eigene ursprüngliche Route ist, müssen für jede Navigation alle erforderlichen Lade-, Analyse- und Auswertungsarbeiten jedes Mal wiederholt werden.
Um dieses Problem zu umgehen, erstellte Ele.me den Skeleton-Bildschirm als eigentliche UI-Komponente und verwendete dann den Server Side Rendering-Stack von Vue.js, um die Vue-Komponenten zu erstellen und dann vorab in Strings zu rendern, bevor sie in HTML-Vorlagen eingefügt wurden. So können sie den Hauptbildschirm direkt rendern und beim Navigieren zwischen Seiten einen flüssigeren Übergang erzielen.
|
|
Freigegebene Ressourcen mit Service Worker im Cache speichern
Wenn ein Nutzer in der PWA surft, werden unterschiedliche Routen geladen. Es wäre unnötig, diese Routen aus dem Netzwerk immer wieder zu laden. Um dieses Problem zu lösen, hat Ele.me die kritischen Routen analysiert, die für Nutzer am wichtigsten sind, und ein Webpack-Plug-in erstellt, um die Abhängigkeiten dieser kritischen Routen zu erfassen. Diese Routen wurden dann bei der Installation eines Service Workers im Clientbrowser des Nutzers vorab im Cache gespeichert. Zu diesen kritischen Routen gehören JavaScript, CSS und Bilder, die die typische UI-Shell der PWA bilden.
Routen, die als wichtig, aber nicht kritisch gelten, werden vom Service Worker zur Laufzeit inkrementell im Cache gespeichert, während der Nutzer die PWA weiter nutzt. Dadurch kann Ele.me Nutzern die PWA unter allen Netzwerkbedingungen direkt aus dem Cache bereitstellen. Das Ergebnis: Die Ladezeiten sank auf allen vorab im Cache gespeicherten Seiten um 11,6 %.