Erstellen eines Web-Performance-Dashboards und Optimieren von JavaScript, Ressourcen und der Startseite für geschäftlichen Erfolg
Tokopedia ist eines der größten E-Commerce-Unternehmen Indonesiens. Mit über 2, 7 Millionen landesweiten Händlernetzwerken, über 18 Millionen Produkteinträgen und über 50 Millionen Besucher*innen pro Monat wusste das Webteam, dass Investitionen in die Leistung im Web unerlässlich sind. Durch die Entwicklung einer Kultur, bei der die Leistung im Vordergrund steht, stieg die Klickrate (Click-through-Rate, CTR) um 35% und die Conversions (CVR) um 8 %.
35%
höhere CTR
8%
höhere CVR
4Sek.
Verbesserung der TTI
Hervorhebung der Chance
Das Webteam sprach mit seinem Führungsteam darüber, wie wichtig es ist, in die Webleistung zu investieren, um die Nutzerfreundlichkeit und Interaktionen zu verbessern. Außerdem zeigte es die Auswirkungen der Leistung durch erweiterte Muster und APIs.
Die Strategie
JavaScript- und Ressourcenoptimierung
Eine häufige Ursache für Leistungsprobleme sind JavaScript, die das Rendering blockieren oder lange andauern, Das Team unternahm mehrere Schritte, um dies zu minimieren:
- Es wurde eine Skript-Controller-Bibliothek erstellt, um Skripts von Drittanbietern selektiv zu laden, um den kritischen Rendering-Pfad zu optimieren.
- Schwere Bibliotheken wurden durch leichtere ersetzt.
- Die Codeaufteilung wurde implementiert und für Inhalte „above the fold“ optimiert, die ohne Scrollen sichtbar sind.
- Implementierung von adaptivem Laden, sodass z.B. für Geräte in schnellen Netzwerken nur Bilder hoher Qualität geladen werden und für Geräte in langsamen Netzwerken Bilder geringerer Qualität verwendet werden.
- Lazy-Load-Bilder für „Below the fold“ (mit Scrollen sichtbar)
- Verzögertes Laden von nicht kritischem JavaScript
Startseitenoptimierung
Das Team erstellte mit Svelte eine Lite-Version der Startseite für Erstbesucher und sorgte so für eine schnelle Website. In dieser Version wurde außerdem ein Service Worker verwendet, um die Nicht-Lite-Assets im Hintergrund zu speichern.
Leistungsbudgetierung und -überwachung
Das Team hat mithilfe von Lighthouse und anderen Tools ein Dashboard zur Leistungsüberwachung erstellt, um die Qualität von Webseiten zu verbessern:
- Misst die Netzwerkqualität, das Infrastrukturmonitoring, die Front-End-Leistung und die Serverleistung.
-
Verwendet eine Kombination aus Webplattform-APIs (z. B. der
Resource Timing API
und dem
Server-Timing-Header), der PageSpeed Insights API und dem Bericht zur Chrome-Nutzererfahrung zur Überwachung von Feld- und Labormesswerten. - Analysiert Bilder aus Lighthouse, um Möglichkeiten zur Bildoptimierung zu ermitteln.
- Erzwingt während der Continuous Integration (CI) ein Budget auf Paketgröße. Die CI-Ausführung schlägt fehl, wenn die Bundle-Größe das Budget überschreitet.
Als E-Commerce-Unternehmen steht die Nutzergewinnung im Mittelpunkt unseres Erfolgs. Wir wissen, wie wichtig das Web ist, und investieren daher leidenschaftlich in alle Tools und Funktionen, die unseren Nutzern die bestmögliche Nutzererfahrung bieten.
Dendi Sunardi, Engineering Manager, Web Platform, Tokopedia
Auf der Seite Scale on Web – Fallstudien finden Sie weitere Erfolgsgeschichten aus Indien und Südostasien.