To studium przypadku opisuje krok po kroku proces debugowania i ulepszania wartości INP w React, której używa Trendyol, przy użyciu narzędzi Google takich jak PageSpeed Insights (PSI), Chrome DevTools i scheduler.yield API.
Dwa kluczowe komponenty każdej witryny e-commerce to strona z informacjami o produkcie (PLP) i strona z informacjami o produkcie. Ruch e-commerce pochodzi często ze stron z informacjami o produktach: kampanii e-mailowych, mediów społecznościowych lub reklam. Dlatego tak ważne jest, aby dopracować środowisko PLP tak, by skrócić czas potrzebny na dokonanie zakupu. W osiągnięciu sukcesu kluczowe jest priorytetowe traktowanie wygody użytkowników. Publikacje badawcze takie jak Milliseconds Make Millions pokazują już, jak duży wpływ ma wydajność witryn internetowych na gotowość konsumentów do wydania pieniędzy i interakcji z markami w internecie.
Trendyol to platforma e-commerce, która ma około 30 milionów klientów i 240 tys. sprzedawców. To sprawiło, że staliśmy się pierwszą firmą w Turcji, której wartość wyceniana jest na ponad 10 miliardów dolarów, i jest jedną z najlepszych platform e-commerce na świecie.
Aby osiągnąć swój cel, jakim jest zapewnienie użytkownikom jak najlepszych wrażeń, przy zachowaniu elastyczności treści i współpracy ze starszą wersją systemu React, firma Trendyol skupiła się na interakcji z kolejnym wyrenderowaniu (INP) jako kluczowym wskaźniku do poprawy. To studium przypadku opisuje, jak firma Trendyol podjęła próbę zwiększenia wartości INP w swojej witrynie, co doprowadziło do obniżenia tego wskaźnika o 50% i wzrostu wskaźnika biznesowego w wynikach wyszukiwania o 1% .
Proces analizy INP firmy Trendyol
INP mierzy responsywność witryny w odniesieniu do danych wejściowych użytkownika. Dobry INP oznacza, że przeglądarka jest w stanie szybko i niezawodnie reagować na wszystkie dane wejściowe użytkownika oraz ponownie wyrenderować stronę, co ma kluczowe znaczenie dla wygody użytkowników.
Droga Trendyol do poprawy INP w PLP rozpoczęła się od dogłębnej analizy wrażeń użytkowników przed wprowadzeniem jakichkolwiek ulepszeń. Z raportu PSI wynika, że wartość INP rzeczywistej platformy PLP wyniosła 963 milisekundy w przypadku urządzeń mobilnych, jak widać na następnym wykresie.
Aby zapewnić dobre responsywność, właściciele witryn powinni dążyć do wartości INP poniżej lub 200 milisekund. Oznacza to, że w tym czasie wartość INP Trendyol znajdowała się w zakresie „słaby”.
Na szczęście PSI udostępnia dane z obu pól w przypadku stron uwzględnionych w raporcie na temat użytkowania Chrome (CrUX) oraz szczegółowe dane diagnostyczne laboratorium. Podczas kontroli czasu wykonywania kodu JavaScript w Lighthouse stwierdzono, że skrypt search-result-v2 zajmował główny wątek dłużej niż inne skrypty na stronie.
Aby zidentyfikować rzeczywiste wąskie gardła, użyliśmy panelu wydajności w Narzędziach deweloperskich w Chrome do rozwiązywania problemów z interfejsem PLP i identyfikowania źródła problemu. Emulacja wydajności na urządzeniach mobilnych z 4-krotnym spowolnieniem procesora w Narzędziach deweloperskich w Chrome pokazała zadanie o długości 700–900 milisekund w wątku głównym. Jeśli wątek główny jest zajęty innymi zadaniami przez ponad 50 milisekund, może nie być w stanie w odpowiednim czasie reagować na dane wejściowe użytkownika, co źle wpływa na jego wygodę.
Najdłuższe zadanie zostało spowodowane przez wywołanie zwrotne Intersection Observer API w skrypcie wyników wyszukiwania w komponencie React. W tym momencie zaczęliśmy zastanawiać się nad podzieleniem długiego zadania na mniejsze fragmenty, by przeglądarka miała więcej możliwości reagowania na zadania o wyższym priorytecie, w tym interakcje użytkowników.
Okazuje się, że użycie operacji setState, która wywołuje ponowne renderowanie React w wywołaniu zwrotnym Intersection Observer, wiąże się z wysokimi kosztami, co może stanowić problem w przypadku słabszych urządzeń, ponieważ zbyt długo zajmuje główny wątek.
Jedna z metod używanych przez programistów do dzielenia zadań na mniejsze zadania obejmuje setTimeout. Zastosowaliśmy tę metodę, aby opóźnić wykonanie wywołania setState i odłożyć je na osobne zadanie. Chociaż setTimeout umożliwia odroczenie wykonania JavaScriptu, nie zapewnia żadnej kontroli nad priorytetem. Dlatego wzięliśmy udział w testowaniu origin scheduler.yield, aby zagwarantować kontynuację wykonywania 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 uzyskiwania do kodu PLP spowodowało poprawę INP, ponieważ główne długie zadanie zostało podzielone na kilka mniejszych, dzięki czemu praca o wyższym priorytecie, np. interakcje użytkowników i późniejsze renderowanie, może zostać wykonana szybciej, niż miałoby to miejsce w innym przypadku.
Pamiętaj, że Trendyol używa platformy PuzzleJs do implementacji architektury mikrofrontendu w React w wersji 16.9.0. Dzięki Reactowi 18 można osiągnąć taką samą skuteczność, ale z wielu powodów Trendyol nie może obecnie przeprowadzić uaktualnienia.
Wyniki biznesowe
Aby zmierzyć wpływ wdrożonego ulepszenia wartości INP, przeprowadziliśmy test A/B. W ten sposób sprawdzimy, jak wpłynie to na wskaźniki biznesowe. Zmiany w PLP zaowocowały znaczącą poprawą, m.in. obniżeniem wartości INP o 50% oraz 1-procentowym wzrostem współczynników klikalności ze strony z informacjami na stronę z informacjami o produkcie na sesję użytkownika. Na tym rysunku widać, jak na przestrzeni czasu poprawiał się INP wartości PLP:
Podsumowanie
Optymalizacja INP to skomplikowany i powtarzający się proces, ale można go ułatwić dzięki przejrzystemu przepływowi pracy. Proste podejście do debugowania i ulepszania wartości INP witryny zależy od tego, czy zbierasz własne dane pól. Jeśli nie, zacznij od PSI i Lighthouse. Po wykryciu stron z problemami możesz skorzystać z Narzędzi deweloperskich, aby przeprowadzić dokładniejszą analizę i spróbować odtworzyć problemy.
Od czasu do czasu odwiedzanie głównego wątku, aby dać przeglądarce więcej możliwości wykonania pilnych czynności, sprawi, że witryna będzie bardziej responsywna i zapewni klientom lepsze wrażenia. To zadanie ułatwiają nowe interfejsy API do planowania, takie jak scheduler.yield().
Specjalne podziękowania dla Jeremy'ego Wagnera, Barry'ego Pollarda i Husseina Djirdeha z Google oraz zespołu inżynierów Trendyol za ich wkład w tę pracę.