Jak firma redBus poprawiła wskaźnik interakcji z interakcją do Next Paint (INP) i zwiększyła sprzedaż o 7%

Optymalizacje INP pomogły redBus zwiększyć sprzedaż o około 7%

Amit Kumar

Saurabh Rajpal

Internet i jego możliwości rozwijają się w szybkim tempie. Teraz możesz tworzyć bogate i w pełni funkcjonalne funkcje w internecie, które zapewniają znacznie więcej możliwości aplikacji natywnych.

JavaScript to główny czynnik zwiększający interaktywność w internecie, ale jeśli nie jest używany ostrożnie, interakcje mogą działać powolnie, przez co użytkownicy mogą uznać, że witryna nie odpowiada lub jest całkowicie uszkodzona. Na szczęście dane Interakcja z kolejnym wyrenderowaniem (INP) zostały opracowane w celu rozwiązania tego konkretnego problemu z wrażeniami użytkownika.

INP mierzy wszystkie interakcje ze stroną w trakcie jej cyklu życia i raportuje 1 wartość, która reprezentuje szybkość witryny w reagowaniu na dane wejściowe użytkownika. Mówiąc prościej, jeśli INP strony jest na poziomie dobrego progu lub niższym, wszystkie interakcje ze stroną można uznać za szybkie.

redBus, indyjska witryna umożliwiająca rezerwację biletów autobusowych i biletów, włożyła wiele wysiłku w poprawę wartości INP swojej strony, nawet w okresach, gdy nadal były one uważane za dane eksperymentalne. W rezultacie udało się zwiększyć sprzedaż o 7%, co po raz kolejny ilustruje zależność między wydajnością witryny a kondycją firmy. Zobacz, co zespół redBus polepszył wartość INP swojej strony.

Najważniejsze cele

Gdy firma redBus zdecydowała się zoptymalizować wartość INP swojej witryny, miała na celu 3 cele:

1. Zapewnij użytkownikom lepsze wrażenia, koncentrując się na opóźnieniach interakcji niezależnie od szybkości sieci i możliwości urządzenia.
2. Zoptymalizować witrynę, aby zapewnić jak najszybsze interakcje.
3. Odpowiedzi z interfejsu API powinny być jak najkrótsze, co pozwoli na szybkie przesyłanie danych do interfejsu.

Podróż

RedBus podzielił czas oczekiwania na interakcję na 2 sposoby:

1. Czas oczekiwania na interakcję spowodowany zablokowaniem JavaScriptu na kliencie. Gdy interakcje wykorzystują nadmierną ilość kodu JavaScript, który blokuje wątek główny, renderowanie jest opóźnione, co wpływa na wartość INP strony.
2. Opóźnienie w sieci spowodowane przez wywołania interfejsu API. Choć aktywność w sieci nie jest mierzona przez INP, interakcje zależne od wywołania zdalnego interfejsu API mogą działać wolniej przy wolniejszych sieciach lub wtedy, gdy żądania skutkują dużymi odpowiedziami.

Zespół redBus początkowo był przekonany, że wartość INP dla jego strony internetowej będzie odpowiednia, ale dane Real User Monitoring (RUM) dotyczące tych danych na 95. percentylu wskazują coś innego.

Jak zespół redBus mierzył INP

Zespół redBus korzystał z biblioteki JavaScript web-vitals opracowanej przez Google, aby śledzić nie tylko wartość INP, ale także wszystkie ważne dane dotyczące wrażeń użytkowników dotyczące wszystkich stron w witrynie. Oprócz biblioteki JavaScript web-vitals zespół redBus wykorzystał ELK do analizy danych INP zebranych w interfejsie.

Jednak sposób śledzenia wartości INP witryny w polu może się znacznie różnić od podejścia redBus do problemu. Zanim rozpoczniesz optymalizację interakcji, zdecydowanie zalecamy zapoznanie się z artykułem Jak znaleźć powolne interakcje w terenie, aby dowiedzieć się, jak najlepiej śledzić wartość INP w przypadku witryn oraz jak odtworzyć te interakcje w module.

Po wdrożeniu systemu do śledzenia INP zespół redBus mógł analizować dane, aby lepiej zrozumieć, gdzie występuje powolna interaktywność.

Przykłady zastosowań

Gdy użytkownicy szukają cen na stronie redBus, mogą zmienić datę na stronie wyszukiwania, aby przefiltrować wybrane ceny dla wybranego miejsca docelowego. Interakcja w celu zmiany daty na tej stronie była powolna i była przyczyną niskiej wartości INP.

Dodatkowo, gdy użytkownik przewija stronę, dodatkowe informacje o cenach są leniwie ładowane przez interfejs API. Choć samo przewijanie nie ma wpływu na pomiar INP, detektor zdarzeń scroll planuje dużo pracy do wykonania w wątku głównym. Spowodowało to rywalizację w głównym wątku, w wyniku czego wydłużył się czas oczekiwania na interakcję, co prowadziło do niskiej wartości INP na stronie wyszukiwania.

Jak zespół redBus zoptymalizował INP na stronie wyszukiwania

Aby poprawić wartość INP strony wyszukiwania, zespół redBus wprowadził kilka optymalizacji:

• Moduł obsługi zdarzeń scroll został odrzucony, aby zmniejszyć liczbę uruchomień wywołania zwrotnego zdarzenia w danym okresie. Dzięki zmniejszeniu częstotliwości, z jaką wywołania zwrotne zdarzenia scroll były uruchamiane, wątek główny był w stanie szybciej reagować na interakcje użytkowników na stronie wyszukiwania.
• Powstały w ten sposób proces renderowania został nadany priorytetowi przy użyciu wywołania zwrotnego requestAnimationFrame. requestAnimationFrame informuje przeglądarkę, że zadanie w wywołaniu zwrotnym musi zostać wykonane przed następną ramką.

Dodatkowo wprowadziliśmy następujące optymalizacje strony wyników wyszukiwania:

• Nowe partie wyników zostały pobrane od drugiej do ostatniej karty na stronie wyników wyszukiwania, aby zwiększyć wygodę użytkowników i wydajność wizualną dzięki wcześniejszemu wyzwalaniu leniwego ładowania.
• Podczas leniwego ładowania w każdym wywołaniu sieciowym była pobierana mniej wyników. Po zmniejszeniu liczby pobrań z 30 do 10 zaobserwowano zmniejszenie wartości INP w zakresie od 870 do 900 do 350–370.

Wprowadzenie tych zmian znacznie poprawiło wartość INP strony wyszukiwania, jednak pojawił się problem polegający na tym, że zdarzenie change w polach do wprowadzania danych na stronie wyszukiwania powodowało wywołanie drogiej funkcji redukcji w celu zaktualizowania interfejsu. Spowodowało to niepotrzebne ponowne renderowanie interfejsu, co wpłynęło na wartość INP strony.

Aby zoptymalizować tę interakcję, zespół redBus zarządzał stanem komponentów danych wejściowych lokalnie i synchronizował go z magazynem Redux tylko po uruchomieniu zdarzenia blur dotyczącego danych wejściowych. Ta zmiana zmniejszyła liczbę ponownych renderowań i wyeliminowała niechciane ponowne renderowanie interfejsu dzięki rzadszemu wywoływaniu redukcji.

Dzięki tej zmianie wartość INP strony poprawiła się o 72%, co przełożyło się na szybsze i wygodniejsze wrażenia użytkownika.

Skutki biznesowe

Związek między stanem firmy a wydajnością strony jest dobrze znany. Chociaż INP jest stosunkowo nowym wskaźnikiem w porównaniu z innymi podstawowymi wskaźnikami internetowymi, redBus zaobserwował lepsze wyniki biznesowe, skupiając się na poprawie tych ważnych wskaźników skuteczności zorientowanych na użytkownika. W rezultacie zwiększono sprzedaż o 7%.

Krótko mówiąc, INP pomogło stworzyć obraz problemów z wydajnością w czasie działania witryny redBus. Wiedząc, że trzeba wprowadzić ulepszenia, firma redBus była w stanie przeanalizować problem, odtworzyć go i wykorzystać te kluczowe informacje do wprowadzenia optymalizacji, które przyniosły firmie redBus i jej firmie korzyści.