Ręczne diagnozowanie powolnych interakcji w module

Dowiedz się, jak przenieść dane terenowe do laboratorium, aby odtworzyć i zidentyfikować przyczyny powolnych interakcji za pomocą testów ręcznych.

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 interfejsu 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ć. Być może jednak znajdujesz się w sytuacji, w której nie ma danych w terenie. W takim przypadku możesz znaleźć interakcje, które można ulepszyć, chociaż wymaga to nieco większego wysiłku i innego podejścia.

Całkowity czas blokowania (TBT) to wskaźnik laboratoryjny, który ocenia responsywność strony podczas ładowania i dobrze jest skorelowany 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.

Do określenia czasu uwidoczniania strony możesz użyć jednej z tych metod: Lighthouse. Jeśli wartość TBT strony jest wysoka, istnieje możliwość, że wątek główny jest zbyt zajęty podczas jej wczytywania. Może to wpłynąć na szybkość reagowania strony 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 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 terenu, czy nie, następnym krokiem jest ręczne przetestowanie i odtworzenie powolnych interakcji, ponieważ tylko wtedy, gdy jesteś w stanie odtworzyć powolną interakcję, możesz naprawić ten błąd.

Odtworzenie powolnych interakcji w laboratorium

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

Dane na żywo w panelu Skuteczność 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 o transmisjach na żywo. Dzięki temu możesz szybko wypróbowywać różne interakcje w celu znalezienia problematycznych interakcji, zanim przejdziesz do bardziej szczegółowego profilowania skuteczności. W miarę nawiązywania interakcji dane diagnostyczne będą pojawiać się w dzienniku interakcji (z wyróżnioną interakcją INP). Interakcje te można rozszerzyć, aby uzyskać podział według etapów:

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

Narzędzie do profilowania wydajności Chrome jest zalecanym narzędziem do diagnozowania i rozwiązywania problemów z powolnymi interakcjami. 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. Pozwala to szybko powiększyć 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ć funkcji menu nawigacyjnego w narzędziu do profilowania, aby zawęzić oś czasu i zignorować niepowiązane działania.

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. Oto elementy interakcji:

1. Opóźnienie wejściowe – wizualizowane przez lewy wąs.
2. Czas przetwarzania przedstawiony za pomocą stałego bloku między lewym i prawym wąsami.
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 danych wejściowych, czasu przetwarzania i opóźnienia prezentacji. 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 danych wejściowych 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, która pojawi się po najechaniu kursorem na interakcję w profilu skuteczności.

Opóźnienia wejścia nigdy nie mogą być równe 0, ale masz pewną kontrolę nad tym, jak długo trwa opóźnienie wejścia. Najważniejsze jest ustalenie, czy w wątku głównym nie jest wykonywane zadanie, które uniemożliwia wywołanie funkcji zwrotnych działać tak szybko, jak powinno.

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 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 klasy i użycie debugowania zdalnego.
2. Jeśli zadanie, które uruchamia wywołania zwrotne zdarzeń, jest zadaniem długim, poszukaj w stosie wywołań wpisów modułów obsługi zdarzeń oznaczonych takimi nazwami jak Event: click (elementy z czerwonym trójkątem w prawym górnym rogu wpisu).

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? W przeciwnym razie rozważ całkowite usunięcie tego kodu lub przeniesienie jego wykonania do późniejszego momentu. 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. Przy każdym przejściu do wątku głównego kończysz wykonywanie bieżącego zadania i podzielasz pozostałą część pracy na osobne zadanie. Dzięki temu mechanizm renderowania może przetworzyć aktualizacje interfejsu, które zostały wprowadzone wcześniej w wywołaniu zwrotnym 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 rozpoznać opóźnienia prezentacji

Długie opóźnienia w dostarczaniu danych i długi czas przetwarzania to nie jedyne przyczyny niskiej skuteczności INP. Czasami aktualizacje renderowania, które są przeprowadzane w odpowiedzi na nawet niewielkie ilości kodu wywołania zwrotnego 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 osi Y w profilu są one 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 zdiagnozowania i usunięcia. Nadmierne renderowanie może być spowodowane przez:

• Duże rozmiary DOM. Ilość renderowania wymagana do zaktualizowania 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 na temat unikania wymuszonego przeformatowania znajdziesz w artykule Unikaj stosowania dużych, złożonych układów i ich niszczycielskich układów.
• Nadmierna lub niepotrzebna praca w ramach wywołań zwrotnych requestAnimationFrame. requestAnimationFrame() wywołania zwrotne są wykonywane podczas fazy renderowania pętli zdarzeń i mu się zakończyć, 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 wyzwań 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żna odtworzyć powolnej interakcji?

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 jednym z najważniejszych jest to, że okoliczności testowania interakcji 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ć problem z powolnym działaniem. Urządzenia mobilne często nie są tak szybkie jak laptopy czy komputery stacjonarne, więc można łatwiej obserwować na nich wolniejsze interakcje.
2. Jeśli nie masz fizycznego urządzenia, włącz funkcję ograniczania wykorzystania procesora w Narzędziach deweloperskich w Chrome.
3. Może się zdarzyć, że Ty czekasz na załadowanie strony przed podjęciem interakcji z nią, 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 problematyczne 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.