In dieser Fallstudie wird ein Schritt-für-Schritt-Workflow zum Entfernen von Fehlern und Optimieren von INP in React beschrieben, der von Trendyol mithilfe von Google-Tools wie PageSpeed Insights (PSI), Chrome DevTools und der scheduler.yield API verwendet wird.
Zwei wichtige Komponenten jeder E-Commerce-Website sind die Produktseite (Product Listing Page, PLP) und die Produktdetailseite (Product Detail Page, PDP). E-Commerce-Zugriffe stammen oft von Seiten mit Produkteinträgen, z. B. über E-Mail-Kampagnen, soziale Medien oder Werbung. Daher ist es wichtig, dass der PLP sorgfältig gestaltet wird, um die Zeit für den Kauf zu verkürzen. Die Qualität der Nutzererfahrung hat oberste Priorität, wenn Sie erfolgreich sein möchten. Forschungsveröffentlichungen wie Milliseconds Make Millions haben bereits die erheblichen Auswirkungen der Webleistung auf die Bereitschaft der Verbraucher gezeigt, Geld auszugeben und sich online mit Marken zu beschäftigen.
Trendyol ist eine E-Commerce-Plattform mit rund 30 Millionen Kunden und 240.000 Verkäufern. Das hat uns zum ersten Unternehmen in der Türkei mit einer Bewertung von über 10 Milliarden $ und zu einer der führenden E-Commerce-Plattformen der Welt gemacht.
Um das Ziel zu erreichen, eine bestmögliche Nutzererfahrung im großen Maßstab zu bieten und gleichzeitig die Flexibilität der Inhalte beizubehalten und mit einer älteren Version von React zu arbeiten, konzentrierte sich Trendyol auf den Messwert „Interaction to Next Paint“ (INP) als wichtigen Messwert zur Verbesserung. Diese Fallstudie beschreibt, wie Trendyol bei der Verbesserung der INP bei seinem PLP zu 50% weniger INP und einem 1% höheren Umsatz in den Suchergebnissen geführt hat.
INP-Prüfverfahren von Trendyol
INP misst die Reaktionsfähigkeit einer Website auf Nutzereingaben. Eine gute INP gibt an, dass der Browser schnell und zuverlässig auf alle Nutzereingaben reagieren und die Seite neu zeichnen kann. Dies ist eine wichtige Komponente für eine gute Nutzererfahrung.
Der Weg von Trendyol zur Verbesserung der INP auf seiner PLP begann mit einer gründlichen Analyse der Nutzerfreundlichkeit, bevor Verbesserungen vorgenommen wurden. Laut einem PSI-Bericht hatte die tatsächliche Nutzererfahrung der PLP auf Mobilgeräten einen INP von 963 Millisekunden, wie in der folgenden Abbildung dargestellt.
Für eine gute Reaktionsfähigkeit sollten Websiteinhaber einen INP von unter oder bei 200 Millisekunden anstreben. Der INP von Trendyol lag zu diesem Zeitpunkt also im Bereich „schlecht“.
Glücklicherweise bietet PSI sowohl Felddaten für Seiten, die im Bericht zur Nutzererfahrung in Chrome (Chrome User Experience, CrUX) enthalten sind, als auch detaillierte Diagnosedaten aus dem Lab. Die Prüfung der JavaScript-Ausführungszeit in Lighthouse ergab, dass das search-result-v2-Script den Hauptthread länger beanspruchte als andere Scripts auf der Seite.
Um Engpässe in der realen Welt zu identifizieren, haben wir den Bereich „Leistung“ in den Chrome-Entwicklertools verwendet, um Fehler in PLP zu beheben und die Ursache des Problems zu ermitteln. Beim Emulieren der Leistung von Mobilgeräten mit einer 4-fachen CPU-Verlangsamung in den Chrome-Entwicklertools wurde eine 700–900 Millisekunden lange Aufgabe im Hauptthread erkannt. Wenn der Hauptthread länger als 50 Millisekunden mit anderen Aufgaben beschäftigt ist, kann er möglicherweise nicht rechtzeitig auf Nutzereingaben reagieren, was zu einer schlechten Nutzererfahrung führt.
Die längste Aufgabe wurde durch einen Intersection Observer API-Callback im Suchergebnisskript in einer React-Komponente verursacht. An diesem Punkt haben wir damit begonnen, diese lange Aufgabe in kleine Blöcke aufzuteilen, um dem Browser mehr Möglichkeiten zu geben, auf Aufgaben mit höherer Priorität zu reagieren – einschließlich Nutzerinteraktionen.
Die Verwendung des setState-Vorgangs, der das React-Neu-Rendering im Intersection Observer-Callback auslöst, ist mit hohen Kosten verbunden. Das kann für Low-End-Geräte problematisch sein, da der Hauptthread zu lange belegt ist.
Eine Methode, mit der Entwickler Aufgaben in kleinere unterteilen, ist setTimeout. Mit dieser Technik haben wir die Ausführung des setState-Aufrufs in eine separate Aufgabe verschoben. Mit setTimeout lässt sich zwar die Ausführung von JavaScript verzögern, die Priorität kann jedoch nicht gesteuert werden. Deshalb haben wir uns für den Ursprungstest scheduler.yield entschieden, um die Fortsetzung der Skriptausführung nach dem Aufrufen des Hauptthreads zu gewährleisten:
/*
* Yielding method using scheduler.yield, falling back to setTimeout:
*/
async function yieldToMain() {
if('scheduler' in window && 'yield' in scheduler) {
return await scheduler.yield();
}
return new Promise(resolve => {
setTimeout(resolve, 0);
});
}
/*
* Yielding to the main thread before changing the state of the component:
*/
const observer = new IntersectionObserver((entries) => {
entries.forEach(handleIntersection);
const maxNumberOfEntries = Math.max(...this.intersectingEntries);
if (Number.isFinite(maxNumberOfEntries)) {
await this.yieldToMain();
this.setState({ count: maxNumberOfEntries });
}
}, { threshold: 0.5 });
Durch das Hinzufügen dieser Methode zum Ausgeben von Ergebnissen wurde die INP verbessert, da die Hauptaufgabe in eine Reihe kleinerer Aufgaben unterteilt wurde. Dadurch können Aufgaben mit höherer Priorität, z. B. Nutzerinteraktionen und nachfolgende Rendering-Aufgaben, früher ausgeführt werden als sonst.
Trendyol verwendet das PuzzleJs-Framework, um eine Micro-Frontend-Architektur mit React v16.9.0 zu implementieren. Mit React 18 könnte dieselbe Leistung erzielt werden, aber aus verschiedenen Gründen kann Trendyol derzeit nicht auf die neue Version umstellen.
Geschäftsergebnisse
Um die Auswirkungen der implementierten INP-Verbesserung zu messen, haben wir einen A/B-Test durchgeführt, um die Auswirkungen auf die Geschäftsmesswerte zu ermitteln. Insgesamt haben unsere Änderungen an der PLP zu einer deutlichen Verbesserung geführt, darunter eine Reduzierung der INP um 50 % sowie eine Steigerung der Klickraten von der Seite mit den Einträgen zur Produktdetailseite um 1 % pro Nutzersitzung. Die folgende Abbildung zeigt, wie sich INP im Laufe der Zeit verbessert hat:
Fazit
Die Optimierung von INP ist ein komplexer und iterativer Prozess, der mit einem klaren Workflow jedoch einfacher gestaltet werden kann. Ein einfacher Ansatz zum Beheben von Fehlern und Optimieren des INP Ihrer Website hängt davon ab, ob Sie eigene Felddaten erheben. Wenn nicht, sind PSI und Lighthouse ein guter Ausgangspunkt. Sobald Sie Seiten mit Problemen gefunden haben, können Sie mithilfe der Entwicklertools genauer nachsehen und versuchen, die Probleme zu reproduzieren.
Wenn Sie von Zeit zu Zeit auf den Hauptthread zurückgreifen, um dem Browser mehr Möglichkeiten für dringende Aufgaben zu geben, wird Ihre Website reaktionsschneller und die Nutzerfreundlichkeit wird verbessert. Neuere Planungs-APIs wie scheduler.yield() vereinfachen diese Aufgabe.
Ein besonderer Dank geht an Jeremy Wagner, Barry Pollard und Houssein Djirdeh von Google sowie an das Engineering-Team von Trendyol für ihren Beitrag zu dieser Arbeit.