Znajdź i napraw problemy z Interaction to Next Paint (INP)

Znajdź i napraw problemy z Interaction to Next Paint (INP)

W naszym poprzednim artykule omówiliśmy Interaction to Next Paint. Jeśli chcesz zapoznać się z podstawami, to świetne miejsce na start!

W tym artykule skupię się na identyfikowaniu różnych problemów z Interaction to Next Paint, a następnie wyjaśnię, jak je naprawić!

INP TIP: w większości przypadków INP będzie znacznie gorszy, gdy użytkownik wchodzi w interakcję ze stroną podczas fazy startowej ładowania strony. Dlatego podczas debugowania INP warto logować wszystkie interakcje oraz stan ładowania strony!

Krok 1: Sprawdź INP w Search Console

"Pierwszy krok do poprawy to przyznanie, że masz problem". Zanim więc zaczniemy cokolwiek naprawiać w Interaction to Next Paint, upewnijmy się, że rzeczywiście mamy problem z Interaction to Next Paint.

Zaloguj się do Google Search Console. W menu po lewej stronie kliknij Core Web Vitals i wybierz Mobile lub Desktop (wskazówka: w większości przypadków problemy z INP występują na urządzeniach mobilnych, więc zacznij od mobile)

Tutaj zobaczysz przegląd wszystkich problemów związanych z Core Web Vitals, które aktualnie występują na Twojej stronie. Jeśli jeden z tych problemów dotyczy INP, potwierdziliśmy, że problem istnieje!

Krok 2: Zidentyfikuj problemy z Interaction to Next Paint

Google Search Console nie dostarcza żadnych informacji poza grupami URL, aby dowiedzieć się, co powoduje problemy z Interaction to Next Paint. Dlatego najczęściej widzę, jak programiści działają na ślepo. Zaczynają usuwać nieużywany JavaScript (zawsze świetny pomysł) i rozbijać główny wątek (też świetny pomysł), ale to rzadko kiedy naprawia INP całkowicie.

Dlatego przy poprawie INP musimy dokładnie wiedzieć, co się dzieje.

Które elementy po interakcji powodują zły wynik INP. Zazwyczaj zły wynik INP nie jest spowodowany jednym elementem, ale kombinacją problemów. Musimy rozwiązywać je jeden po drugim, zaczynając od najgorszych i pracując w górę.
Kiedy te interakcje się zdarzają? Czy występują podczas fazy startowej ładowania strony, czy zdarzają się nawet gdy główna strona
Gdzie te interakcje się zdarzają? Czy występują na każdej stronie, czy tylko na kilku wybranych stronach.
Jak możemy odtworzyć te interakcje? Być może już zauważyłeś, że trudno jest odtworzyć problemy z INP. Dlatego musimy się odpowiednio przygotować, naśladując charakterystyki urządzeń z złym wynikiem INP.

Skonfiguruj śledzenie RUM

Aby odpowiedzieć na wszystkie te pytania, musimy zacząć śledzić prawdziwych użytkowników i logować wszelkie problemy, które mogą wystąpić z Interaction to Next Paint. Istnieje kilka sposobów na włączenie śledzenia RUM. Pierwszy polega na wykorzystaniu biblioteki Web Vitals i wysyłaniu wyników do własnego backendu analitycznego. Zaletą tej metody jest to, że jest tania i elastyczna. Wadą jest to, że może wymagać dużo dodatkowej pracy.

Dobrą alternatywą dla wysyłania danych Core Web Vitals do własnego backendu jest użycie jednego z wielu narzędzi RUM. Opracowaliśmy CoreDash właśnie do takich zastosowań. CoreDash to tanie, szybkie i skuteczne narzędzie RUM, które po prostu wykonuje swoją pracę! Oczywiście istnieje wiele rozwiązań RUM i one również spełnią swoje zadanie (choć w wyższej cenie)

Znajdź wolne interakcje według elementów powodujących wysoki INP

Pierwszą rzeczą do zrobienia jest znalezienie 'najwolniejszych' interakcji, które powodują najgorsze wyniki Time to First Byte. Po prostu posortuj strony według 'INP metric by Elements' w CoreDash, a otrzymasz najwolniejsze interakcje. Kliknij pierwszą linię, aby przefiltrować metryki według tych interakcji.

Znajdź, kiedy występują złe interakcje INP

Następnie posortuj przefiltrowane URL-e według stanu ładowania. To da ci lepszy wgląd w przyczynę źródłową INP. W tym przypadku wysoki INP występuje, gdy zawartość DOM została załadowana. Oznacza to, że skrypty zostały sparsowane, ale skrypty asynchroniczne i zasoby podrzędne strony nie zostały jeszcze załadowane. W tym przypadku INP jest spowodowany wczesnymi kliknięciami, gdy ładowanie strony nie zostało jeszcze całkowicie zakończone!

Kontynuuj, klikając stan ładowania o największym wpływie, aby utworzyć kolejny filtr!

Znajdź URL-e odpowiedzialne za wysokie wyniki INP

Na koniec, gdy przefiltrujemy elementy z najwolniejszą interakcją i odpowiedni stan ładowania, przyjrzymy się URL-om, gdzie INP jest najgorszy. W tym przypadku wyraźnie występuje to na określonym zestawie stron.

Znajdź charakterystyki urządzeń

Na koniec, gdy zidentyfikujemy wolne interakcje, stan ładowania i URL-e powodujące wysoki Interaction to Next Paint, przyjrzymy się, jakie typy odwiedzających powodują najgorsze wyniki INP. Sprawdzimy pamięć urządzenia, przepustowość, rozmiar ekranu itp. Po zidentyfikowaniu tych charakterystyk możemy przejść do odtwarzania i logowania problemu!

Krok 3: Odtwórz i zdebuguj interakcje powodujące wysoki wynik INP

Gdy mamy już wszystkie potrzebne informacje, możemy zacząć zagłębiać się w podstawowe przyczyny Interaction to Next Paint.

Przygotuj się na sukces: odtwórz okoliczności niepowodzenia INP

Następną rzeczą, którą powinniśmy zrobić, jest próba odtworzenia niepowodzenia INP. Robimy to, naśladując okoliczności, w których INP może zawodzić.

Użyj panelu Performance w Chrome: Otwórz narzędzia deweloperskie Chrome (Ctrl-Shift-i) i wybierz panel Performance. Na górnym pasku możesz wybrać CPU Throttle (zwolnij do 4x, aby emulować normalne urządzenie mobilne), Network Throttle (wybierz preset fast 3g, aby naśladować przeciętne urządzenie mobilne) i ustaw hardware concurrency na 4 lub 8, aby naśladować przeciętne urządzenie mobilne.

Aby uruchomić Chrome z mniejszą ilością dostępnej pamięci (choć obniżenie ustawień sieci i CPU często wystarczy!) uruchom Chrome w kontenerze Docker i przydziel mniej pamięci.

Przeładuj stronę, wejdź w interakcję i sprawdź INP za pomocą Core Web Vitals visualizer

Następnym krokiem do znalezienia przyczyny złych wyników INP jest zasymulowanie warunków i potwierdzenie, że wyniki INP są rzeczywiście tak złe, jak raportowano.

Przeładuj stronę i kliknij na właściwy element w odpowiednim momencie

Zdebuguj INP za pomocą śladu wydajności

To jest moment, na który przygotowywałeś się w poprzednich krokach. Czas dowiedzieć się, dlaczego określona interakcja powoduje zły wynik Interaction to Next Paint.

Otwórz ponownie konsolę deweloperską Chrome (Ctrl-Shift-i), przejdź do panelu Performance i tym razem kliknij ikonę okrągłej strzałki, aby przeładować stronę i rozpocząć nagrywanie (lub użyj skrótu Ctrl-Shift-E).

Otwórz ponownie konsolę deweloperską Chrome (Ctrl-Shift-i), przejdź do panelu Performance i tym razem kliknij ikonę okrągłej strzałki, aby przeładować stronę i rozpocząć nagrywanie (lub użyj skrótu Ctrl-Shift-E).

Krok 3: Napraw problemy z INP

Jesteśmy teraz w punkcie, w którym wiemy, jaka interakcja powoduje nasz zły INP i przeanalizowaliśmy dokładnie, co się dzieje podczas tej wolnej interakcji. Oznacza to, że czas zacząć naprawiać Interaction to Next Paint. Interaction to Next Paint można podzielić na 3 fazy: 'input delay', 'processing time' i 'presentation delay'.

Każda faza Interaction to Next Paint powinna być traktowana inaczej!

Minimalizuj Input Delay:

Input delay to czas od interakcji ze stroną do momentu, gdy callback zdarzenia zaczyna się wykonywać. Chociaż zawsze występuje pewien input delay (nawet przeglądarki potrzebują czasu na zaplanowanie callbacków), jest kilka rzeczy do rozważenia:

1. Unikaj długich zadań. Za każdym razem, gdy zadanie się wykonuje, blokuje  główny wątek i pozostawia callbacki zdarzeń w oczekiwaniu. Jest to szczególnie ważne przy optymalizacji wczesnych kliknięć (ponieważ większość skryptów będzie się wtedy wykonywać). 
2. Uważaj przy tworzeniu nowych zadań. Na przykład zadania cykliczne przez setTimeout() lub zadania, które prawdopodobnie wystąpią przed zdarzeniem INP, jak callbacki na zdarzeniu mouseover.
3. Mierz i oceniaj wczesne interakcje. Gdy interaktywny element jest prezentowany wcześnie (na przykład element wyszukiwania na stronie) i jest kontrolowany przez JavaScript, który ładuje się później, każda interakcja z elementem nie wywoła natychmiastowej aktualizacji layoutu. Albo nadaj priorytet funkcjonalności, albo ukryj/wyłącz element, zanim zacznie prawidłowo działać.
4. Użyj web workers do uruchamiania JavaScript poza głównym wątkiem przeglądarki. Web workers pozwalają skryptom działać poza głównym wątkiem. Zapobiegnie to blokowaniu głównego wątku i problemom z input delay INP
   
5. Ładuj opcjonalne skrypty zewnętrzne podczas czasu bezczynności przeglądarki.  Niektóre skrypty są bardziej krytyczne niż inne. Warto nadać im priorytet i ładować mniej ważne skrypty podczas czasu bezczynności przeglądarki. Na przykład skrypt czatu

Minimalizuj processing time

1. Usuń niepotrzebny kod. Niepotrzebny kod to starszy kod, który wciąż się wykonuje, lub nowy kod, który nie jest potrzebny na tej konkretnej stronie, ale wciąż zużywa czas CPU. To zdecydowanie najłatwiejszy sposób na natychmiastową poprawę INP.
2. Odrocz kod, który nie musi się wykonywać przed następnym renderowaniem. Podziel kod na krytyczny, który musi się wykonać przed INP, i niekrytyczny (na przykład wysyłanie analityki) i zaplanuj go po zdarzeniu INP za pomocą metody requestIdleCallback(). 
3. Zoptymalizuj kod, który musi się wykonać przed renderowaniem. Sprawdź swój kod i przepisz wolne lub nieefektywne części.
4. Zapewnij natychmiastową informację zwrotną. Przy skomplikowanych lub potencjalnie wolnych zadaniach zapewnij natychmiastową informację zwrotną przed uruchomieniem głównego kodu.

Minimalizuj Presentation Delay

1.  Utrzymuj DOM mały i prosty. Zasadniczo przeglądarce będzie znacznie łatwiej wyrenderować stronę z niewielką liczbą prostych, niezagnieżdżonych elementów DOM (węzłów HTML) niż stronę z wieloma zagnieżdżonymi węzłami DOM.
   
2. Użyj content-visibility do leniwego renderowania zawartości poza ekranem.  Content-visibility przyspieszy renderowanie widocznych części strony, opóźniając renderowanie zawartości poza ekranem i renderując ją just-in-time.