Optimierung der Interaktivität von Produktinformationsseiten für eine 90‑prozentige Reduzierung des maximalen potenziellen FID in Lighthouse und eine 9‑prozentige Verbesserung des FID im Bericht zur Nutzererfahrung in Chrome.
Mercado Libre ist das größte E‑Commerce- und Zahlungsökosystem in Lateinamerika. Sie ist in 18 Ländern vertreten und Marktführer in Brasilien, Mexiko und Argentinien (basierend auf eindeutigen Besuchern und Seitenaufrufen).
Die Webleistung ist für das Unternehmen schon lange ein wichtiger Faktor. Vor Kurzem wurde jedoch ein Team gegründet, das die Leistung überwacht und Optimierungen in verschiedenen Bereichen der Website vornimmt.
In diesem Artikel wird die Arbeit von Guille Paz, Pablo Carminatti und Oleh Burkhay aus dem Frontend-Architekturteam von Mercado Libre zusammengefasst, die einen der Core Web Vitals-Messwerte optimiert haben: First Input Delay (FID) und den zugehörigen Lab-Proxy Total Blocking Time (TBT).
90 %
Reduzierung der maximalen potenziellen ersten Eingabelatenz in Lighthouse
9 %
Mehr Nutzer empfinden FID in CrUX als „schnell“
Lange Tasks, First Input Delay und Total Blocking Time
Die Ausführung von ressourcenintensivem JavaScript-Code kann zu langen Aufgaben führen, die länger als 50 ms im Haupt-Thread des Browsers ausgeführt werden.
Der Messwert „First Input Delay“ (FID) gibt an, wie lange es ab dem Zeitpunkt, zu dem ein Nutzer das erste Mal mit einer Seite interagiert (z.B. auf einen Link klickt), dauert, bis der Browser mit der Verarbeitung von Event-Handlern als Reaktion auf diese Interaktion beginnen kann. Auf einer Website, auf der ressourcenintensive JavaScript-Codes ausgeführt werden, gibt es wahrscheinlich mehrere lange Aufgaben, die sich negativ auf den FID auswirken.
Für eine gute Nutzerfreundlichkeit sollten Websites einen First Input Delay von weniger als 100 Millisekunden anstreben:
Die Website von Mercado Libre schnitt in den meisten Bereichen gut ab. Im Chrome User Experience Report stellten sie jedoch fest, dass die Produktinformationsseiten einen schlechten FID hatten. Auf Grundlage dieser Informationen beschloss das Unternehmen, sich auf die Verbesserung der Interaktivität der Produktseiten auf der Website zu konzentrieren.
Auf diesen Seiten kann der Nutzer komplexe Interaktionen ausführen. Ziel war es daher, die Interaktivität zu optimieren, ohne die wertvollen Funktionen zu beeinträchtigen.
Interaktivität von Produktdetailseiten messen
Für die FID ist ein echter Nutzer erforderlich. Sie kann daher nicht in der Testumgebung gemessen werden. Der Messwert Total Blocking Time (TBT) lässt sich jedoch im Labor messen, korreliert gut mit FID in der Praxis und erfasst auch Probleme, die sich auf die Interaktivität auswirken.
Im folgenden Trace beträgt die Gesamtzeit für die Ausführung von Aufgaben im Haupt-Thread beispielsweise 560 ms. Davon werden jedoch nur 345 ms als Gesamtblockierungszeit betrachtet (die Summe der Anteile jeder Aufgabe, die 50 ms überschreiten):
Mercado Libre hat TBT als Proxy-Messwert im Labor verwendet, um die Interaktivität von Produktdetailseiten in der realen Welt zu messen und zu verbessern.
So sind sie im Allgemeinen vorgegangen:
- Mit WebPageTest können Sie genau ermitteln, welche Skripts den Hauptthread auf einem echten Gerät beschäftigt haben.
- Mit Lighthouse können Sie die Auswirkungen der Änderungen am maximalen potenziellen First Input Delay (Max Potential FID) ermitteln.
WebPageTest zum Visualisieren langer Aufgaben verwenden
WebPageTest (WPT) ist ein Tool zur Webanalyse, mit dem Sie Tests auf echten Geräten an verschiedenen Standorten weltweit ausführen können.
Mercado Libre hat WPT verwendet, um die Nutzererfahrung nachzubilden. Dazu wurde ein Gerätetyp und ein Standort ausgewählt, die denen echter Nutzer ähneln. Konkret entschieden sie sich für ein Moto 4G-Gerät und Dulles, Virginia, um die Nutzererfahrung von Mercado Libre-Nutzern in Mexiko zu simulieren. Durch die Analyse der Hauptthread-Ansicht von WPT stellte Mercado Libre fest, dass es mehrere aufeinanderfolgende lange Tasks gab, die den Hauptthread für 2 Sekunden blockierten:
Bei der Analyse der entsprechenden Vermittlungsabfolge stellten sie fest, dass ein erheblicher Teil dieser zwei Sekunden auf ihr Analysemodul zurückzuführen war. Die Größe des Haupt-Bundles der Anwendung war mit 950 KB sehr groß und die Analyse, Kompilierung und Ausführung dauerten lange.
Mit Lighthouse die maximale potenzielle erste Eingabelatenz ermitteln
Mit Lighthouse können Sie nicht zwischen verschiedenen Geräten und Standorten wählen. Es ist aber ein sehr nützliches Tool, um Websites zu analysieren und Leistungsempfehlungen zu erhalten.
Bei der Ausführung von Lighthouse auf Produktdetailseiten stellte Mercado Libre fest, dass nur der Messwert Max Potential FID rot markiert war, mit einem Wert von 1710 ms.
Mercado Libre setzte sich daraufhin das Ziel, den FID-Score für das maximale Potenzial in einem Labortool wie Lighthouse und WebPageTest zu verbessern. Das Unternehmen ging davon aus, dass sich diese Verbesserungen auf die tatsächlichen Nutzer auswirken und daher in Tools zur Überwachung echter Nutzer wie dem Bericht zur Nutzererfahrung in Chrome (Chrome User Experience Report, CrUX) zu sehen sein würden.
Lange Aufgaben optimieren
Erste Iteration
Anhand des Main-Thread-Traces hat sich Mercado Libre das Ziel gesetzt, die beiden Module zu optimieren, in denen teurer Code ausgeführt wurde.
Sie begannen mit der Optimierung der Leistung des internen Trackingmoduls. Dieses Modul enthielt eine CPU-intensive Aufgabe, die für die Funktion des Moduls nicht kritisch war und daher problemlos entfernt werden konnte. Das führte zu einer Reduzierung des JavaScript für die gesamte Website um 2 %.
Danach begannen sie, die allgemeine Bundle-Größe zu optimieren:
Mercado Libre hat webpack-bundle-analyzer verwendet, um Optimierungsmöglichkeiten zu erkennen:
- Anfangs war das vollständige Lodash-Modul erforderlich. Dies wurde durch ein per-method require ersetzt, um nur eine Teilmenge von Lodash anstelle der gesamten Bibliothek zu laden. Es wurde in Verbindung mit lodash-webpack-plugin verwendet, um Lodash noch weiter zu verkleinern.
Außerdem haben sie die folgenden Babel-Optimierungen angewendet:
- Mit @babel/plugin-transform-runtime können Sie die Hilfsfunktionen von Babel im gesamten Code wiederverwenden und die Größe des Bundles erheblich reduzieren.
- Mit babel-plugin-search-and-replace können Sie Tokens zum Build-Zeitpunkt ersetzen, um eine große Konfigurationsdatei im Haupt-Bundle zu entfernen.
- Wenn Sie babel-plugin-transform-react-remove-prop-types hinzufügen, können Sie einige zusätzliche Bytes sparen, indem Sie die Prop-Typen entfernen.
Durch diese Optimierungen konnte die Bundle-Größe um etwa 16% reduziert werden.
Wirkung messen
Durch die Änderungen konnte die Anzahl der aufeinanderfolgenden langen Aufgaben von Mercado Libre von zwei auf eine Sekunde reduziert werden:
Lighthouse zeigte eine Reduzierung des maximalen potenziellen First Input Delay um 57%:
Zweite Iteration
Das Team untersuchte weiterhin lange Aufgaben, um weitere Verbesserungen zu finden.
Auf Grundlage dieser Informationen haben sie beschlossen, die folgenden Änderungen vorzunehmen:
- Reduzieren Sie die Größe des Haupt-Bundles weiter, um die Kompilierungs- und Parsing-Zeit zu optimieren, z.B. durch Entfernen doppelter Abhängigkeiten in den verschiedenen Modulen.
- Wenden Sie Code-Splitting auf Komponentenebene an, um JavaScript in kleinere Teile aufzuteilen und ein intelligenteres Laden der verschiedenen Komponenten zu ermöglichen.
- Verschieben Sie die Komponentenhydrierung, um den Hauptthread intelligenter zu nutzen. Dieses Verfahren wird allgemein als partielle Hydrierung bezeichnet.
Wirkung messen
Der resultierende WebPageTest-Trace zeigte noch kleinere Blöcke der JS-Ausführung:
Die maximale potenzielle erste Eingabelatenz in Lighthouse wurde um weitere 60% reduziert:
Fortschritt für echte Nutzer visualisieren
Labortesttools wie WebPageTest und Lighthouse eignen sich zwar hervorragend, um während der Entwicklung Lösungen zu optimieren, das eigentliche Ziel ist jedoch, die Nutzerfreundlichkeit für echte Nutzer zu verbessern.
Der Bericht zur Nutzererfahrung in Chrome enthält Messwerte dazu, wie echte Chrome-Nutzer beliebte Ziele im Web erleben. Die Daten aus dem Bericht können durch Ausführen von Abfragen in BigQuery, PageSpeedInsights oder der CrUX API abgerufen werden.
Das CrUX-Dashboard ist eine einfache Möglichkeit, den Fortschritt der wichtigsten Messwerte zu visualisieren:
Nächste Schritte
Die Web-Performance ist nie abgeschlossen. Mercado Libre weiß, welchen Wert diese Optimierungen für die Nutzer haben. Das Team nimmt weiterhin verschiedene Optimierungen auf der Website vor, darunter Prefetching auf Produktübersichtsseiten und Bildoptimierungen. Außerdem werden die Produktübersichtsseiten weiter verbessert, um die Total Blocking Time (TBT) und damit auch den FID noch weiter zu reduzieren. Dazu gehören:
- Lösung für Code-Splitting iterieren
- Die Ausführung von Drittanbieterskripts wurde verbessert.
- Kontinuierliche Verbesserungen beim Asset-Bundling auf Bundler-Ebene (webpack).
Mercado Libre hat eine ganzheitliche Sicht auf die Leistung. Während das Unternehmen die Interaktivität auf der Website weiter optimiert, werden auch die beiden anderen aktuellen Core Web Vitals noch genauer untersucht: LCP (Largest Contentful Paint) und CLS (Cumulative Layout Shift).