Dowiedz się, jak za pomocą testów ręcznych przenieść dane z terenów do laboratorium, aby odtworzyć i zidentyfikować przyczyny powolnych interakcji.
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:
- W Chrome kliknij ikonę rozszerzeń z prawej strony paska adresu.
- W menu znajdź rozszerzenie Web Vitals.
- Kliknij ikonę po prawej stronie, by otworzyć ustawienia rozszerzenia.
- Kliknij Opcje.
- 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.
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
});
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:
- 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.
- Jeśli nie masz urządzenia fizycznego, włącz funkcję ograniczania wykorzystania procesora w Narzędziach deweloperskich w Chrome.
- 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:
- Przygotuj stronę, którą chcesz przetestować.
- Otwórz Narzędzia deweloperskie w Chrome i otwórz panel Wydajność.
- Kliknij przycisk Record (Zarejestruj) w lewym górnym rogu panelu, aby rozpocząć śledzenie.
- Wykonaj interakcje, które chcesz profilować.
- 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.
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ą:
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.
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:
- Po otwarciu Narzędzi deweloperskich otwórz w nich kartę Lighthouse.
- W sekcji Tryb wybierz opcję Zakres czasu.
- W sekcji Urządzenie wybierz typ urządzenia Komputer lub Urządzenie mobilne.
- Upewnij się, że pod etykietą Kategorie jest zaznaczone przynajmniej pole wyboru Skuteczność.
- Kliknij przycisk Rozpocznij okres.
- Przetestuj interakcje na stronie, dla której chcesz uzyskać dane.
- Kliknij przycisk Zakończ okres i poczekaj na pojawienie się kontroli.
- 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.
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.
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.
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.
Znajdowanie kosztownych wywołań zwrotnych zdarzeń można wykonać, obserwując w śladach konkretnej interakcji te elementy:
- 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.
- 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:
- 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ę. - 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.
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 zwrotnerequestAnimationFrame()
są uruchamiane w fazie renderowania pętli zdarzeń i muszą się zakończyć przed wyświetleniem następnej ramki. Jeśli używaszrequestAnimationFrame()
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.
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ść.