Ręczne diagnozowanie powolnych interakcji w module

Dowiedz się, jak przenosić dane z pola do laboratorium, aby odtworzyć i zidentyfikować ręcznie przyczyny powolnego działania interakcji.

Jeremy Wagner

Data publikacji: 9 maja 2023 r.

Wyzwaniem podczas optymalizacji interakcji do kolejnego wyrenderowania (INP) jest ustalenie, co powoduje niską wartość INP. Istnieje wiele potencjalnych przyczyn, takich jak skrypty innych firm, które przypisują wiele zadań do wątku głównego, duże rozmiary DOM, kosztowne wywołania zwrotne zdarzeń i inne czynniki.

Poprawa INP może być trudna. Na początek musisz wiedzieć, które interakcje zwykle wpływają na INP strony. Jeśli nie wiesz, które interakcje w Twojej witrynie są zwykle najwolniejsze z perspektywy rzeczywistego użytkownika, przeczytaj artykuł Znajdowanie wolnych interakcji w polu. Gdy już masz dane z pola, możesz ręcznie testować konkretne interakcje w narzędziach testowych, aby dowiedzieć się, dlaczego są one powolne.

Co zrobić, jeśli nie masz danych z pola?

Dane z pola są bardzo ważne, ponieważ oszczędzają czas potrzebny na ustalenie, które interakcje należy zoptymalizować. Może się jednak zdarzyć, że nie masz danych z pola. Jeśli tak jest w Twoim przypadku, nadal możesz znaleźć interakcje, które warto ulepszyć, ale wymaga to nieco więcej wysiłku i innego podejścia.

Całkowity czas blokowania (TBT) to wskaźnik laboratoryjny, który ocenia responsywność strony podczas wczytywania. Wykazuje on dobrą korelację z INP. Jeśli TBT Twojej strony jest wysoki, może to być sygnał, że podczas wczytywania strony może ona nie reagować odpowiednio na interakcje użytkownika.

Aby określić TBT strony, możesz użyć Lighthouse. Jeśli TBT strony jest wysoki, istnieje prawdopodobieństwo, że wątek główny jest zbyt zajęty podczas wczytywania strony, co może wpłynąć na jej responsywność w tym kluczowym momencie jej cyklu życia.

Aby znaleźć powolne interakcje po załadowaniu strony, możesz potrzebować innych typów danych, np. typowych ścieżek użytkowników, które możesz już mieć zidentyfikowane w statystykach witryny. Jeśli np. pracujesz nad witryną e-commerce, typowym działaniem użytkownika będzie dodawanie produktów do koszyka i płatność.

Niezależnie od tego, czy masz dane z pola, kolejnym krokiem jest ręczne testowanie i powtarzanie wolnych interakcji, ponieważ tylko wtedy, gdy uda Ci się odtworzyć wolną interakcję, możesz ją naprawić.

Odtworzenie powolnych interakcji w laboratorium

Istnieje kilka sposobów na odtworzenie powolnego działania w laboratorium podczas testów ręcznych, ale poniżej znajdziesz ramy, które możesz wypróbować.

Dane na żywo w panelu Wydajność w Narzędziach deweloperskich

Profil narzędzia DevTools do analizy wydajności to zalecane podejście do diagnozowania interakcji, które są powolne, ale znalezienie wolnych interakcji może zająć trochę czasu, jeśli nie wiesz, które z nich są problemowe.

Gdy po raz pierwszy otworzysz panel Skuteczność, zobaczysz widok danych na żywo. Dzięki temu możesz szybko wypróbować różne interakcje, aby znaleźć te problematyczne, zanim przejdziesz do bardziej szczegółowego profilowania wydajności. W miarę nawiązywania interakcji dane diagnostyczne będą pojawiać się w dzienniku interakcji (z wyróżnioną interakcją INP). Te interakcje można rozwinąć, aby uzyskać podział na etapy:

Widok danych na żywo pomaga wykrywać powolne interakcje i zawiera pewne szczegóły, które ułatwiają debugowanie INP, ale do diagnozowania powolnych interakcji może być konieczne użycie narzędzia do profilowania wydajności, ponieważ zawiera ono szczegółowe dane, których potrzebujesz do poruszania się po kodzie produkcyjnym witryny w celu znalezienia przyczyny powolnych interakcji.

Rejestrowanie ścieżki

Profil narzędzia do pomiaru wydajności w Chrome to zalecane narzędzie do diagnozowania i rozwiązywania problemów z powolną interakcją. Aby przeprowadzić profilowanie interakcji w profilu wydajności Chrome:

1. Otwórz stronę, którą chcesz przetestować.
2. Otwórz Narzędzia deweloperskie w Chrome i otwórz panel Wydajność.
3. Aby rozpocząć śledzenie, w lewym górnym rogu panelu kliknij przycisk Rejestruj.
4. Wykonaj interakcje, które chcesz sprawdzić.
5. Aby zatrzymać śledzenie, kliknij ponownie przycisk Rejestrowanie.

Gdy profilowanie się wypełni, najpierw sprawdź podsumowanie aktywności u góry profilu. Podsumowanie aktywności zawiera czerwone paski u góry, które wskazują miejsca w nagraniu, w których wystąpiły długie zadania. Dzięki temu możesz szybko powiększać problematyczne obszary.

Możesz szybko skupić się na obszarach problemowych, przeciągając i wybierając region w podsumowaniu aktywności. Opcjonalnie możesz użyć w profilu funkcji ścieżki nawigacyjnej, aby zawęzić zakres osi czasu i ignorować niezwiązaną aktywność.

Gdy skupisz się na miejscu, w którym nastąpiła interakcja, ścieżka Interakcje pomoże Ci dopasować interakcję do aktywności, która nastąpiła w głównej ścieżce wątku:

Aby dowiedzieć się, która część interakcji trwała najdłużej, najedź na nią kursorem na ścieżce interakcji:

Paskowa część interakcji pokazuje, o ile czas interakcji przekroczył 200 ms, czyli górną granicę „dobrego” progu INP strony. Wyszczególnione części interakcji to:

1. Opóźnienie wejściowe – wizualizowane przez lewy wąs.
2. Czas przetwarzania – wizualizowany przez blok między lewym a prawym whiskerem.
3. Opóźnienie prezentacji – wizualizowane przez prawy ogonek.

Teraz musisz dokładniej zbadać problemy, które powodują spowolnienie interakcji. Omówimy je w dalszej części tego przewodnika.

Jak określić, która część interakcji jest powolna

Interakcje składają się z 3 części: opóźnienia wejścia, czasu przetwarzania i opóźnienia wyświetlania. Sposób optymalizacji interakcji w celu obniżenia INP strony zależy od tego, która część zajmuje najwięcej czasu.

Jak wykrywać długie opóźnienia w wejściu

Opóźnienia w przyjmowaniu danych mogą powodować długi czas oczekiwania na interakcję. Opóźnienie przy pierwszym działaniu to pierwsza część interakcji. Jest to okres od momentu, w którym system operacyjny po raz pierwszy otrzyma działanie użytkownika, do momentu, w którym przeglądarka może rozpocząć przetwarzanie pierwszego wywołania obsługi zdarzenia.

Opóźnienia w wprowadzaniu danych można wykrywać w profilu wydajności Chrome, znajdując interakcję na ścieżce interakcji. Długość wąsa po lewej stronie wskazuje część opóźnienia wejścia interakcji, a dokładną wartość można znaleźć w etykietce, najeżdżając na interakcję w profilu wydajności.

Opóźnienia wejścia nigdy nie mogą być równe 0, ale masz pewną kontrolę nad tym, jak długie będzie opóźnienie. Najważniejsze jest ustalenie, czy w wątku głównym nie jest wykonywana jakaś praca, która uniemożliwia wywołanie funkcji zwrotnych w chwilę, w której powinny zostać wykonane.

Na poprzednim rysunku, gdy użytkownik próbuje wejść w interakcję ze stroną, wykonywane jest zadanie ze skryptu zewnętrznego, co wydłuża opóźnienie wprowadzania danych. Wydłużone opóźnienie wprowadzania danych wpływa na opóźnienie interakcji, a co za tym idzie, może wpływać na INP strony.

Jak zidentyfikować długi czas przetwarzania

Funkcja wywołania zwrotnego zdarzenia jest wykonywana natychmiast po opóźnieniu wejścia, a czas jej wykonania to czas przetwarzania. Jeśli wywołania zwrotne zdarzeń trwają zbyt długo, opóźniają wyświetlanie kolejnej klatki w przeglądarce i mogą znacznie wydłużyć całkowity czas opóźnienia interakcji. Długi czas przetwarzania może być spowodowany przez kosztowne obliczenia kodu JavaScript własnego lub zewnętrznego, a w niektórych przypadkach przez oba te czynniki. W profilu wydajności jest to reprezentowane przez solidną część interakcji na ścieżce interakcji.

Aby znaleźć kosztowne wywołania zwrotne zdarzeń, sprawdź w śladzie konkretnej interakcji:

1. Określ, czy zadanie powiązane z wywołaniami zdarzeń jest długim zadaniem. Aby w sytuacji laboratoryjnej móc wiarygodniej wykrywać długie zadania, konieczne może być włączenie ograniczania procesora w panelu wydajności lub podłączenie urządzenia z Androidem o niskiej lub średniej klasy i użycie debugowania zdalnego.
2. Jeśli zadanie, które wywołuje zdarzenia zwrotne, jest długie, w zbiorze wywołań odszukaj wpisy typu Zdarzenie: kliknięcie, które w prawym górnym rogu mają czerwony trójkąt.

Aby skrócić czas przetwarzania interakcji, możesz wypróbować jedną z tych strategii:

1. Zrób jak najmniej pracy. Czy wszystko, co dzieje się w drodze wywołania zwrotnego kosztownego zdarzenia, jest absolutnie niezbędne? Jeśli nie, rozważ całkowite usunięcie tego kodu lub odłożenie jego wykonania na późniejszy czas. Możesz też skorzystać z funkcji frameworku. Na przykład funkcja zapamiętywania w React może pomijać niepotrzebne renderowanie komponentu, gdy jego atrybuty się nie zmieniły.
2. Odrzuć zadania niewymagające renderowania w obsługi zdarzeń na później. Długie zadania można podzielić, przekazując je do wątku głównego. Gdy oddajesz kontrolę nad wątkiem głównemu wątkowi, kończysz wykonywanie bieżącego zadania i przekazujesz pozostałą część pracy do osobnego zadania. Daje to możliwości przetworzenia zaktualizowanego interfejsu użytkownika, które zostały wykonane wcześniej w ramach wywołania zwrotnego zdarzenia. Jeśli używasz React, możesz skorzystać z funkcji przejść.

Te strategie powinny pomóc Ci zoptymalizować wywołania zwrotne zdarzeń, aby zajmowały mniej czasu.

Jak wykryć opóźnienia w prezentacji

Długie opóźnienia w dostarczaniu danych i długi czas przetwarzania nie są jedynymi przyczynami niskiej skuteczności INP. Czasami aktualizacje renderowania, które występują w odpowiedzi na nawet niewielkie ilości kodu wywołania zdarzenia, mogą być kosztowne. Czas potrzebny przeglądarce na renderowanie wizualnych zmian w interfejsie użytkownika, aby odzwierciedlić wynik interakcji, nazywany jest opóźnieniem wyświetlania.

Praca związana z renderowaniem polega najczęściej na wykonywaniu zadań takich jak ponowne obliczanie stylu, układ, malowanie i kompozycja. W tabeli osiowej profilu te zadania są oznaczone fioletowymi i zielonymi blokami. Całkowity opóźnienie wyświetlania jest reprezentowane przez prawy wąs interakcji na ścieżce interakcji.

Spośród wszystkich możliwych przyczyn długiego czasu oczekiwania na interakcję opóźnienia w prezentacji mogą być najtrudniejsze do rozwiązania. Nadmierne renderowanie może być spowodowane przez:

• Duże rozmiary DOM. Ilość renderowania wymagana do aktualizacji strony często wzrasta wraz z rozmiarem DOM strony. Więcej informacji znajdziesz w artykule Wpływ rozmiaru DOM na interaktywność i sposoby na poprawę tej sytuacji.
• Wymuszone przeformatowania. Dzieje się tak, gdy stosujesz zmiany stylu do elementów w JavaScript, a następnie od razu wysyłasz zapytanie o wyniki tej pracy. Oznacza to, że przeglądarka musi najpierw wykonać pracę związaną z układem, aby mogła zwrócić zaktualizowane style. Więcej informacji i wskazówek dotyczących unikania wymuszonych przepływów znajdziesz w artykule Unikanie dużych, złożonych układów i przeciążeń układu.
• Nadmierna lub niepotrzebna praca w ramach wywołań zwrotnych requestAnimationFrame. requestAnimationFrame() wywołania zwrotne są wykonywane podczas fazy renderowania pętli zdarzeń i muszą zostać zakończone, zanim zostanie wyświetlony następny kadr. Jeśli używasz requestAnimationFrame() do wykonywania zadań, które nie wymagają wprowadzania zmian w interfejsie, możesz opóźnić wyświetlanie następnego klatki.
• ResizeObserver wywołań zwrotnych. Takie wywołania są wykonywane przed renderowaniem i mogą opóźnić prezentację następnego klatki, jeśli wymagają dużych nakładów pracy. Podobnie jak w przypadku wywołań zwrotnych zdarzeń, odłóż na później wszystkie działania, które nie są potrzebne w następnym klatce.

Co zrobić, jeśli nie możesz odtworzyć problemu z powolnym działaniem?

Co zrobić, jeśli dane z pola wskazują, że dana interakcja jest powolna, ale nie możesz ręcznie odtworzyć problemu w laboratorium? Może to być spowodowane kilkoma czynnikami, ale jednym z najważniejszych jest to, że okoliczności, w których testujesz interakcje, zależą od sprzętu i połączenia sieciowego. Możesz używać szybkiego urządzenia z szybkim połączeniem, ale nie oznacza to, że Twoi użytkownicy mają takie urządzenia. Jeśli dotyczy Cię ta sytuacja, możesz spróbować wykonać jedną z tych 3 czynności:

1. Jeśli masz fizyczne urządzenie z Androidem, użyj debugowania zdalnego, aby otworzyć instancję Chrome DevTools na komputerze hosta i spróbować odtworzyć na nim powolne interakcje. Urządzenia mobilne są często mniej wydajne niż laptopy czy komputery stacjonarne, więc na tych urządzeniach wolne interakcje mogą być bardziej widoczne.
2. Jeśli nie masz urządzenia fizycznego, włącz funkcję ograniczania procesora w zestawie narzędzi Chrome DevTools.
3. Może się zdarzyć, że Ty czekasz na załadowanie strony przed podjęciem z nią interakcji, ale użytkownicy nie. Jeśli korzystasz z szybkiej sieci, symuluj wolniejsze warunki sieciowe, włączając ograniczenie wykorzystania sieci, a następnie wejdź na stronę i zacznij z niej korzystać. Powinieneś to zrobić, ponieważ główny wątek jest często najbardziej obciążony podczas uruchamiania, a testowanie w tym czasie może ujawnić problemy użytkowników.

Rozwiązywanie problemów z INP jest procesem iteracyjnym

Ustalenie, co powoduje długi czas oczekiwania na interakcję, który wpływa na niski współczynnik INP, wymaga dużo pracy, ale jeśli uda Ci się znaleźć przyczyny, będziesz już w połowie drogi. Stosując metodyczne podejście do rozwiązywania problemów z niską wartością INP, możesz dokładnie określić, co jest przyczyną problemu, i szybciej znaleźć odpowiednie rozwiązanie. Do sprawdzenia:

• Aby znaleźć powolne interakcje, korzystaj z danych z pola.
• Ręcznie przetestuj problemowe interakcje w laboratorium, aby sprawdzić, czy można je odtworzyć.
• Sprawdź, czy przyczyną jest długie opóźnienie danych wejściowych, kosztowne wywołania zdarzeń czy kosztowne renderowanie.
• Powtórz.

Ostatni z nich jest najważniejszy. Podobnie jak w przypadku większości innych działań mających na celu poprawę wydajności strony, rozwiązywanie problemów i ulepszanie INP to proces cykliczny. Po poprawieniu jednej interakcji przejdź do następnej i powtarzaj tę czynność, aż zaczniesz dostrzegać efekty.