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 wpływają na 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ć 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żytkowników, które możesz już mieć zidentyfikowane w statystykach witryny. Jeśli np. pracujesz nad witryną e-commerce, typowym działaniem użytkownika będzie 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, gdy uda Ci się odtworzyć wolną interakcję, możesz ją naprawić.
Odtworzenie powolnych interakcji w laboratorium
Istnieje kilka sposobów na odtworzenie powolnego działania w laboratorium podczas testów ręcznych, ale poniżej znajdziesz ramy, które możesz wypróbować.
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 wolnych interakcji może zająć trochę czasu, jeśli nie wiesz, które z nich są problemowe.
Gdy po raz pierwszy otworzysz panel Skuteczność, 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: