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

Optymalizacja INP pomogła firmie redBus zwiększyć sprzedaż o około 7%

Amit Kumar

Saurabh Rajpal

Internet i jego możliwości rozwijają się w bardzo szybkim tempie. Możesz teraz tworzyć w internecie bogate i pełne możliwości rozwiązania, które pod względem funkcji są zbliżone do natywnych aplikacji.

JavaScript jest głównym czynnikiem interakcji w internecie, ale jeśli nie jest używany ostrożnie, interakcje mogą być powolne, a użytkownicy mogą odnieść wrażenie, że Twoja witryna jest nieresponsywna lub całkowicie uszkodzona. Na szczęście wskaźnik interakcji do kolejnego wyrenderowania (INP) został stworzony, aby rozwiązać ten konkretny problem związany z wygodą użytkowników.

INP mierzy wszystkie interakcje z witryną w trakcie jej cyklu życia i podaje jedną wartość, która odzwierciedla szybkość reakcji witryny na dane wejściowe użytkownika. Krótko mówiąc, jeśli INP strony jest na poziomie dobrego progu lub poniżej niego, można uznać, że wszystkie interakcje z taką stroną są niezawodnie szybkie.

redBus, indyjska witryna do rezerwacji i kupowania biletów na autobusy, włożyła wiele wysiłku w poprawę INP swojej witryny, nawet wtedy, gdy wskaźnik ten był jeszcze uznawany za eksperymentalny. Dzięki temu firma mogła zwiększyć sprzedaż o 7%, co po raz kolejny pokazuje związek między wydajnością witryny a wydajnością firmy. Oto, co firma redBus zrobiła, aby poprawić INP swojej witryny.

Najważniejsze cele

Gdy firma redBus zaczęła optymalizować INP swojej witryny, miała na myśli 3 cele:

1. Zadbaj o wygodę użytkowników, skupiając się na opóźnieniu interakcji niezależnie od szybkości sieci i możliwości urządzenia.
2. Optymalizowanie witryny, aby interakcje były jak najszybsze.
3. Upewnij się, że odpowiedzi z ich interfejsu API są jak najlżejsze, aby zapewnić szybki transfer danych do front-endu.

Podróż

redBus podzielił opóźnienia interakcji na 2 rodzaje:

1. Czas oczekiwania na interakcję spowodowany blokowaniem kodu JavaScript na kliencie. Gdy interakcje używają nadmiernej ilości kodu JavaScript, który blokuje wątek główny, renderowanie jest opóźnione, co wpływa na INP strony.
2. Opóźnienia w sieci spowodowane wywołaniami interfejsu API. Chociaż aktywność sieci nie jest mierzona przez INP, interakcja polegająca na wywołaniu zdalnego interfejsu API może być powolna w przypadku wolniejszych sieci lub jeśli żądania powodują duże odpowiedzi.

Firma redBus początkowo była przekonana, że INP jej witryny będzie dobry, ale dane monitorowania rzeczywistych użytkowników (RUM) dotyczące tego wskaźnika w 95. percentylu mówiły coś innego.

Jak redBus mierzył INP

redBus korzystał z biblioteki JavaScript web-vitals opracowanej przez Google, aby śledzić nie tylko INP, ale wszystkie ważne wskaźniki dotyczące wrażeń użytkowników na wszystkich stronach w witrynie. Oprócz biblioteki JavaScript web-vitals firma redBus używała narzędzia ELK do analizowania danych INP zebranych w interfejsie.

Jednak sposób śledzenia INP witryny w praktyce może się znacznie różnić od podejścia redBusa. Zanim zaczniesz optymalizować interakcje, zalecamy zapoznanie się z artykułem Jak znaleźć powolne interakcje w praktyce, aby dowiedzieć się, jak najlepiej śledzić INP w swoich witrynach, a następnie jak odtworzyć je w laboratorium.

Gdy redBus wdrożył system śledzenia INP, mógł analizować dane, aby lepiej zrozumieć, gdzie występuje niska interaktywność.

Zrzut ekranu systemu rejestrowania używanego przez redBus do analizowania wartości INP zebranych z pola. (kliknij, aby zobaczyć wersję tego obrazu w wyższej rozdzielczości)

Przypadki użycia

Gdy użytkownicy szukają cen biletów w witrynie redBus, mogą zmienić datę na stronie wyszukiwania, aby filtrować wybrane ceny dla wybranego miejsca docelowego. Interakcja polegająca na zmianie daty na tej stronie była wolna i była przyczyną niskiego INP.

Dodatkowo, gdy użytkownik przewija ceny, dodatkowe ceny są ładowane z interfejsu API z opóźnieniem. Chociaż samo przewijanie nie jest uwzględniane w sposobie pomiaru INP, sam odbiorca zdarzeń scroll planuje wiele zadań, które muszą być wykonywane w wątku głównym. Te działania powodowały konflikty w wątku głównym, co zwiększało opóźnienie interakcji i prowadziło do niskiej wartości INP na stronie wyszukiwania.

Zachowanie opóźnionego wczytywania służące do wczytywania dodatkowych cen z interfejsu API podczas przewijania. (kliknij, aby wyświetlić wersję tego filmu w wyższej rozdzielczości)

Jak redBus zoptymalizował INP na stronie wyszukiwania

Aby poprawić INP na stronie wyszukiwania, redBus wprowadził kilka optymalizacji:

• Obsługa zdarzenia scroll została opóźniona, aby zmniejszyć liczbę wywołań funkcji wywołania zwrotnego zdarzenia w danym okresie. Dzięki zmniejszeniu częstotliwości wywoływania funkcji zwrotnej zdarzenia scroll wątek główny mógł szybciej reagować na interakcje użytkowników na stronie wyszukiwania.
• Wynik renderowania został przypisany do priorytetu za pomocą wywołania zwrotnego requestAnimationFrame. requestAnimationFrame informuje przeglądarkę, że zadanie w wywołaniu zwrotnym musi zostać wykonane przed wyświetleniem następnej klatki.

Przed: moduły obsługi przewijania wywoływane bez zastosowania debouncingu do wywołania zwrotnego zdarzenia. Wątek główny zawiera znaczną liczbę zadań blokujących, które opóźniają interakcje.

Po zmianie: wywołanie obsługi przewijania z zastosowaniem debouncingu. Zwróć uwagę, że wywołania zwrotne zdarzenia przewijania są wywoływane rzadziej, co daje głównemu wątkowi więcej możliwości reagowania na interakcje użytkownika.

Dodatkowo na stronie wyników wyszukiwania wprowadzono następujące optymalizacje:

• Nowe partie wyników były pobierane na przedostatniej karcie na stronie wyników wyszukiwania, aby poprawić wygodę użytkowników i wydajność wizualną poprzez wcześniejsze uruchamianie ładowania opóźnionego.
• Podczas leniwego wczytywania pobierano mniej wyników w przypadku każdego wywołania sieci. Po zmniejszeniu liczby pobieranych wyników z 30 do 10 obserwowano zmniejszenie zakresów INP z 870–900 do 350–370.

Zachowanie polegające na ładowaniu dodatkowych cen z interfejsu API podczas przewijania. (kliknij, aby wyświetlić wersję tego filmu w wyższej rozdzielczości)

Chociaż te zmiany znacznie poprawiły INP strony wyszukiwania, nadal występował problem polegający na tym, że zdarzenie change w polach wejściowych na stronie wyszukiwania wywoływało kosztowną funkcję reduktora w celu zaktualizowania interfejsu użytkownika. Spowodowało to niepotrzebne ponowne renderowanie interfejsu użytkownika, co wpłynęło na INP strony.

W konsoli rejestrowane są wartości INP, gdy użytkownik wpisują coś w polu tekstowym. Wynik 344 punktów INP uzyskany w sytuacji laboratoryjnej mieści się w progach „wymaga poprawy”. (kliknij, aby wyświetlić wersję tego filmu w wyższej rozdzielczości)

Aby zoptymalizować tę interakcję, redBus zarządzał stanem komponentów wejściowych lokalnie i synchronizował go ze sklepem Redux tylko wtedy, gdy zostało wyzwolone zdarzenie blur wejścia. Ta zmiana zmniejszyła liczbę ponownych renderowań i wyeliminowała niechciane ponowne renderowanie interfejsu użytkownika dzięki rzadszemu wywoływaniu reduktora.

Lepsza wydajność INP dzięki rzadszemu wywoływaniu funkcji redukującej po zmianie pola wejściowego. (kliknij, aby wyświetlić wersję tego filmu w wyższej rozdzielczości)

Dzięki tej zmianie INP strony wzrósł o 72%, co oznacza szybsze i płynniejsze działanie, które jest bardziej przyjazne użytkownikom i zachęca ich do interakcji.

Wpływ na firmę

Związek między kondycją firmy a skutecznością strony jest dobrze znany. Chociaż INP jest stosunkowo nowym wskaźnikiem w porównaniu z innymi podstawowymi wskaźnikami internetowymi, firma redBus dzięki skupieniu się na poprawie tego ważnego wskaźnika wydajności związanego z użytkownikami osiągnęła lepsze wyniki biznesowe. W wyniku sprzedaży wzrosła o 7%.

Krótko mówiąc, INP pomogła w zidentyfikowaniu problemów z wydajnością w czasie działania w witrynie redBus. Wiedząc, że konieczne są ulepszenia, redBus mógł obserwować problem, odtworzyć go i wykorzystać te kluczowe informacje do optymalizacji, które przyniosły korzyści redBusowi i jego firmie.