Durch die Optimierung der Interaktivität der Produktdetailseiten konnte die maximale potenzielle FID in Lighthouse um 90% reduziert und die FID im Bericht zur Nutzererfahrung in Chrome um 9% verbessert werden.
Mercado Libre ist das größte E-Commerce- und Zahlungssystem in Lateinamerika. Sie ist in 18 Ländern vertreten und Marktführer in Brasilien, Mexiko und Argentinien (basierend auf einzelnen Besuchern und Seitenaufrufen).
Die Webleistung war schon immer ein Schwerpunkt des Unternehmens. Vor Kurzem hat es jedoch ein Team zusammengestellt, das die Leistung überwacht und Optimierungen an verschiedenen Stellen der Website vornimmt.
In diesem Artikel werden die Arbeiten von Guille Paz, Pablo Carminatti und Oleh Burkhay aus dem Frontend-Architekturteam von Mercado Libre zusammengefasst, die zur Optimierung eines der Core Web Vitals durchgeführt wurden: First Input Delay (FID) und sein Lab-Proxy, Total Blocking Time (TBT).
90 %
Verringerung der maximalen potenziellen ersten Eingabelatenz in Lighthouse
9 %
Mehr Nutzer bewerten die FID in CrUX als „Schnell“
Lange Aufgaben, First Input Delay und Total Blocking Time
Die Ausführung von ressourcenintensivem JavaScript-Code kann zu langen Aufgaben führen, d. h. zu Aufgaben, die im Haupt-Thread des Browsers länger als 50 ms ausgeführt werden.
Der FID (First Input Delay) gibt an, wie lange es ab dem Zeitpunkt, zu dem ein Nutzer das erste Mal mit einer Seite interagiert, dauert, bis der Browser mit der Verarbeitung von Ereignishandlern als Reaktion auf diese Interaktion beginnt. Eine Website, auf der teurer JavaScript-Code ausgeführt wird, hat wahrscheinlich mehrere lange Aufgaben, was sich negativ auf die FID auswirkt.
Für eine gute Nutzerfreundlichkeit sollten Websites eine First Input Delay von weniger als 100 Millisekunden anstreben:
Die Website von Mercado Libre erzielte in den meisten Bereichen eine gute Leistung. Im Chrome User Experience Report wurde jedoch festgestellt, dass die Produktdetailseiten eine schlechte FID hatten. Auf der Grundlage dieser Informationen entschied sich das Team, sich auf die Verbesserung der Interaktivität der Produktseiten auf der Website zu konzentrieren.
Auf diesen Seiten können Nutzer komplexe Interaktionen ausführen. Ziel war es daher, die Interaktivität zu optimieren, ohne wichtige Funktionen zu beeinträchtigen.
Interaktivität von Produktdetailseiten messen
Für die FID ist ein echter Nutzer erforderlich. Sie kann daher nicht im Lab gemessen werden. Der Messwert Total Blocking Time (TBT) kann jedoch im Lab gemessen werden, korreliert gut mit dem FID im Feld 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 Teile jeder Aufgabe, die 50 ms überschreiten):
Mercado Libre nutzte die TBT-Messwerte im Lab, um die Interaktivität von Produktdetailseiten in der Praxis zu messen und zu verbessern.
So ging das Team vor:
- Mit WebPageTest können Sie genau feststellen, welche Scripts den Haupt-Thread auf einem echten Gerät ausgelastet haben.
- Mit Lighthouse können Sie die Auswirkungen der Änderungen am maximalen potenziellen First Input Delay (Max Potential FID) ermitteln.
Lange Aufgaben mit WebPageTest visualisieren
WebPageTest (WPT) ist ein Web-Leistungstool, mit dem Sie Tests auf echten Geräten an verschiedenen Standorten auf der ganzen Welt ausführen können.
Mercado Libre nutzte WPT, um die Nutzererfahrung zu reproduzieren, indem es einen Gerätetyp und einen Standort auswählte, der den echten Nutzern ähnelte. Konkret entschied er sich für ein Moto 4G-Gerät und Dulles, Virginia, da er die Nutzung von Mercado Libre in Mexiko nachahmen wollte. Bei der Beobachtung der Hauptthreadansicht von WPT stellte Mercado Libre fest, dass mehrere aufeinanderfolgende lange Aufgaben den Hauptthread für zwei Sekunden blockierten:
Bei der Analyse der entsprechenden Vermittlungsabfolge stellte das Team fest, dass ein erheblicher Teil dieser zwei Sekunden auf das Analysemodul zurückzuführen war. Das Hauptbundle der Anwendung war groß (950 KB) und das Parsen, Kompilieren und Ausführen dauerte sehr lange.
Mit Lighthouse die maximale potenzielle erste Eingabelatenz ermitteln
Lighthouse bietet keine Möglichkeit, zwischen verschiedenen Geräten und Standorten zu wählen. Es ist jedoch ein sehr nützliches Tool, um Websites zu diagnostizieren und Leistungsempfehlungen zu erhalten.
Bei der Ausführung von Lighthouse auf Produktdetailseiten stellte Mercado Libre fest, dass der Messwert Max. potenzielle FID mit einem Wert von 1.710 ms der einzige Messwert war, der rot markiert war.
Ausgehend von diesen Ergebnissen setzte sich Mercado Libre das Ziel, den Wert für die maximale potenzielle FID in einem Labortool wie Lighthouse und WebPageTest zu verbessern. Dabei ging das Unternehmen davon aus, dass sich diese Verbesserungen auf die tatsächlichen Nutzer auswirken und sich daher in Tools zur Überwachung echter Nutzer wie dem Bericht zur Nutzererfahrung in Chrome zeigen würden.
Lange Aufgaben optimieren
Erste Iteration
Basierend auf dem Haupt-Thread-Trace setzte sich Mercado Libre das Ziel, die beiden Module zu optimieren, in denen teurer Code ausgeführt wurde.
Er begann, die Leistung des internen Tracking-Moduls zu optimieren. Dieses Modul enthielt eine CPU-intensive Aufgabe, die für die Funktion des Moduls nicht kritisch war und daher sicher entfernt werden konnte. Das führte zu einer Reduzierung des JavaScript-Codes für die gesamte Website um 2 %.
Danach begannen sie damit, die allgemeine Größe des Bundles zu verbessern:
Mercado Libre nutzte webpack-bundle-analyzer, um Optimierungsmöglichkeiten zu erkennen:
- Ursprünglich war das vollständige Lodash-Modul erforderlich. Dieser wurde durch ein pro-Methode-Require ersetzt, um nur einen Teil von Lodash anstelle der gesamten Bibliothek zu laden. In Verbindung mit dem lodash-webpack-plugin wurde Lodash so noch weiter verkleinert.
Außerdem wurden die folgenden Babel-Optimierungen angewendet:
- Mit @babel/plugin-transform-runtime können Sie die Babel-Hilfsprogramme im gesamten Code wiederverwenden und die Größe des Bundles erheblich reduzieren.
- Mit babel-plugin-search-and-replace Tokens zum Buildzeitpunkt ersetzen, um eine große Konfigurationsdatei im Hauptbundle zu entfernen
- Fügen Sie babel-plugin-transform-react-remove-prop-types hinzu, um durch Entfernen der Prop-Typen zusätzliche Bytes zu sparen.
Durch diese Optimierungen konnte die Größe des Bundles um etwa 16% reduziert werden.
Wirkung messen
Durch die Änderungen wurde die Zeit für aufeinanderfolgende lange Aufgaben bei Mercado Libre von zwei auf eine Sekunde verkürzt:
Lighthouse zeigte eine Reduzierung des maximalen potenziellen First Input Delays um 57%:
Zweite Iteration
Das Team hat sich weiterhin mit langen Aufgaben befasst, um weitere Verbesserungen zu finden.
Auf der Grundlage dieser Informationen hat das Team beschlossen, die folgenden Änderungen vorzunehmen:
- Reduzieren Sie die Größe des Haupt-Bundles weiter, um die Kompilierungs- und Parsezeit zu optimieren (z.B. durch Entfernen doppelter Abhängigkeiten in den verschiedenen Modulen).
- Verwenden Sie die Codeaufteilung auf Komponentenebene, um JavaScript in kleinere Codeblöcke zu unterteilen und das intelligentere Laden der verschiedenen Komponenten zu ermöglichen.
- Verschieben Sie die Komponentenhydrierung, um den Hauptthread effizienter zu nutzen. Diese Methode wird allgemein als partielle Hydrierung bezeichnet.
Wirkung messen
Der daraus resultierende WebPageTest-Trace zeigte noch kleinere JS-Ausführungsblöcke:
Die Zeit für 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 hervorragend, um während der Entwicklung Lösungen zu iterieren. Das eigentliche Ziel besteht jedoch darin, 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 Abfragen in BigQuery, PageSpeedInsights oder die CrUX API abgerufen werden.
Im CrUX-Dashboard können Sie den Fortschritt der wichtigsten Messwerte auf einfache Weise visualisieren:
Nächste Schritte
Die Webleistung ist nie abgeschlossen und Mercado Libre weiß, welchen Mehrwert diese Optimierungen für die Nutzer haben. Neben mehreren Optimierungen auf der gesamten Website, darunter prefetching auf Produktseite und Bildoptimierungen, werden auch weiterhin Verbesserungen an Produktseiten vorgenommen, um die Gesamtblockierungszeit (Total Blocking Time, TBT) und damit auch die FID weiter zu reduzieren. Zu diesen Optimierungen gehören:
- Iterationen zur Code-Split-Lösung
- Die Ausführung von Drittanbieter-Scripts wurde verbessert.
- Weitere Verbesserungen beim Asset-Bündeln auf Bundler-Ebene (webpack).
Mercado Libre hat einen ganzheitlichen Blick auf die Leistung. Während das Unternehmen die Interaktivität der Website weiter optimiert, hat es auch damit begonnen, Verbesserungsmöglichkeiten für die anderen beiden aktuellen Core Web Vitals zu prüfen: LCP (Largest Contentful Paint) und CLS (Cumulative Layout Shift).