Diese Fallstudie beschreibt einen Schritt-für-Schritt-Workflow zur Fehlerbehebung und Verbesserung von INP in React, der von Trendyol verwendet wird. Dabei werden Google-Tools wie PageSpeed Insights (PSI), Chrome DevTools und die scheduler.yield API verwendet.
Zwei wichtige Komponenten jeder E-Commerce-Website sind die Seite mit den Produkteinträgen (Product Listing Page, PDP) und die Produktdetailseite. E-Commerce-Zugriffe erfolgen oft über Seiten mit Produktinformationen, sei es über E-Mail-Kampagnen, soziale Medien oder Werbung. Daher ist es von entscheidender Bedeutung, die PLP-Nutzung sorgfältig zu gestalten, um die Zeit für den Kauf zu verkürzen. Die Qualität der User Experience zu priorisieren, ist entscheidend. Untersuchungen wie Milliseconds Make Millions haben bereits den deutlichen Einfluss der Webleistung auf die Bereitschaft der Nutzer zu erkennen, Geld auszugeben und mit Unternehmen online zu interagieren.
Trendyol ist eine E-Commerce-Plattform mit rund 30 Millionen Kunden und 240.000 Verkäufern. Das hat uns dazu bewogen, mit einem Wert von über 10 Milliarden US-Dollar das erste Unternehmen in der Türkei zu werden und eine der weltweit führenden E-Commerce-Plattformen zu sein.
Um in großem Maßstab die bestmögliche Nutzerfreundlichkeit zu bieten, gleichzeitig die Flexibilität der Inhalte zu wahren und mit einer älteren Version von React zu arbeiten, konzentrierte sich Trendyol auf Interaction to Next Paint (INP) als wichtigen Verbesserungsmesswert. Diese Fallstudie beschreibt den Weg von Trendyol zur Verbesserung des INP im PLP, was zu einer Senkung des INP um 50% und zu einer Steigerung des Geschäftsmesswerts für Suchergebnisse um 1% führte.
Der INP-Untersuchungsprozess von Trendyol
INP misst die Reaktionsfähigkeit einer Website auf Nutzereingaben. Eine gute INP bedeutet, dass der Browser schnell und zuverlässig auf alle Nutzereingaben reagieren und die Darstellung der Seite aktualisieren kann. Dies ist ein wichtiger Faktor für eine gute Nutzererfahrung.
Die Arbeit von Trendyol zur Verbesserung von INP auf dem PLP-System begann mit einer gründlichen Analyse der Nutzererfahrung, bevor Verbesserungen vorgenommen wurden. Laut einem PSI-Bericht betrug die tatsächliche Nutzererfahrung des PLP 963 Millisekunden auf Mobilgeräten, wie in der nächsten Abbildung dargestellt.
Websiteinhaber sollten für eine gute Reaktionszeit eine INP unter oder bei 200 Millisekunden anstreben. Das bedeutet, dass Trendyols INP zu diesem Zeitpunkt im Bereich „Schlecht“ lag.
PSI bietet sowohl Felddaten für Seiten im Chrome User Experience Report (CrUX) als auch detaillierte Lab-Diagnosedaten. Bei den Labdaten ergab die Prüfung der JavaScript-Ausführung von Lighthouse, dass das Skript search-result-v2 den Hauptthread länger als andere Skripts auf der Seite belegt hat.
Um Engpässe in der Praxis zu identifizieren, haben wir den Leistungsbereich in den Chrome-Entwicklertools verwendet, um Fehler im PLP-Problem zu beheben und die Ursache des Problems zu ermitteln. Beim Emulieren der Leistung auf Mobilgeräten mit einer 4-fachen CPU-Verlangsamung in den Chrome-Entwicklertools wurde eine Aufgabe von 700–900 Millisekunden im Hauptthread sichtbar. Wenn der Hauptthread länger als 50 Millisekunden mit anderen Aufgaben belegt 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, damit der Browser mehr Möglichkeiten hat, auf Aufgaben mit höherer Priorität zu reagieren – einschließlich Nutzerinteraktionen.
Es hat sich herausgestellt, dass die Verwendung des setState-Vorgangs, der das React-Neurendering im Intersection Observer-Callback auslöst, hohe Kosten verursacht. Dies kann für Low-End-Geräte problematisch sein, da der Hauptthread zu lange belegt ist.
Eine Methode, mit der Aufgaben in kleinere Aufgaben aufgeteilt wurden, ist setTimeout. Wir haben diese Technik verwendet, um die Ausführung des setState-Aufrufs in eine separate Aufgabe zu verschieben. Mit setTimeout lässt sich zwar die JavaScript-Ausführung aufschieben, aber es hat keine Kontrolle über die Priorität. Dies hat uns dazu veranlasst, dem Ursprungstest scheduler.yield beizutreten, um die Fortsetzung der Skriptausführung nach der Ausgabe für den Hauptthread 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 });
Die Ergänzung dieser Methode zum PLP-Code führte zu einer verbesserten INP, da die Hauptaufgabe in mehrere kleinere Aufgaben aufgeteilt wurde. Dadurch können Aufgaben mit höherer Priorität, wie Nutzerinteraktionen und nachfolgende Rendering-Arbeiten, früher ausgeführt werden als sonst.
Beachten Sie, dass Trendyol das PuzzleJs-Framework verwendet, um eine Mikro-Frontend-Architektur mit React Version 16.9.0 zu implementieren. Mit React 18 könnte die gleiche Leistung erzielt werden, aber Trendyol kann aus mehreren Gründen derzeit kein Upgrade ausführen.
Geschäftsergebnisse
Um die Auswirkungen der implementierten INP-Verbesserung zu messen, haben wir einen A/B-Test durchgeführt, um festzustellen, wie sich dies auf die Geschäftsmesswerte ausgewirkt hat. Insgesamt führten unsere Änderungen an der PLP zu einer deutlichen Verbesserung, darunter eine Senkung des INP um 50% sowie eine Steigerung der Klickraten von der Eintragsseite zur Produktdetailseite pro Nutzersitzung um 1 %. In der folgenden Abbildung können Sie sehen, wie sich INP im Laufe der Zeit für das PLP verbessert hat:
Fazit
Die Optimierung von INP ist ein komplexer und iterativer Prozess, kann jedoch mit einem klaren Workflow vereinfacht werden. Ein einfacher Ansatz zum Debuggen und Verbessern der INP Ihrer Website hängt davon ab, ob Sie Ihre eigenen Felddaten erfassen. Falls nicht, sind PSI und Lighthouse ein guter Ausgangspunkt. Wenn Sie Seiten mit Problemen identifiziert haben, können Sie die Entwicklertools verwenden, um die Probleme genauer zu untersuchen und die Probleme zu reproduzieren.
Wenn Sie dem Hauptthread von Zeit zu Zeit etwas zurückgeben, um dem Browser mehr Möglichkeiten für dringende Arbeiten zu geben, wird Ihre Website reaktionsschneller und Ihre Kunden können davon profitieren. Neuere Planungs-APIs wie scheduler.yield() erleichtern Ihnen diese Aufgabe.
Unser besonderer Dank geht an Jeremy Wagner, Barry Pollard und Houssein Djirdeh von Google und das Engineering-Team von Trendyol für ihren Beitrag zu dieser Arbeit.