Diese Fallstudie beschreibt einen Schritt-für-Schritt-Workflow zur Fehlerbehebung und Verbesserung von INP.
in React verwendet von Trendyol unter Nutzung von Google-Tools wie PageSpeed
Insights (PSI), Chrome-Entwicklertools und die scheduler.yield API.
Zwei wichtige Komponenten jeder E-Commerce-Website sind die Seite mit Produktinformationen. und die Produktdetailseite (Product Detail Page, PDP). E-Commerce-Zugriffe stammen oft Seiten mit Produkteinträgen, sei es über E-Mail-Kampagnen, soziale Medien oder Werbung. Daher ist es wichtig, dass das PLP-Erlebnis das so konzipiert ist, dass Käufe schneller abgeschlossen werden. Priorisierung Die Qualität der Nutzererfahrung ist entscheidend für den Erfolg. Forschungspublikationen Milliseconds Make Millions haben bereits deutlich gemacht, wie sich die Webleistung auf die die Bereitschaft, Geld auszugeben und mit Marken online.
Trendyol ist eine E-Commerce-Plattform mit etwa 30 Millionen Kunden. mit 240.000 Verkäufern, wodurch wir das erste Unternehmen in der Türkei sind. mit einem Wert von über 10 Milliarden $. auf der ganzen Welt.
Um das Ziel zu erreichen, in großem Maßstab die bestmögliche User Experience zu bieten während die Inhalte flexibel bleiben und eine ältere Version des Trendyol konzentrierte sich auf Interaction to Next Paint (INP) als wichtigen Messwert, verbessern können. Diese Fallstudie beschreibt den Weg von Trendyol zur Verbesserung der INP bei seinen Dies führte zu einer Senkung von 50% beim INP und einer Steigerung der Suchanfragen um 1% bei der Geschäftsergebnis.
Das INP-Untersuchungsverfahren von Trendyol
INP misst die Reaktionsfähigkeit einer Website auf Nutzereingaben. Ein guter INP weist darauf hin, dass der Browser schnell und zuverlässig auf alle Nutzereingaben das Überarbeiten der Seite, was ein wesentlicher Bestandteil einer guten User Experience ist.
Die Entwicklung von Trendyol zur Verbesserung von INP begann mit einer gründlichen Analyse der die User Experience, bevor Verbesserungen vorgenommen werden. Basierend auf einem PSI-Bericht betrug die tatsächliche Nutzererfahrung mit dem PLP 963 Millisekunden Mobilgerät, wie in der nächsten Abbildung dargestellt.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Um eine gute Reaktionsfähigkeit zu gewährleisten, sollten Websiteinhaber einen INP-Wert unter oder 200 Millisekunden, was bedeutet, dass der INP-Wert von Trendyol zu dieser Zeit im „schlecht“ Bereich.
Glücklicherweise stellt PSI beide Felddaten für Seiten bereit, die im Bericht Chrome-Nutzer
Bericht zur Nutzererfahrung und detaillierte Diagnosedaten aus dem Lab. Blick auf das Labor
aus der JavaScript-Ausführungszeit in Lighthouse, ergab,
search-result-v2-Skript hat den Hauptthread länger beschäftigt als andere
Skripte auf der Seite.
<ph type="x-smartling-placeholder">Um Engpässe in der realen Welt zu identifizieren, haben wir das Steuerfeld „Leistung“ in Chrome verwendet. Entwicklertools, um Probleme mit PLP-Problemen zu beheben und die Quelle des Problem. In den Chrome-Entwicklertools wird die Leistung auf Mobilgeräten durch eine um das 4-fache Verlangsamung der CPU emuliert eine 700 bis 900 Millisekunden lange Aufgabe im Hauptthread aufgedeckt. Wenn die wichtigsten Thread länger als 50 Millisekunden mit anderen Aufgaben belegt ist, nicht zeitnah auf Nutzereingaben reagieren können, was zu einer schlechten User Experience aus.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Die längste Aufgabe wurde durch einen Intersection Observer API-Callback im Suchergebnisskript in einer React-Komponente. An dieser Stelle begannen wir, diese lange Aufgabe in kleine Blöcke zerlegen, um dem Browser mehr Möglichkeiten, auf Aufgaben mit höherer Priorität zu reagieren – einschließlich Nutzerinteraktionen.
Es stellt sich heraus, dass die Verwendung des setState-Vorgangs, der React auslöst,
Das erneute Rendern innerhalb des Intersection Observer-Callbacks ist mit hohen Kosten verbunden,
die für Low-End-Geräte problematisch sein können, da sie den Hauptthread
zu lang.
Eine Methode, die Entwickelnde verwendet haben, um Aufgaben in kleinere Aufgaben aufzuteilen
beinhaltet setTimeout. Mit dieser Technik haben wir die Ausführung der
setState-Aufruf in eine separate Aufgabe. Obwohl setTimeout ein Aufschieben erlaubt,
JavaScript ausführen, gibt es keine Kontrolle über die Priorität. Dies führte
Teilnahme am Ursprungstest in scheduler.yield, um den
Fortsetzung der Skriptausführung nach dem Aufrufen des Hauptthreads:
/*
* 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 });
Das Hinzufügen dieser Ertragsmethode zum PLP-Code führte zu einem verbesserten INP, da das wurde in mehrere kleinere Aufgaben aufgeteilt, Arbeiten mit höherer Priorität – z. B. Nutzungsinteraktionen und Rendering-Arbeiten –, um schneller als sonst stattfinden.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Trendyol verwendet das PuzzleJs-Framework, um ein Mikro-Frontend zu implementieren. Architektur mit React v16.9.0. Mit React 18 könnte dieselbe Leistung aber aus verschiedenen Gründen ist Trendyol in diesem Fall nicht in der Lage, .
Geschäftsergebnisse
Um die Auswirkungen der implementierten INP-Verbesserung zu messen, führten wir einen A/B-Test durch, wie sich dies auf die Geschäftsmetriken ausgewirkt hat. Insgesamt führten unsere Änderungen am PLP zu zu einer deutlichen Verbesserung führte, darunter eine Senkung der INP um 50 % und eine Anstieg der Klickraten von der Seite mit den Einträgen zur Produktdetailseite pro Nutzersitzung. In der folgenden Abbildung sehen Sie, wie sich INP im Vergleich zu PLP im Zeitverlauf:
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Fazit
Die Optimierung von INP ist ein komplexer und iterativer Prozess, kann aber auch einfacher mit einem klaren Workflow. Eine einfache Methode zur Fehlerbehebung und Verbesserung wie hoch der INP-Wert einer Website ist, hängt davon ab, ob Sie Ihre eigenen Felddaten erheben. Wenn Sie PSI und Lighthouse sind ein guter Ausgangspunkt. Sobald Sie die Seiten mit Problemen suchen, können Sie mit den Entwicklertools versuchen, Probleme.
Hin und wieder dem Hauptthread nachgeben, um dem Browser mehr Informationen zu geben
für dringende Aufgaben wird Ihre Website reaktionsschneller,
damit Ihre Kundschaft eine
bessere User Experience bietet. Neuere Planungs-APIs
wie scheduler.yield() diese Aufgabe erleichtern.
Ein besonderer Dank geht an Jeremy Wagner, Barry Pollard und Houssein Djirdeh aus Google und des Engineering-Teams von Trendyol für ihren Beitrag zu dieser Arbeit.