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

Trudnym etapem optymalizacji interakcji z następnym wyrenderowaniem (INP) jest znalezienie przyczyny niskiej wartości INP. Istnieje wiele potencjalnych przyczyn, na przykład zewnętrzne skrypty, które planują wiele zadań w wątku głównym, duże rozmiary DOM, drogie wywołania zwrotne zdarzeń i inne przyczyny.

Poprawa wartości INP może być trudna. Na początek musisz wiedzieć, które interakcje zwykle odpowiadają za wartość INP strony. Jeśli nie wiesz, które interakcje w witrynie z perspektywy rzeczywistego użytkownika są najwolniejsze, przeczytaj artykuł Wyszukiwanie powolnych interakcji w terenie. Gdy już będziesz mieć potrzebne dane, możesz ręcznie przetestować te interakcje w narzędziach laboratoryjnych, aby dowiedzieć się, dlaczego te interakcje są powolne.

Co zrobić, jeśli nie masz danych terenowych?

Posiadanie danych terenowych jest kluczowe, ponieważ pozwala zaoszczędzić dużo czasu na ustalanie, które interakcje wymagają optymalizacji. Być może jednak jesteś w miejscu, w którym nie ma danych terenowych. 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 wczytywania i dobrze jest skorelowany z INP. Jeśli Twoja strona ma dużo danych w trakcie jej wczytywania, może to oznaczać, że nie reaguje ona zbyt dobrze na interakcje użytkowników po jej wczytaniu.

Do określenia czasu uwidoczniania strony możesz użyć dowolnej 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 wykryć powolne interakcje po wczytaniu strony, możesz potrzebować innych typów danych, np. typowych interakcji użytkowników z Twojej witryny, które udało Ci się już wykryć w statystykach witryny. Jeśli np. prowadzisz witrynę e-commerce, typową dla użytkownika procedurą są działania podejmowane przez użytkowników podczas dodawania produktów do koszyka na zakupy online i dokonywania płatności.

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.

Odtwórz powolne interakcje w module

Jest wiele sposobów na odtworzenie powolnych interakcji w module, korzystając z testów ręcznych. Poniżej znajdziesz schemat, który możesz wypróbować.

Zarejestruj ślad

Narzędzie do profilowania wydajności Chrome jest zalecanym narzędziem do diagnozowania i rozwiązywania problemów z powolnymi interakcjami. Aby profilować interakcję w narzędziu do profilowania wydajności Chrome, wykonaj te czynności:

1. Otwórz stronę, którą chcesz przetestować.
2. Otwórz Narzędzia deweloperskie w Chrome i przejdź do panelu Wydajność.
3. Kliknij przycisk Nagraj w lewym górnym rogu panelu, aby rozpocząć śledzenie.
4. Wykonaj interakcje, z którymi chcesz rozwiązać problem.
5. Ponownie kliknij przycisk Nagraj, aby zatrzymać śledzenie.

Po załadowaniu danych przez narzędzie do profilowania w pierwszej kolejności powinno znajdować się podsumowanie aktywności u góry narzędzia. W podsumowaniu aktywności u góry widać czerwone paski podczas nagrywania długich zadań. Pozwala to szybko powiększyć problematyczne obszary.

Podsumowanie aktywności u góry narzędzia do profilowania wydajności Chrome. Długie zadania są wyróżnione na czerwono nad wykresem płomieniowym aktywności. W tym przypadku za większość pracy w długim zadaniu odpowiadała duża część prac związanych ze skryptami.

Możesz szybko skupić się na problematycznych obszarach, przeciągając i wybierając regiony 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ązaną aktywność.

Kiedy przejdziesz do miejsca, w którym nastąpiła interakcja, ścieżka Interakcje pomoże Ci zestawić interakcję oraz aktywność, która miała miejsce na ścieżce głównego wątku poniżej:

Interakcja profilowana w narzędziu do profilowania wydajności w Narzędziach deweloperskich w Chrome. Ścieżka Interakcje pokazuje serię zdarzeń odpowiadających interakcji polegającej na kliknięciu. Wpisy pozwalają śledzić interakcje obejmujące zadania odpowiedzialne za interakcję.

Aby uzyskać dodatkowe informacje o tym, która część interakcji była najdłuższa, najedź kursorem na wystąpienie na ścieżce interakcji:

Etykietka, która pojawia się po najechaniu kursorem na interakcję na ścieżce interakcji w panelu skuteczności. Etykietka pokazuje ilość czasu spędzonego w poszczególnych częściach interakcji.

Paki dla współczynnika INP strony. Oto elementy interakcji:

1. Opóźnienie danych wejściowych – 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 właściwy wąs.

Teraz trzeba jeszcze dokładniej zbadać problemy powodujące powolne interakcje, co zostało omówione w dalszej części tego przewodnika.

Rozszerzenie Web Vitals do Chrome

Narzędzie do profilowania wydajności to zalecana metoda diagnozowania interakcji, o których wiadomo, że są powolne. Jeśli jednak nie wiesz, które z nich powodują problemy, może upłynąć trochę czasu, zanim je zidentyfikujesz. Jedną z możliwości jest korzystanie z rozszerzenia do Chrome Web Vitals. Dzięki temu rozszerzeniu możesz szybko wypróbowywać różne interakcje w poszukiwaniu problematycznych interakcji, zanim przejdziesz do narzędzia do profilowania skuteczności.

Po zainstalowaniu rozszerzenie Web Vitals wyświetla dane interakcji w konsoli Narzędzi deweloperskich, jeśli wykonasz te czynności:

1. W Chrome kliknij ikonę rozszerzeń po prawej stronie paska adresu.
2. W menu odszukaj rozszerzenie Web Vitals.
3. Kliknij ikonę po prawej stronie, aby otworzyć ustawienia rozszerzenia.
4. Kliknij Opcje.
5. Zaznacz pole wyboru Logowanie konsoli na wyświetlonym ekranie i kliknij Zapisz.

Po wykonaniu tych czynności otwórz konsolę w Narzędziach deweloperskich w Chrome i zacznij testować podejrzane interakcje na stronie. Podczas korzystania z konsoli dane diagnostyczne będą się pojawiać w konsoli:

Rozszerzenie Web Vitals może rejestrować w konsoli Chrome szczegółowe dane o interakcjach przyczyniających się do wartości INP strony.

Rozszerzenie Web Vitals pomaga identyfikować powolne interakcje i dostarcza informacji pomagających w debugowaniu INP, ale w dalszym ciągu może być konieczne używanie narzędzia profilu wydajności do diagnozowania powolnych interakcji, ponieważ dostarcza ono szczegółowych danych, które są potrzebne podczas przeglądania kodu produkcyjnego witryny, aby znaleźć przyczyny powolnych interakcji.

Jak sprawdzić, która część interakcji jest wolna

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ęść tego procesu zajmuje najwięcej czasu.

Jak identyfikować duże opóźnienia danych wejściowych

Opóźnienia danych wejściowych mogą powodować duże opóźnienia interakcji. Opóźnienie danych wejściowych to pierwsza część interakcji. Jest to okres od pierwszego odebrania działania użytkownika przez system operacyjny do momentu, w którym przeglądarka może rozpocząć przetwarzanie pierwszego wywołania zwrotnego modułu obsługi zdarzenia tej interakcji.

Opóźnienia danych wejściowych w narzędziu do profilowania wydajności Chrome można wykryć, lokalizując interakcję na ścieżce interakcji. Długość lewego wąsa wskazuje część opóźnienia danych wejściowych interakcji. Dokładną wartość można znaleźć w etykietce po najechaniu kursorem na interakcję w narzędziu do profilowania wydajności.

Opóźnienia danych wejściowych nigdy nie mogą wynosić zero, ale możesz mieć kontrolę nad długością opóźnienia sygnału wejściowego. Kluczem jest sprawdzić, czy w wątku głównym trwają jakieś działania, które uniemożliwiałyby wywołanie wywołań zwrotnych tak szybko, jak powinny.

Opóźnienie danych wejściowych spowodowane przez zadanie uruchomione przez licznik czasu ze skryptu zewnętrznego. Lewa część Whiskera w interakcji widocznej na ścieżce interakcji wizualizuje opóźnienie danych wejściowych.

Na poprzednim rysunku jest uruchomione zadanie skryptu innej firmy, gdy użytkownik próbuje wejść w interakcję ze stroną, co powoduje wydłużenie opóźnienia danych wejściowych. Większe opóźnienie danych wejściowych wpływa na czas oczekiwania na interakcję, a tym samym na wartość INP strony.

Więcej informacji: więcej informacji o rozwiązywaniu problemów związanych z długimi opóźnieniami wprowadzania danych znajdziesz w artykule o identyfikowaniu i zmniejszeniu opóźnienia sygnału wejściowego.

Jak rozpoznać długie czasy przetwarzania

Wywołania zwrotne zdarzeń są uruchamiane natychmiast po opóźnieniu danych wejściowych. Czas potrzebny na ich wykonanie jest nazywany czasem trwania przetwarzania. Jeśli wywołania zwrotne zdarzeń trwają zbyt długo, opóźniają prezentację następnej klatki w przeglądarce i mogą znacznie zwiększyć całkowity czas oczekiwania interakcji. Długi czas przetwarzania może wynikać z kosztownego stosowania kodu JavaScriptu własnego lub innych firm, a w niektórych przypadkach z obu tych czynników. W narzędziu do profilowania wydajności jest to reprezentowane przez solidną część interakcji na ścieżce interakcji.

Wywołania zwrotne zdarzeń uruchamiane w odpowiedzi na interakcję z kliknięciem, zgodnie z narzędziem profilowania wydajności w Narzędziach deweloperskich w Chrome. Zwróć uwagę na długi czas przetwarzania.

Znajdowanie kosztownych wywołań zwrotnych zdarzeń można uzyskać, obserwując w zrzucie danych te czynności dla określonej interakcji:

1. Ustal, czy zadanie powiązane z wywołaniami zwrotnymi zdarzeń jest długim zadaniem. Aby lepiej pokazać długie zadania w ramach modułu, konieczne może być włączenie ograniczania wykorzystania procesora w panelu wydajności lub podłączenie urządzenia z Androidem niskiej do średniej klasy i użycie zdalnego debugowania.
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. Wykonuj jak najmniej pracy. Czy wszystko, co dzieje się podczas kosztownego wywołania zwrotnego zdarzenia, jest bezwzględnie konieczne? W przeciwnym razie rozważ całkowite usunięcie tego kodu lub przeniesienie jego wykonania do późniejszego momentu. Możesz też skorzystać z funkcji platformy, które Ci w tym pomogą. Na przykład funkcja zapamiętania React może pomijać niepotrzebne renderowanie komponentu, jeśli właściwości się nie zmieniły.
2. Odłóż zadania nierenderowania w wywołaniu zwrotnym zdarzenia na późniejszy moment. Długie zadania można podzielić, przekazując wątek główny. 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 zrobić to za pomocą funkcji przejść.

Te strategie powinny umożliwić optymalizowanie wywołań zwrotnych zdarzeń, tak aby zajmowały mniej czasu.

Jak rozpoznać opóźnienia prezentacji

Długie opóźnienia danych wejściowych i czasy przetwarzania nie są jedynymi przyczynami niskiej wartoś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, po którym przeglądarka wyrenderuje wizualne aktualizacje interfejsu użytkownika w celu odzwierciedlenia rezultatu interakcji, nazywamy opóźnieniem prezentacji.

Ważne: przewodnik po wydajności renderowania to dobry przewodnik, który pomoże Ci zrozumieć, jak przeglądarka renderuje stronę. W artykule Life of a pixel znajdziesz więcej informacji o tym, jak działa renderowanie w przeglądarkach opartych na Chromium.

Zadania renderowania widoczne w narzędziu do profilowania wydajności Chrome. Prawy wąs wizualizuje długość opóźnień prezentacji.

Renderowanie najczęściej składa się z takich zadań jak ponowne obliczanie stylu, układ, malowanie i komponowanie. Są one reprezentowane przez fioletowe i zielone bloki na wykresie płomieniowym narzędzia do profilowania. Całkowite opóźnienie prezentacji jest reprezentowane przez prawą stronę interakcji na ścieżce interakcji.

Ważne: jeśli profilujesz powolne interakcje ze względu na kosztowne renderowanie, zaznacz pole wyboru Zrzuty ekranu u góry narzędzia do profilowania wydajności. Pomoże Ci to połączyć aktualizacje interfejsu z odpowiednimi zadaniami renderowania w wątku głównym.

Spośród wszystkich możliwych przyczyn dużego opóźnienia interakcji opóźnienia wyświetlania prezentacji mogą być najtrudniejsze do rozwiązania. Nadmierne renderowanie może być spowodowane przez:

• Duże rozmiary DOM. Nakład pracy związany z renderowaniem, który jest niezbędny do aktualizowania prezentacji strony, często zwiększa się wraz z rozmiarem DOM strony. Więcej informacji znajdziesz w artykule Jak duże rozmiary DOM wpływają na interaktywność – i co możesz w związku z tym zrobić.
• Wymuszone zmiany układu. Dzieje się tak, gdy zastosujesz zmiany stylu do elementów w JavaScript, a potem od razu wysyłasz zapytanie o wyniki tej operacji. W efekcie przeglądarka musi przeprowadzić działanie układu, zanim zacznie wykonywać inne czynności, by przeglądarka 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 wywołaniach zwrotnych requestAnimationFrame. Wywołania zwrotne requestAnimationFrame() są uruchamiane w fazie renderowania pętli zdarzeń i muszą zostać zakończone, zanim pojawi się kolejna klatka. Jeśli używasz requestAnimationFrame() do czynności, które nie wymagają zmian w interfejsie, pamiętaj, że możesz opóźniać następną klatkę.
• ResizeObserver wywołania zwrotnego. Takie wywołania zwrotne są uruchamiane przed renderowaniem i mogą opóźnić prezentację następnej klatki, jeśli ich praca jest kosztowna. Tak jak w przypadku wywołań zwrotnych zdarzeń, odrocz działanie logiczne, które nie są potrzebne do następnej klatki.

Ważne: rozwiązywanie problemów może być łatwiejsze przez włączenie eksperymentu Oś czasu: inicjatory zdarzeń w Narzędziach deweloperskich w Chrome. Włączenie tego eksperymentu spowoduje narysowanie strzałki z dowolnego zadania ponownego obliczania stylu do zadania JavaScript, które go zainicjowało. Aby włączyć ten eksperyment, otwórz ustawienia Narzędzi deweloperskich w Chrome, kliknij Eksperymenty w menu po lewej stronie, kliknij pole wyboru Oś czasu: inicjatory zdarzeń i ponownie uruchom Narzędzia deweloperskie.

Co zrobić, jeśli nie można odtworzyć powolnej interakcji?

Co zrobić, jeśli dane w polach wskazują, że dana interakcja jest powolna, ale nie można ręcznie odtworzyć problemu z modułu? Może to wynikać z kilku powodów.

Po pierwsze, warunki testowania interakcji zależą od sprzętu i połączenia sieciowego. Możesz używać szybkiego urządzenia z szybkim połączeniem – ale to nie znaczy, że Twoi użytkownicy tak mają. W takim przypadku możesz wypróbować jedną z tych opcji:

1. Jeśli masz fizyczne urządzenie z Androidem, użyj zdalnego debugowania, aby otworzyć wystąpienie Narzędzi deweloperskich Chrome na hoście i spróbować odtworzyć na nim powolne interakcje. 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.

Inną przyczyną może być oczekiwanie na wczytanie strony przed wykonaniem interakcji z nią, a użytkownicy już nie. Jeśli korzystasz z szybkiej sieci, zasymuluj wolniejsze warunki, włączając ograniczanie sieci. Następnie wejdź w interakcję ze stroną od razu po jej wczytaniu. Jest to zalecane, ponieważ główny wątek jest często najbardziej obciążony podczas uruchamiania, a testowanie w tym okresie może ujawnić wrażenia użytkowników.

Rozwiązywanie problemów z INP jest procesem iteracyjnym

Znalezienie przyczyny dużego opóźnienia interakcji, która przekłada się na niski wskaźnik INP, wymaga dużo pracy, ale jeśli jesteś w stanie określić przyczyny, jesteś w połowie drogi. Stosując metodyczne rozwiązywanie problemów z niską wartością INP, możesz skutecznie określić przyczynę problemu i szybciej znaleźć rozwiązanie. Aby to sprawdzić:

• Wykorzystuj dane z terenu, aby wykrywać wolne interakcje.
• Przetestuj ręcznie problematyczne interakcje w laboratorium, aby sprawdzić, czy da się je odtworzyć.
• Ustal, czy przyczyną są długie opóźnienia danych wejściowych, kosztowne wywołania zwrotne zdarzeń czy kosztowne procesy renderowania.
• Powtórz.

To ostatnie jest najważniejsze. Podobnie jak większość innych działań, które wykonujesz, aby poprawić wydajność strony, rozwiązywanie problemów i ulepszanie wartości INP to proces cykliczny. Po naprawieniu jednej powolnej interakcji przejdź do następnej i powtarzaj to, aż zaczniesz widzieć wyniki.