Jak firma Trendyol zmniejszyła wartość INP o 50%, uzyskując wzrost współczynnika klikalności o 1%

To studium przypadku opisuje krok po kroku przepływ pracy związany z debugowaniem i ulepszaniem wartości INP w narzędziu React używanym przez Trendyol, korzystając z narzędzi Google, takich jak PageSpeed Insights (PSI), Narzędzia deweloperskie w Chrome i scheduler.yield API.

Mustafa Birinci

Gilberto Cocchi

Thierno Thiam

Dwa kluczowe elementy każdej witryny e-commerce to strona z listą produktów (PLP) i stronie szczegółów produktu (PDP). Ruch e-commerce pochodzi często w formie kampanii e-mailowych, mediów społecznościowych reklam. Dlatego tak ważne jest, aby platforma PLP starannie zaprojektowane w celu skrócenia czasu potrzebnego do dokonania zakupu. Nadawanie priorytetów jakość wrażeń użytkownika jest kluczem do sukcesu. Publikacje badawcze takich jak Milliseconds Make Millions pokazują już istotne wpływu wydajności sieci na konsumentów, gotowość do wydawania pieniędzy i angażowania się z markami w internecie.

Trendyol to platforma e-commerce, która ma około 30 milionów klientów. 240 000 sprzedawców, dzięki czemu jesteśmy pierwszą firmą w Turcji z wartością ponad 10 miliardów dolarów i jedną z czołowych platform e-commerce w kraju, na całym świecie.

Aby osiągnąć cel, którym jest zapewnienie użytkownikom jak najlepszych wrażeń na dużą skalę przy zachowaniu elastyczności treści i pracy ze starszą wersją Firma React, Trendyol skupiła się na interakcji z następnym wyrenderowaniem (INP) jako kluczowych danych i ich ulepszanie. To studium przypadku opisuje drogę, jaką firma Trendyol ulepszyła w zakresie INP PLP, co doprowadziło do 50-procentowego zmniejszenia wskaźnika INP i wzrostu liczby wyszukiwań o 1% dane biznesowe związane z wynikami.

Procedura kontroli INP firmy Trendyol

INP mierzy responsywność witryny na dane wejściowe użytkownika. Dobra wartość INP oznacza, że przeglądarka może szybko i niezawodnie reagować na wszystkie dane wejściowe użytkownika ponowne malowanie strony, co ma duży wpływ na wygodę użytkowników.

Droga firmy Trendyol do ulepszenia wartości INP na platformie PLP rozpoczęła się od dokładnej analizy i wrażenia użytkowników przed wprowadzeniem ulepszeń. Na podstawie raportu PSI w przypadku rzeczywistych użytkowników platformy PLP wartość INP wynosiła 963 milisekundy na urządzenia mobilne, jak widać na następnej ilustracji.

Aby zapewnić dobrą responsywność, właściciele witryn powinni dążyć do wskaźnika INP poniżej lub 200 milisekund, co oznacza, że w tamtym okresie wartość INP firmy Trendyol znajdowała się „słabe” zakres dat.

Na szczęście PSI udostępnia obydwa dane pól dla stron uwzględnionych w raporcie Użytkownik Chrome, Raport na temat użytkowania (CrUX) i szczegółowe dane diagnostyczne z modułu. Informacje o module danych, podczas audytu czasu wykonywania JavaScriptu przeprowadzonego przez Lighthouse wynika, że Skrypt search-result-v2 zajmował w głównym wątku dłużej niż inny czas skryptów na stronie.

Aby zidentyfikować wąskie gardła w rzeczywistości, zastosowaliśmy panel wydajności w Chrome, Narzędzia deweloperskie do rozwiązywania problemów z platformą PLP i identyfikowania źródła Google Cloud. Emulowanie wydajności urządzeń mobilnych z 4-krotnym spowolnieniem procesora w Narzędziach deweloperskich w Chrome pokazało zadanie o długości 700–900 milisekund w wątku głównym. Jeśli główny jest zajęta innymi zadaniami przez ponad 50 milisekund, nie jest w stanie szybko reagować na dane wejściowe użytkownika, co przekłada się na użytkowników.

Najdłuższe zadanie zostało spowodowane przez wywołanie zwrotne Intersection Observer API w w kodzie z wynikami wyszukiwania w komponencie React. Od tego momentu podzielenie długiego zadania na mniejsze fragmenty, aby przeglądarka mogła możliwości reagowania na zadania o wyższym priorytecie, w tym na interakcje użytkowników.

Okazuje się, że użycie operacji setState, która wyzwala reakcję ponowne renderowanie w ramach wywołania zwrotnego Intersection Observer jest kosztowne. co może sprawiać problem w przypadku słabszych urządzeń, ponieważ zajmują one główny wątek jest za długa.

Jedna z metod wykorzystywanych przez programistów do dzielenia zadań na mniejsze obejmuje setTimeout. Zastosowaliśmy tę technikę, aby opóźnić wykonanie setState wywołaj osobne zadanie. Chociaż setTimeout umożliwia odraczanie JavaScript, nie daje żadnej kontroli nad priorytetem. Dzięki temu dołączyć do testów origin scheduler.yield, aby zagwarantować, że kontynuacja wykonania skryptu po przejściu do wątku głównego:

/*
* 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 });

Dodanie tej metody generowania zysków do kodu PLP zaowocowało poprawą wartości INP, ponieważ Główne, długie zadanie zostało podzielone na kilka mniejszych, co pozwala pracy o wyższym priorytecie, takich jak interakcje użytkowników i późniejsze renderowanie, odbyć się szybciej, niż gdyby były to możliwe.

Zwróć uwagę, że Trendyol wykorzystuje platformę PuzzleJs do wdrożenia mikrofrontendu. wykorzystująca architekturę React 16.9.0. Dzięki React 18 można osiągnąć takie same wyniki ale z różnych powodów firma Trendyol nie może uaktualnić kampanii w tym okresie obecnie się znajdujesz.

Wyniki biznesowe

Aby zmierzyć wpływ wdrożonej poprawy INP, przeprowadziliśmy test A/B, aby: i zobaczyć, jaki to miało wpływ na dane biznesowe. Ogólnie zmiany w programie PLP zaowocowały nastąpiła znacząca poprawa, m.in. spadek wskaźnika INP o 50% oraz wzrost o 1% wzrost współczynników klikalności ze strony z informacjami o produkcie do strony z informacjami o produkcie na sesję użytkownika. Na tym rysunku widać poprawę wskaźnika INP w PLP w czasie:

Podsumowanie

Optymalizacja INP to skomplikowany i iteracyjny proces, ale może być łatwiejszy dzięki przejrzystemu procesowi. Prosty sposób na debugowanie i ulepszanie wartość INP witryny zależy od tego, czy zbierasz własne dane z terenu. Jeśli nie, PSI i Lighthouse będą dobrym punktem wyjścia. Po zidentyfikowaniu na stronach z problemami, możesz użyć Narzędzi deweloperskich, aby dowiedzieć się więcej i spróbować odtworzyć problemów.

Od czasu do czasu zwracamy się do głównego wątku, aby zapewnić przeglądarce dodatkowe możliwości wykonania pilnych czynności sprawi, że witryna będzie bardziej elastyczna, by zadbać o wygodę klientów. Nowsze interfejsy API do planowania takich jak scheduler.yield().

Specjalne podziękowania dla Jeremy'ego Wagnera, Barry'ego Pollarda i Housseina Djirdeha z tych organizacji Google i zespołu inżynierów firmy Trendyol.