Die Interaktivität von Produktdetailseiten wurde optimiert, um den maximalen potenziellen FID-Wert in Lighthouse um 90% und den FID-Wert im Bericht zur Nutzererfahrung in Chrome um 9% zu senken.
Mercado Libre ist das größte E-Commerce- und Zahlungssystem in Lateinamerika. Das Unternehmen ist in 18 Ländern vertreten und in Brasilien, Mexiko und Argentinien (gemessen an den einzelnen Besuchern und Seitenaufrufen) Marktführer.
Webleistung liegt schon lange im Fokus des Unternehmens. Vor Kurzem hat das Unternehmen jedoch ein Team gebildet, das die Leistung überwachen und Optimierungen in verschiedenen Bereichen der Website vornehmen sollte.
In diesem Artikel wird die Arbeit von Guille Paz, Pablo Carminatti und Oleh Burkhay aus dem Frontend-Architekturteam von Mercado Libre zusammengefasst, um einen der Core Web Vitals zu optimieren: First Input Delay (FID) und dessen Lab-Proxy Total Blocking Time (TBT).
90%
Reduzierung des maximalen potenziellen FID in Lighthouse
9 %
Mehr Nutzer empfinden FID in CrUX als „schnell“.
Lange Aufgaben, First Input Delay und Total Blocking Time
Das Ausführen von teurem JavaScript-Code kann zu langen Aufgaben führen. Das sind Aufgaben, die länger als 50 ms im Hauptthread des Browsers ausgeführt werden.
FID (First Input Delay) misst die Zeit ab der ersten Interaktion eines Nutzers mit einer Seite (z.B. wenn er auf einen Link klickt) bis zu dem Zeitpunkt, zu dem der Browser tatsächlich in der Lage ist, als Reaktion auf diese Interaktion Event-Handler zu verarbeiten. Eine Website, die teuren JavaScript-Code ausführt, erfordert wahrscheinlich mehrere lange Aufgaben, was sich letztlich negativ auf FID auswirkt.
Für eine gute Nutzerfreundlichkeit sollten Websites einen First Input Delay von weniger als 100 Millisekunden anstreben:
Obwohl die Website von Mercado Libre in den meisten Bereichen eine gute Leistung bot, stellte das Unternehmen im Bericht zur Nutzererfahrung in Chrome fest, dass die Produktdetailseiten einen schlechten FID-Wert aufweisen. Basierend auf diesen Informationen beschloss es, seine Bemühungen auf die Verbesserung der Interaktivität der Produktseiten auf der Website zu konzentrieren.
Über diese Seiten können Nutzer komplexe Interaktionen ausführen, sodass das Ziel darin bestand, die Interaktivität zu optimieren, ohne wertvolle Funktionen zu beeinträchtigen.
Die Interaktivität von Seiten mit Produktdetails messen
FID erfordert einen echten Nutzer und kann daher im Labor nicht gemessen werden. Der Messwert Total Blocking Time (TBT) ist jedoch im Labor messbar, korreliert gut mit FID vor Ort und erfasst auch Probleme, die sich auf die Interaktivität auswirken.
Im folgenden Trace wird beispielsweise, während die Gesamtzeit für die Ausführung von Aufgaben im Hauptthread 560 ms beträgt, nur 345 ms dieser Zeit als Gesamtblockzeit betrachtet (die Summe der Teile jeder Aufgabe, die 50 ms überschreiten):
Mercado Libre nutzte TBT als Proxy-Messwert im Labor, um die Interaktivität von Produktdetailseiten in der Praxis zu messen und zu verbessern.
Hier ist der allgemeine Ansatz, den das Team verfolgt hat:
- Mit WebPageTest können Sie genau ermitteln, durch welche Skripts der Hauptthread auf einem echten Gerät beschäftigt war.
- Ermitteln Sie mit Lighthouse die Auswirkungen der Änderungen unter Max Potential First Input Delay (Max Potential FID).
Lange Aufgaben mit WebPageTest visualisieren
WebPageTest (WPT) ist ein Tool zur Webleistung, mit dem Sie Tests auf echten Geräten an verschiedenen Standorten auf der ganzen Welt durchführen können.
Mercado Libre nutzte WPT, um die Nutzererfahrung zu reproduzieren, indem ein Gerätetyp und ein Standort ausgewählt wurden, der echten Nutzern ähnelt. Konkret entschied sich das Unternehmen für ein Moto 4G-Gerät und Dulles, Virginia, da man sich an die Erfahrungen von Mercado Libre-Nutzern in Mexiko orientieren wollte. Mercado Libre beobachtete die Ansicht des Hauptthreads von WPT und stellte fest, dass mehrere aufeinanderfolgende lange Aufgaben den Hauptthread 2 Sekunden lang blockieren:
Bei der Analyse des entsprechenden Wasserfalls wurde festgestellt, dass ein erheblicher Teil dieser zwei Sekunden aus dem Analysemodul stammt. Das Haupt-Bundle der Anwendung war groß (950 KB) und das Parsen, Kompilieren und Ausführen dauerte lange.
Lighthouse zur Bestimmung des maximalen potenziellen FID-Werts verwenden
In Lighthouse können Sie nicht zwischen verschiedenen Geräten und Standorten auswählen, aber es ist ein sehr nützliches Tool, um Websites zu diagnostizieren und Leistungsempfehlungen zu erhalten.
Beim Ausführen von Lighthouse auf Produktdetailseiten fand Mercado Libre heraus, dass Max Potential FID (Max. potenzielle FID) der einzige rot markierte Messwert mit einem Wert von 1710ms war.
Mercado Libre hat sich das Ziel gesetzt, seinen maximalen FID-Wert in einem Labortool wie Lighthouse und WebPageTest zu verbessern. Dabei ging es davon aus, dass diese Verbesserungen sich auf die echten Nutzer auswirken und daher in echten Nutzerüberwachungstools wie dem Bericht zur Nutzererfahrung in Chrome sichtbar sein würden.
Lange Aufgaben optimieren
Erste Iteration
Basierend auf dem Hauptthread-Trace legte Mercado Libre das Ziel fest, die beiden Module zu optimieren, die teuren Code ausführen.
Sie begannen damit, die Leistung des internen Tracking-Moduls zu optimieren. Dieses Modul enthielt eine CPU-intensive Aufgabe, die für das Funktionieren des Moduls nicht entscheidend war und daher sicher entfernt werden konnte. Dadurch konnte der JavaScript-Code auf der gesamten Website um 2% reduziert werden.
Anschließend begann das Unternehmen mit der Verbesserung der allgemeinen Paketgröße:
Mercado Libre nutzte den Dienst webpack-bundle-Analyzer, um Optimierungsmöglichkeiten zu ermitteln:
- Anfangs war das vollständige Lodash-Modul erforderlich. Es wurde durch eine Anforderung pro Methode ersetzt, mit der nur ein Teil von Lodash anstelle der gesamten Bibliothek geladen werden muss. Außerdem wurde es in Verbindung mit lodash-webpack-plugin verwendet, um Lodash noch weiter zu verkleinern.
Außerdem wurden die folgenden Babel-Optimierungen angewendet:
- Verwenden Sie @babel/plugin-transform-runtime, um die Helper von Babel im gesamten Code wiederzuverwenden und die Größe des Bundles erheblich zu reduzieren.
- Verwenden Sie babel-plugin-search-and-replace, um Tokens beim Build zu ersetzen, um eine große Konfigurationsdatei im Haupt-Bundle zu entfernen.
- Durch Hinzufügen von babel-plugin-transform-react-remove-prop-types können Sie zusätzliche Byte sparen, indem Sie die Attributtypen entfernen.
Als Ergebnis dieser Optimierungen konnte die Bundle-Größe um etwa 16% reduziert werden.
Auswirkung messen
Durch die Änderungen wurden die aufeinanderfolgenden langen Aufgaben von Mercado Libre von zwei Sekunden auf eine Sekunde gesenkt:
Lighthouse verzeichnete eine um 57% niedrigere maximale potenzielle First Input Delay:
Zweite Iteration
Das Team befasste sich weiter mit langen Aufgaben, um nachfolgende Verbesserungen zu finden.
Auf Grundlage dieser Informationen beschloss das Team, die folgenden Änderungen vorzunehmen:
- Reduzieren Sie die Größe des Haupt-Bundles weiter, um die Kompilierungs- und Parsing-Zeit zu optimieren (z.B. indem Sie doppelte Abhängigkeiten in den verschiedenen Modulen entfernen).
- Wenden Sie die Codeaufteilung auf Komponentenebene an, um JavaScript in kleinere Blöcke zu unterteilen und ein intelligenteres Laden der verschiedenen Komponenten zu ermöglichen.
- Sie können die KomponentenHydration aufschieben, um eine intelligentere Verwendung des Hauptthreads zu ermöglichen. Diese Technik wird im Allgemeinen als partielle Hydration bezeichnet.
Auswirkung messen
Der resultierende WebPageTest-Trace zeigte sogar noch kleinere Teile der JS-Ausführung:
Außerdem konnte die maximale potenzielle FID-Zeit in Lighthouse um weitere 60% reduziert werden:
Fortschritt für echte Nutzer visualisieren
Labortesttools wie WebPageTest und Lighthouse eignen sich zwar hervorragend zum Iterieren von Lösungen während der Entwicklung, aber das eigentliche Ziel besteht darin, die Nutzerfreundlichkeit für echte Nutzer zu verbessern.
Der Bericht zur Nutzererfahrung in Chrome enthält Messwerte zur Nutzererfahrung mit beliebten Websites. Sie können die Daten aus dem Bericht abrufen, indem Sie Abfragen in BigQuery, PageSpeedInsights oder in der CrUX API ausführen.
Das CrUX-Dashboard ist eine einfache Möglichkeit, den Fortschritt der Kernmesswerte zu visualisieren:
Nächste Schritte
Die Leistung im Web ist nie zu Ende und Mercado Libre weiß, welchen Wert diese Optimierungen für die Nutzer haben. Das Unternehmen wendet auf der Website weiterhin verschiedene Optimierungen an, darunter den Vorabruf auf Seiten mit Produkteinträgen und Bildoptimierungen. Gleichzeitig werden die Seiten mit Produkteinträgen weiter verbessert, um die Gesamtblockzeit (Total Blocking Time, TBT) zu reduzieren, und durch Proxy-FID. Zu diesen Optimierungen gehören:
- Iteration der Lösung zur Codeaufteilung
- Verbesserte Ausführung von Drittanbieter-Skripts
- Kontinuierliche Verbesserungen der Asset-Bündelung auf Bundler-Ebene (Webpack).
Mercado Libre hat einen ganzheitlichen Überblick über die Leistung. Während das Unternehmen kontinuierlich die Interaktivität auf der Website optimiert hat, sucht es auch nach Verbesserungsmöglichkeiten für die anderen beiden aktuellen Core Web Vitals: LCP (Largest Contentful Paint) und CLS (Cumulative Layout Shift).