Durch den Einsatz echter Nutzerüberwachungstools und die Verbesserung der Core Web Vitals bei der Refaktorierung der App konnte das Unternehmen auch den CLS um 72 % und die Reaktionsfähigkeit von Anwendungen verbessern.
Agrofy ist ein Onlinemarktplatz für den Agrarmarkt in Lateinamerika. Sie bringen Käufer und Verkäufer von landwirtschaftlichen Maschinen, Flächen, Geräten und Finanzdienstleistungen zusammen. Im 3. Quartal 2020 verbrachte ein vierköpfiges Entwicklungsteam bei Agrofy einen Monat damit, seine Website zu optimieren, da die Hypothese aufgestellt wurde, dass eine verbesserte Leistung zu geringeren Absprungraten führen würde. Ein Schwerpunkt lag auf der Verbesserung des LCP, einem der Core Web Vitals. Diese Leistungsoptimierungen führten zu einer Verbesserung des LCP um 70 %, was zu einer Reduzierung der Lastabbrüche von 3,8 % auf 0,9 % führte.
70%
Niedrigerer LCP
76%
Weniger Lastabbrüche
Problem
Ein Entwicklungsteam bei Agrofy untersuchte die Geschäftskennzahlen und stellte fest, dass die Absprungraten höher ausfielen als die Branchen-Benchmarks. Auch die technischen Altlasten stiegen in der Codebasis der Website.
Lösung
Das Agrofy-Team bot seinen Führungskräften eine Verkaufspräsentation und profitierte von folgenden Vorteilen:
- Migrieren Sie von einem älteren, verworfenen Framework zu einem neueren, aktiv unterstützten Framework.
- Ladeleistung der neuen Codebasis optimieren.
Die Migration dauerte zwei Monate. Abgesehen von dem bereits erwähnten vierköpfigen Entwicklungsteam waren an dieser Migration auch Produkt- und UX-Spezialisten und ein Softwarearchitekt beteiligt. Für das Optimierungsprojekt dauerte das vierköpfige Entwicklungsteam einen Monat. Dabei lag der Schwerpunkt auf LCP, CLS (ein weiterer Core Web Vitals-Messwert) und FCP. Spezifische Optimierungen:
- Lazy Loading für alle nicht sichtbaren Elemente mit der Intersection Observer API
- Statische Ressourcen mit einem Netzwerk für die Inhaltsübermittlung schneller bereitstellen.
- Lazy Loading von Bildern mit
loading="lazy" - Serverseitiges Rendering von Inhalten kritischer Rendering-Pfade
- Wichtige Ressourcen vorab laden und vorab verbinden, um die Handshakezeiten zu minimieren
- Verwendung von echten Tools zur Nutzerüberwachung (User Monitoring, RUM), um zu ermitteln, auf welchen Produktdetailseiten viele Layoutverschiebungen aufgetreten sind, und Anpassungen an der Architektur der Codebasis vorzunehmen.
Weitere technische Details finden Sie im Agrofy-Engineering-Blogpost.
Nachdem die neue Codebasis für 20% des Traffics aktiviert worden war, wurde die neue Website Anfang September 2020 für alle Besucher eingeführt.
Ergebnisse
Die Optimierungen des Entwicklungsteams führten zu messbaren Verbesserungen bei vielen verschiedenen Messwerten:
- Der LCP stieg um 70%.
- CLS verbesserte sich um 72%.
- Durch das Blockieren von JavaScript-Anfragen gingen 100% weniger Anfragen ein, CSS-Anfragen um 80%.
- Lange Aufgaben wurden um 72 % reduziert.
- Erster CPU-Leerlauf verbesserte sich um 25%.
Im selben Zeitraum zeigten echte Nutzerüberwachungsdaten (auch als Felddaten bezeichnet) einen Rückgang der Lastausstiegsrate auf Produktdetailseiten um 76 % von 3, 8% auf 0,9%:
