Durch die Verwendung von Tools zur Überwachung echter Nutzer und die Konzentration auf die Verbesserung der Core Web Vitals beim Refactoring ihrer App konnten sie auch CLS um 72 % sowie die Reaktionsschnelligkeit der Anwendung verbessern.
Agrofy ist ein Onlinemarktplatz für den Agrarsektor in Lateinamerika. Sie bringen Käufer und Verkäufer von Landmaschinen, Grundstücken, Geräten und Finanzdienstleistungen zusammen. Im 3. Quartal 2020 optimierte ein vierköpfiges Entwicklerteam bei Agrofy einen Monat lang die Website. Die Hypothese war, dass eine verbesserte Leistung zu niedrigeren Absprungraten führen würde. Sie konzentrierten sich insbesondere auf die Verbesserung von LCP, einem der Core Web Vitals. Diese Leistungsoptimierungen führten zu einer Verbesserung des LCP um 70 %, was mit einer Reduzierung der Lastabbrüche um 76 % (von 3,8% auf 0,9%) einherging.
70%
Niedrigerer LCP
76 %
Weniger abgebrochene Ladevorgänge
Problem
Ein Entwicklungsteam bei Agrofy hat sich die Unternehmensmesswerte angesehen und festgestellt, dass die Absprungraten höher als die Branchen-Benchmarks waren. Auch die technische Schuld in der Website-Codebasis nahm zu.
Lösung
Das Agrofy-Team präsentierte seine Ideen den Führungskräften und erhielt die Zustimmung für Folgendes:
- Migrieren Sie von einem älteren, eingestellten Framework zu einem neueren, aktiv unterstützten Framework.
- Ladeleistung des neuen Codes optimieren
Die Migration dauerte zwei Monate. Neben dem bereits erwähnten vierköpfigen Entwicklerteam waren an dieser Migration auch Produkt- und UX-Spezialisten sowie ein Softwarearchitekt beteiligt. Das Optimierungsprojekt dauerte für das vierköpfige Entwicklungsteam einen Monat. Sie konzentrierten sich auf LCP, CLS (ein weiterer Core Web Vitals-Messwert) und FCP. Dazu gehörten:
- Alle nicht sichtbaren Elemente werden mit der Intersection Observer API verzögert geladen.
- Statische Ressourcen schneller über ein Content Delivery Network bereitstellen.
- Lazy Loading von Bildern mit
loading="lazy". - Serverseitiges Rendering von Inhalten des kritischen Rendering-Pfads.
- Wichtige Ressourcen vorab laden und vorab verbinden, um die Handshake-Zeiten zu minimieren.
- Mit RUM-Tools (Real User Monitoring) können Sie ermitteln, auf welchen Produktinformationsseiten es zu vielen Layoutverschiebungen kam, und dann Anpassungen an der Architektur der Codebasis vornehmen.
Weitere technische Details finden Sie im Agrofy-Engineering-Blogpost.
Nachdem sie die neue Codebasis für 20% des Traffics aktiviert hatten, führten sie die neue Website Anfang September 2020 für alle Besucher ein.
Ergebnisse
Die Optimierungen des Entwicklungsteams führten zu messbaren Verbesserungen bei vielen verschiedenen Messwerten:
- Der LCP-Wert wurde um 70 % verbessert.
- Der CLS-Wert hat sich um 72 % verbessert.
- Das Blockieren von JS-Anfragen wurde um 100% und das Blockieren von CSS-Anfragen um 80 % reduziert.
- Lange Aufgaben wurden um 72 % reduziert.
- Der Messwert Erster CPU-Leerlauf wurde um 25 % verbessert.
Im selben Zeitraum zeigten Daten aus dem Real User Monitoring (auch Felddaten genannt), dass die Abbruchrate beim Laden von Produktinformationsseiten um 76 % gesunken ist, von 3,8% auf 0,9%:
