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 funkcjonalności mogą osiągnąć wiele z tego, co potrafią natywne aplikacje.

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 wrażeniami użytkownika.

INP mierzy wszystkie interakcje z witryną w trakcie jej cyklu życia i podaje jedną wartość, która odzwierciedla szybkość reakcji witryny na działania użytkowników. 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 redBus postanowił zoptymalizować INP swojej witryny, miał 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. Optymalizuj witrynę, 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 zależna od wywołania 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żyła narzędzia ELK do analizy 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 informacjami o wykrywaniu powolnych interakcji w praktyce, aby dowiedzieć się, jak najlepiej śledzić INP w swoich witrynach, a następnie jak odtwarzać je w laboratorium.

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

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ż 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, prowadząc do niskiej wartości INP na stronie wyszukiwania.

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.
• Wygenerowane renderowanie zostało potraktowane priorytetowo 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.

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 uruchomienie ł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.

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.

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.

Dzięki tej zmianie INP strony wzrósł o 72%, co oznacza szybsze i płynniejsze działanie, które zwiększa zaangażowanie użytkowników.

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żytkownikiem 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, firma redBus mogła obserwować problem, odtworzyć go i wykorzystać te kluczowe informacje do optymalizacji, które przyniosły korzyści jej i jej klientom.