Ręczne diagnozowanie powolnych interakcji w module

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

Jeremy Wagner

Trudnością w optymalizacji interakcji z kolejnym wyrenderowaniem (INP) jest ustalenie, co powoduje niskie wartości INP. Możliwych jest wiele przyczyn: skrypty innych firm, które planują wiele zadań w wątku głównym, duże rozmiary DOM, kosztowne wywołania zwrotne zdarzeń i inne.

Znalezienie sposobu na poprawienie wartości INP może być trudne. Na początek musisz wiedzieć, które interakcje odpowiadają za wartość INP strony. Jeśli nie wiesz, które interakcje w Twojej witrynie są najwolniejsze z perspektywy rzeczywistego użytkownika, przeczytaj najpierw artykuł Znajdowanie wolnych interakcji w tej witrynie. Gdy uzyskasz potrzebne dane, możesz przetestować te interakcje ręcznie w narzędziach laboratoryjnych, aby dowiedzieć się, dlaczego te interakcje są spowolnione.

Co zrobić, jeśli nie masz danych pól?

Dysponowanie danymi terenowymi jest niezwykle ważne, ponieważ dzięki temu zaoszczędzisz czas potrzebny na określenie, które interakcje trzeba zoptymalizować. Być może znajdujesz się w pozycji, w której nie masz danych terenowych. Jeśli tak właśnie jest w Twojej sytuacji, wciąż możesz znaleźć sposoby interakcji, które można by poprawić, chociaż wymaga to nieco więcej wysiłku i innego podejścia.

Całkowity czas blokowania (TBT) to wskaźnik laboratoryjny, który pozwala ocenić responsywność strony podczas ładowania i bardzo dobrze odpowiada INP. Jeśli strona ma dużą ilość TBT, jest to ważny sygnał, że podczas początkowego wczytywania strony może ona nie reagować na działania użytkowników.

Aby obliczyć wartość TBT swojej strony, możesz użyć Lighthouse lub PageSpeed Insights. Jeśli wartość TBT strony nie osiągnie progu „dobrego”, istnieje duże prawdopodobieństwo, że wątek główny jest zbyt zajęty podczas wczytywania strony, co może mieć wpływ na szybkość następowania interakcji w tym kluczowym momencie cyklu życia strony.

Aby wykryć powolne interakcje po wczytaniu strony, konieczne może być skorzystanie z innych typów danych, np. typowych przepływów użytkowników, które zostały już przez Ciebie zidentyfikowane w statystykach witryny. Załóżmy, że prowadzisz witrynę e-commerce. Typowy przepływ użytkowników to czynności wykonywane podczas dodawania produktów do koszyka na zakupy online, a następnie przechodzenia przez proces płatności.

Niezależnie od tego, czy masz dane w polu, kolejnym krokiem jest ręczne przetestowanie i odtworzenie powolnych interakcji, ponieważ tylko wtedy, gdy uda Ci się jednoznacznie stwierdzić, że powolna interakcja można rozwiązać, możesz rozwiązać ten problem.

Odtwarzanie powolnych interakcji w module

Jest kilka sposobów na odtwarzanie powolnych interakcji w module za pomocą testów ręcznych. Poniżej przedstawiamy platformę, która pozwala odtworzyć powolne interakcje w środowisku laboratoryjnym i minimalizować wysiłek poznawczy.

Nie kontaktuj się od razu z usługą profilu skuteczności

Jeśli znasz już narzędzie do profilowania wydajności Chrome, wiesz, że zawiera on wiele przydatnych informacji diagnostycznych podczas rozwiązywania problemów z wydajnością stron. To przydatne narzędzie, które ma wiele zalet.

Wadą jest jednak to, że program profilujący wydajności Chrome nie zapewnia podglądu na żywo podczas interakcji ze stroną. Korzystanie z niego zajmuje sporo czasu. Istnieją skuteczniejsze sposoby najpierw ręcznego testowania interakcji. Chodzi o to, by położyć jak najmniej czasu i wysiłek, aby odtworzyć powolne interakcje, a gdy jednoznacznie zidentyfikujemy takie interakcje, potem można je przeanalizować za pomocą narzędzia do profilu skuteczności, aby dokładnie przeanalizować przyczyny.

Używanie rozszerzenia Web Vitals do Chrome

Rozszerzenie do Chrome Web Vitals wymaga najmniejszego wysiłku, jeśli chodzi o ręczne testowanie opóźnienia interakcji. Po zainstalowaniu rozszerzenie wyświetla dane interakcji w konsoli Narzędzi deweloperskich, pod warunkiem że najpierw wykonasz te czynności:

1. W Chrome kliknij ikonę rozszerzeń z prawej strony paska adresu.
2. W menu znajdź rozszerzenie Web Vitals.
3. Kliknij ikonę po prawej stronie, by otworzyć ustawienia rozszerzenia.
4. Kliknij Opcje.
5. Na wyświetlonym ekranie zaznacz pole wyboru Logowanie konsoli, a potem kliknij Zapisz.

Następnie otwórz konsolę w Narzędziach deweloperskich w Chrome i zacznij testować potencjalne interakcje w swojej witrynie. Podczas korzystania ze strony w konsoli wyświetlają się przydatne dane diagnostyczne.

Wpis w konsoli z rozszerzenia Wskaźniki internetowe po włączeniu logowania w konsoli. Każda kwalifikująca się interakcja zapisze dane interakcji w konsoli.

Użyj fragmentu kodu JavaScript

Choć może być przydatne, rozszerzenie wskaźników internetowych może nie być dla każdego przydatne. Rozszerzenia przeglądarki mogą być blokowane w niektórych środowiskach ze względu na zasady bezpieczeństwa urządzeń. Rozszerzenia nie można też instalować na urządzeniach mobilnych. Jest to problematyczne, jeśli chcesz przeprowadzić testy ręcznie na fizycznym urządzeniu z Androidem przy użyciu zdalnego debugowania.

Alternatywną metodą korzystania z rozszerzenia Web Vital jest skopiowanie i wklejenie części kodu JavaScript do konsoli Narzędzi deweloperskich. Ten kod daje w konsoli dane wyjściowe takich samych danych jak rozszerzenie Wskaźniki internetowe w przypadku każdej interakcji:

let worstInp = 0;

const observer = new PerformanceObserver((list, obs, options) => {
  for (let entry of list.getEntries()) {
    if (!entry.interactionId) continue;

    entry.renderTime = entry.startTime + entry.duration;
    worstInp = Math.max(entry.duration, worstInp);

    console.log('[Interaction]', entry.duration, `type: ${entry.name} interactionCount: ${performance.interactionCount}, worstInp: ${worstInp}`, entry, options);
  }
});

observer.observe({
  type: 'event',
  durationThreshold: 0, // 16 minimum by spec
  buffered: true
});

Uwaga: wygodniejszym sposobem korzystania z poprzedniego kodu jest użycie funkcji fragmentów kodu w Narzędziach deweloperskich w Chrome.

Gdy stwierdzisz, że interakcja jest stabilnie powolna, możesz przeprowadzić jej profilowanie w programie profilu wydajności, aby uzyskać szczegółowe informacje o tym, dlaczego działa ona wolno.

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

Co się stanie, jeśli dane z pola wskazują, że konkretna interakcja jest powolna, ale nie możesz ręcznie odtworzyć problemu w module? Może tak być z kilku powodów. Jest to częsty problem podczas rozwiązywania wszelkiego rodzaju problemów z wydajnością.

Okazuje się, że okoliczności podczas testowania interakcji zależą od używanego sprzętu i połączenia sieciowego. Możliwe, że korzystasz z szybkiego urządzenia z szybkim połączeniem, ale nie oznacza to, że użytkownicy mają tyle szczęścia. Jeśli zajdzie taka sytuacja w Twoim przypadku, możesz zrobić jedną z trzech rzeczy:

1. Jeśli masz fizyczne urządzenie z Androidem, użyj zdalnego debugowania, aby otworzyć instancję Chrome DevTools na swoim 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 w takich sytuacjach łatwiej można zauważyć wolniejsze interakcje.
2. Jeśli nie masz urządzenia fizycznego, włącz funkcję ograniczania wykorzystania procesora w Narzędziach deweloperskich w Chrome.
3. Wypróbuj jednocześnie oba kroki 1 i 2, ponieważ możesz też włączyć ograniczanie wykorzystania procesora w instancji Narzędzi deweloperskich w przypadku fizycznego urządzenia z Androidem.

Inną przyczyną może być to, że czekasz na wczytanie strony przed interakcją z nią, ale użytkownicy nie wchodzą z nią w interakcję. Jeśli używasz szybkiej sieci, symuluj powolne działanie sieci, włączając ograniczanie sieci, a następnie wchodź w interakcję ze stroną zaraz po jej wczytaniu. Warto to zrobić, ponieważ główny wątek jest często najbardziej obciążony pracą w trakcie uruchamiania, a przeprowadzone w tym czasie testy mogą ujawnić wrażenia użytkowników.

Zarejestruj log czasu

Aby uzyskać więcej informacji o tym, dlaczego interakcja jest spowolniona, następnym krokiem jest użycie profilu wydajności w Narzędziach deweloperskich w Chrome. Aby profilować interakcję w narzędziu do profilowania wydajności Chrome, wykonaj te czynności:

1. Przygotuj stronę, którą chcesz przetestować.
2. Otwórz Narzędzia deweloperskie w Chrome i otwórz panel Wydajność.
3. Kliknij przycisk Record (Zarejestruj) w lewym górnym rogu panelu, aby rozpocząć śledzenie.
4. Wykonaj interakcje, które chcesz profilować.
5. Kliknij ponownie przycisk Rejestruj, aby zatrzymać śledzenie.

Gdy program profilujący się zapełni, najpierw sprawdź podsumowanie aktywności u góry tego programu. U góry podsumowania aktywności znajdują się czerwone paski, jeśli w nagraniu miały miejsce długie zadania. Dzięki temu możesz szybko powiększyć problematyczne obszary.

Podsumowanie aktywności u góry narzędzia do profilowania wydajności Chrome. Długie zadania są podświetlane na czerwono nad wykresem płomieniowym aktywności. W tym przypadku za większość pracy odpowiadała obszerna praca ze skryptami.

Możesz szybko skupić się na problematycznych obszarach, przeciągając i wybierając odpowiedni region w podsumowaniu aktywności. Gdy skupisz się na miejscu interakcji, ścieżka Interakcje pomoże Ci wyrównać tę interakcję i aktywność, która miała miejsce na ścieżce głównego wątku pod nią:

Interakcja profilowana w narzędziu do profilu wydajności w narzędziach deweloperskich w Chrome. Ścieżka Interakcje przedstawia serię zdarzeń, które odpowiadają interakcji polegającej na kliknięciu. Wpisy na ścieżce interakcji obejmują zadania odpowiadające za interakcję.

Potem trzeba zgłębić problem, co będzie powodowało spowolnienie działania. Długi czas oczekiwania na interakcję może mieć wpływ na wiele czynników. Niektóre z nich opisujemy w dalszej części tego przewodnika.

Uwaga: pierwsza interakcja w logu czasu wydajności może wiązać się z pewnymi kosztami w miarę uruchamiania programu profilującego, co może spowodować, że aktywność w głównym wątku będzie trwała dłużej niż zwykle. Aby uniknąć tego szumu, kliknij tekst lub wykonaj inną podstawową interakcję przed profilowaniem interakcji, którą chcesz zbadać.

Przykład elementu Profilowanie w logu czasu wydajności.

Używaj zakresów czasu w Lighthouse jako alternatywy dla śledzenia

Narzędzie profilujące wydajności Chrome, m.in. bogate w informacje diagnostyczne, może zniechęcić użytkowników. Alternatywą dla profilu wydajności jest tryb zakresu czasu dostępny w Lighthouse. Aby użyć tego trybu, wykonaj te czynności:

1. Po otwarciu Narzędzi deweloperskich otwórz w nich kartę Lighthouse.
2. W sekcji Tryb wybierz opcję Zakres czasu.
3. W sekcji Urządzenie wybierz typ urządzenia Komputer lub Urządzenie mobilne.
4. Upewnij się, że pod etykietą Kategorie jest zaznaczone przynajmniej pole wyboru Skuteczność.
5. Kliknij przycisk Rozpocznij okres.
6. Przetestuj interakcje na stronie, dla której chcesz uzyskać dane.
7. Kliknij przycisk Zakończ okres i poczekaj na pojawienie się kontroli.
8. Gdy kontrola pojawi się na karcie Lighthouse, możesz ją przefiltrować według INP. Aby to zrobić, kliknij link INP obok etykiety o treści Pokaż kontrole dotyczące.

W tym momencie powinna pojawić się lista kontroli, które zakończyły się niepowodzeniem lub pozytywnym. Po rozwinięciu menu zobaczysz podział czasu spędzonego podczas interakcji.

Interakcja profilowana w trybie zakresu czasu w Lighthouse. Gdy podejmowane są interakcje ze stroną, Lighthouse udostępnia audyt, który pokazuje, gdzie został spędzony czas interakcji. Dane te są dzielone według opóźnienia danych wejściowych, opóźnienia przetwarzania i opóźnienia prezentacji.

Uwaga: jeśli chcesz dokładniej zbadać przyczynę powolnej interakcji, możesz to zrobić, klikając przycisk Wyświetl log czasu nad paskiem zdjęć. Otworzy się narzędzie do profilowania wydajności, które wyświetla szczegóły interakcji w przypadku interakcji testowanych w trybie zakresu czasu.

Jak wykrywać duże opóźnienia wprowadzania danych

Jedną z rzeczy, które mogą przyczyniać się do dużego opóźnienia interakcji, jest opóźnienie danych wejściowych. Opóźnienie danych wejściowych to pierwsza faza interakcji. Jest to czas od pierwszego otrzymania działania użytkownika przez system operacyjny do momentu, w którym przeglądarka zacznie przetwarzać pierwsze zdarzenie wywoływane przez te dane wejściowe. Opóźnienie danych wejściowych kończy się w chwili rozpoczęcia wykonywania wywołań zwrotnych zdarzenia dla tej interakcji.

Opóźnienia wejściowe w programie profilu wydajności Chrome można zidentyfikować, określając początek interakcji na ścieżce interakcji, a następnie sprawdzając początek wywołania zwrotnego zdarzenia dla tej interakcji.

Należy zawsze spodziewać się pewnego opóźnienia danych wejściowych, ponieważ przekazanie przez system operacyjny zdarzenia wejściowego do przeglądarki zajmuje trochę czasu. Masz jednak kontrolę nad długością tego opóźnienia. Kluczem jest stwierdzenie, czy w wątku głównym nie działa praca, która uniemożliwia wykonywanie wywołań zwrotnych.

Opóźnienie wejściowe spowodowane przez zadanie uruchomione przez licznik czasu ze skryptu zewnętrznego.

Na poprzednim ilustracji uruchomione jest zadanie ze skryptu zewnętrznego, gdy użytkownik próbuje wejść w interakcję ze stroną, co powoduje zwiększenie opóźnienia danych wejściowych. Zwiększone opóźnienie danych wejściowych wpływa na czas oczekiwania na interakcję, a tym samym może wpływać na wartość INP strony.

Więcej informacji: aby dowiedzieć się więcej o rozwiązywaniu problemów z długimi opóźnieniami danych wejściowych, przeczytaj, jak identyfikować i zmniejszać opóźnienia danych wejściowych.

Jak rozpoznawać drogie wywołania zwrotne zdarzeń

Wywołania zwrotne zdarzeń są uruchamiane natychmiast po opóźnieniu danych wejściowych. Jeśli wywołanie zwrotne zdarzenia trwa zbyt długo, opóźnia to przeglądarkę przed wyświetleniem kolejnej klatki, co może znacznie zwiększyć całkowity czas oczekiwania interakcji. Długotrwałe wywołania zwrotne zdarzeń mogą być wynikiem kosztownych obliczeń własnych lub zewnętrznych skryptów JavaScript, a w niektórych przypadkach – obu.

Wywołania zwrotne zdarzenia uruchamiane w odpowiedzi na interakcję z kliknięciem, co widać w narzędziu do profilowania wydajności w Chrome DevTools. Zwróć uwagę na czerwony trójkąt w prawym górnym rogu wpisów Zdarzenie: wskaźnik i Zdarzenie: kliknięcie, który identyfikuje drogie wywołania zwrotne zdarzeń.

Znajdowanie kosztownych wywołań zwrotnych zdarzeń można wykonać, obserwując w śladach konkretnej interakcji te elementy:

1. Określ, czy zadanie powiązane z wywołaniami zwrotnymi zdarzeń jest długim zadaniem. Aby zapewnić większą dokładność wykrywania długich zadań w laboratorium, być może trzeba będzie włączyć ograniczanie wykorzystania procesora w panelu wydajności lub podłączyć niskie do średniej klasy urządzenia z Androidem i użyć zdalnego debugowania.
2. Jeśli zadanie, które uruchamia wywołania zwrotne zdarzeń, jest długim zadaniem, w stosie wywołań, które w prawym górnym rogu mają czerwony trójkąt, poszukaj wpisów modułu obsługi zdarzeń, np. wpisów o nazwach takich jak Zdarzenie: kliknięcie. Są to drogie wywołania zwrotne zdarzeń.

Aby radzić sobie z drogimi wywołaniami zwrotnymi do zdarzeń, wypróbuj jedną z tych strategii:

1. Jak najmniejsza ilość pracy. Czy wszystko, co dzieje się w drogim wywołaniu zdarzenia, jest bezwzględnie konieczne? Jeśli to możliwe, usuń kod w całości lub odłóż jego wykonanie na późniejszy termin. Możesz też skorzystać z funkcji platformy. Na przykład klasa PureComponent i funkcja zapamiętywania w React mogą pominąć niepotrzebne renderowanie, jeśli rekwizyty i stan komponentu nie zmieniły się.
2. Odkładaj zadania związane z renderowaniem w wywołaniu zwrotnym zdarzenia na późniejszy termin. Długie zadania można podzielić, przypisując je do wątku głównego. Za każdym razem, gdy przechodzisz do wątku głównego, kończysz wykonanie bieżącego zadania i dzielisz pozostałą część pracy na osobne zadanie. Daje to mechanizmowi renderującemu możliwość przetworzenia aktualizacji interfejsu użytkownika, które zostały wprowadzone wcześniej w wywołaniu zwrotnym zdarzenia. Jeśli używasz React, może to zrobić za Ciebie funkcja przenoszenia.

Stosując te strategie, będziesz mieć możliwość uzyskiwania wywołań zwrotnych zdarzeń w miejscu, w którym będą one szybciej reagować na działania użytkowników.

Jak wykrywać opóźnienia prezentacji

Długie opóźnienia wprowadzania danych i kosztowne wywołania zwrotne zdarzeń nie są jedynymi potencjalnymi przyczynami niskiej wartości INP. Czasami aktualizacje renderowania w odpowiedzi na nawet niewielkie ilości kodu wywołania zwrotnego zdarzenia mogą być kosztowne. Czas potrzebny przeglądarce na wyrenderowanie wizualnych aktualizacji interfejsu w celu odzwierciedlenia rezultatu interakcji jest nazywany opóźnieniem prezentacji.

Ważne: przewodnik po wydajności renderowania zawiera informacje podstawowe o tym, jak przeglądarka renderuje strony. Temat życia piksela zawiera szczegółowe informacje o tym, jak działa renderowanie w przeglądarkach opartych na Chromium.

Zadania renderowania tak, jak to pokazuje w programie profilu wydajności Chrome. Renderowanie jest przedstawione na fioletowo, a malarstwo – na zielono.

Ważne: podczas profilowania powolnych interakcji z powodu kosztownego renderowania należy zaznaczyć pole wyboru Zrzuty ekranu u góry narzędzia do profilowania wydajności. Pomoże Ci to dopasować aktualizacje interfejsu do odpowiednich procesów renderowania w wątku głównym.

Ze wszystkich możliwych przyczyn dużego opóźnienia interakcji renderowanie jest najtrudniejsze do rozwiązania i naprawienia, ale jest warte wysiłku. Nadmierne renderowanie może być spowodowane przez:

• Duże rozmiary DOM. Nakład pracy potrzebny do zaktualizowania prezentacji strony często rośnie wraz z rozmiarem jej elementu DOM. Więcej informacji znajdziesz w artykule Jak duże rozmiary DOM wpływają na interaktywność i co można z tym zrobić.
• Wymuszone przeformatowania. Dzieje się tak, gdy zastosujesz zmiany stylu do elementów w języku JavaScript, a później wyślesz zapytanie o wyniki tego działania. W efekcie przeglądarka musi najpierw wykonać zadanie związane z układem, a następnie zwrócić zaktualizowane style. Więcej informacji i wskazówek na temat unikania wymuszonych przeformatowań znajdziesz w artykule Unikaj dużych, złożonych układów oraz nie rzucania się w oczy.
• Nadmierna lub niepotrzebna praca w wywołaniach zwrotnych requestAnimationFrame. Wywołania zwrotne requestAnimationFrame() są uruchamiane w fazie renderowania pętli zdarzeń i muszą się zakończyć przed wyświetleniem następnej ramki. Jeśli używasz requestAnimationFrame() do pracy, która nie wymaga zmian w interfejsie, pamiętaj, że możesz opóźniać następną klatkę.
• Wywołania zwrotne ResizeObserver. Takie wywołania zwrotne są wykonywane przed renderowaniem i mogą opóźnić prezentację następnej klatki, jeśli zawarte w nich działania są drogie. Podobnie jak w przypadku wywołań zwrotnych zdarzeń, odrocz wszystkie funkcje logiczne, które nie są potrzebne do następnej klatki.

Ważne: rozwiązywanie problemów może być łatwiejsze dzięki włączeniu 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 je uruchomiło. Aby włączyć ten eksperyment, otwórz ustawienia Narzędzi deweloperskich w Chrome, w menu po lewej stronie kliknij Eksperymenty, a następnie zaznacz pole wyboru Oś czasu: inicjatory zdarzeń i ponownie uruchom Narzędzia dla programistów.

Rozwiązywanie problemów z INP to proces iteracyjny

Znalezienie przyczyny wysokiego opóźnienia interakcji, które przyczyniają się do niskiego współczynnika INP, wymaga dużo pracy. Jeśli jednak uda Ci się zidentyfikować przyczyny, jesteś w połowie drogi do celu. Stosując metodyczne podejście do rozwiązywania problemów z niskim wskaźnikiem INP, możesz skutecznie określić przyczynę problemu i szybciej znaleźć rozwiązanie. Aby sprawdzić:

• Sprawdzaj dane terenowe, aby wykrywać powolne interakcje.
• Ręcznie przetestuj problematyczne interakcje w ramach modułu, aby sprawdzić, czy można je odtworzyć.
• Ustal, czy jest to spowodowane długim opóźnieniem danych wejściowych, kosztownymi wywołaniami zwrotnymi zdarzeń lub kosztownymi procesami renderowania.
• Powtórz.

Ostatnia z nich jest najważniejsza. Podobnie jak większość innych zadań związanych ze zwiększaniem wydajności stron, rozwiązywanie problemów i ulepszanie wartości INP to proces cykliczny. Gdy poprawisz jedną powolną interakcję, przejdź do następnej i powtarzaj czynność, aż zobaczysz pierwsze wyniki. Zachowaj czujność.