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.

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 odpowiadają za 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ć narzędzia 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żytkownika, które mogły zostać już zidentyfikowane w statystykach witryny. Jeśli np. pracujesz nad witryną e-commerce, typowym scenariuszem użytkownika może być 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 można je naprawić.

Odtworzenie powolnych interakcji w laboratorium

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

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 wolno działających interakcji może zająć trochę czasu, jeśli nie wiesz, które z nich są problemowe.

Gdy jednak otworzysz panel Skuteczność po raz pierwszy, 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:

Rozszerzenie Web Vitals pomaga wykrywać powolne interakcje i zawiera szczegółowe informacje ułatwiające debugowanie INP, ale do diagnozowania powolnych interakcji może być konieczne użycie narzędzia do profilowania wydajności, które zawiera szczegółowe dane potrzebne do nawigacji 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 rozwiązać.
5. Aby zatrzymać śledzenie, ponownie kliknij 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 wąs.

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 działanie użytkownika zostało po raz pierwszy odebrane przez system operacyjny, do momentu, w którym przeglądarka może rozpocząć przetwarzanie pierwszego wywołania obsługi zdarzenia.

Opóźnienia w wprowadzaniu danych możesz wykrywać w profilu wydajności Chrome, znajdując interakcję na ścieżce interakcji. Długość wąsa po lewej stronie wskazuje część opóźnienia wprowadzania danych w ramach interakcji. 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ługo będzie trwało opóźnienie wejścia. Najważniejsze jest ustalenie, czy w wątku głównym nie jest wykonywane zadanie, które uniemożliwia wywołania zwrotne działać tak szybko, jak powinny.

Na poprzednim rysunku zadanie ze skryptu zewnętrznego jest wykonywane, gdy użytkownik próbuje wchodzić w interakcję ze stroną, przez co wydłuża się 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 rozpoznać długi czas przetwarzania

Obsługa wywołania zwrotnego zdarzenia jest wykonywana natychmiast po opóźnieniu wejścia, a czas jej trwania 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ć łączny 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 dotyczącej 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 wydajności i użycie debugowania zdalnego.
2. Jeśli zadanie, które uruchamia wywołania zwrotne zdarzenia, jest długie, poszukaj w zbiorze wywołań wpisów z obsługą zdarzenia (np. wpisów o nazwie Zdarzenie: kliknięcie), które mają czerwony trójkąt w prawym górnym rogu.

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 do wywołania zwrotnego drogiego zdarzenia, jest absolutnie niezbędne? Jeśli nie, rozważ usunięcie tego kodu lub odłożenie jego wykonania na później. 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ć wykonanie nierenderujących zadań w obsługiwanym zdarzeniu na późniejszy czas. 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 procesorowi renderowania do przetworzenia zmian w interfejsie użytkownika, które zostały wcześniej wykonane w obsługiwanym zdarzeniu. Jeśli używasz React, możesz skorzystać z funkcji przejść.

Te strategie powinny pomóc Ci w optymalizacji wywołań zwrotnych zdarzeń, tak 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 przetworzenie wizualnych zmian w interfejsie użytkownika, aby odzwierciedlały one wynik interakcji, to opóźnienie wyświetlania.

Praca związana z renderowaniem polega najczęściej na wykonywaniu takich zadań 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 w fazie renderowania pętli zdarzeń i muszą się zakończyć, zanim zostanie wyświetlona kolejna migawka. 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 ujęciu.

Co zrobić, jeśli nie możesz odtworzyć powolnego działania?

Co zrobić, jeśli dane z pola wskazują, że dana interakcja jest powolna, ale nie możesz ręcznie odtworzyć problemu w laboratorium? Jest kilka powodów, dla których tak się dzieje, ale jeden z nich jest bardzo ważny: 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 warunki. W takim przypadku 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ć problem z powolnym działaniem. 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 warunki panujące w sieci o mniejszej szybkości przesyłania danych, włączając ograniczenie wykorzystania sieci, a następnie wejdź na stronę, gdy tylko się wyświetli. Powinieneś to zrobić, ponieważ główny wątek jest często najbardziej obciążony podczas uruchamiania, a testowanie w tym okresie 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ę ustalić 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. Aby sprawdzić:

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

Ten ostatni 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ż zauważysz efekty.