Interaction to Next Paint - Input Delay

Problemy z Interaction to Next Paint (INP) spowodowane przez input delay

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

W tym artykule skupię się na 'Input Delay'. Jak wpływa on na problemy z Interaction to Next Paint, a następnie wyjaśnię, jak zminimalizować input delay, aby poprawić Interaction to Next Paint!

WSKAZÓWKA INP: w większości przypadków input delay występuje podczas wczesnych etapów ładowania strony!

Czym jest input delay?

Input delay odnosi się do czasu, jaki przeglądarka potrzebuje na rozpoczęcie przetwarzania wywołania zdarzenia po tym, jak użytkownik wejdzie w interakcję ze stroną (np. kliknięcie przycisku lub naciśnięcie klawisza). Chociaż zawsze występuje pewien input delay (nawet przeglądarki potrzebują czasu na zaplanowanie wywołań), input delay pojawia się, gdy przeglądarka jest zajęta wykonywaniem innych zaplanowanych zadań i nie może natychmiast zaplanować wywołań żądanych przez interakcję.

Input delay a INP

Interaction to Next Paint (INP) można podzielić na 3 części składowe: 'Input Delay', 'Processing Time' i 'Presentation Delay'

Możesz zauważyć, że nazwy są podobne do starszego wskaźnika Core Web Vitals 'First Input Delay'. Dla tych, którzy nie wiedzą: Interaction to Next Paint jest następcą wycofanego 'First Input Delay'. First Input Delay mierzył czas między pierwszą interakcją a wywołaniem zdarzenia. Mimo że First Input Delay został wycofany, 'Input Delay' nadal odgrywa ważną rolę w poprawie responsywności stron, ponieważ Input Delay jest podstawą każdego Interaction to Next Paint.

Znaczenie input delay

Ponieważ wielu programistów myśli o poprawie INP w kontekście optymalizacji funkcji callback (optymalizacji czasu przetwarzania), 'Input Delay' jest często pomijany. Trzeba przyznać, że Input Delay zwykle nie jest największą częścią INP, ale mimo to, jeśli zoptymalizujemy input delay, często zoptymalizujemy wszystkie interakcje INP naraz!

W CoreDash zbieramy miliony punktów danych Core Web Vitals co godzinę. Na podstawie tych danych Input Delay stanowi zaledwie 18% Interaction to Next Paint. I chociaż to nie jest tak dużo jak Presentation Delay czy Processing Time, nadal jest to znacząca część.

Przyczyny Input Delay:

Input delay występuje, gdy główny wątek jest zajęty wykonywaniem innych zadań. Te zadania mogą pochodzić z:

1. Wczesne zadania. Normalne, odroczone i asynchroniczne skrypty, które są kolejkowane na początku, tworzą wczesne zadania
   
2. Zaplanowane zadania. Niektóre zadania nie uruchamiają się na początku ładowania strony, ale mogą być zaplanowane na czas po załadowaniu strony. Te zadania mogą również wpływać na INP i powodować input delay. Na przykład skrypty uruchamiane po zdarzeniu window.onload lub skrypty, które są opóźnione przez tak zwane wtyczki optymalizacyjne.
   
3. Powtarzające się zadania. Cykliczne zadania przez setInterval(), które zajmują stosunkowo dużo czasu na wykonanie i współwystępują z INP
4. Nakładające się wywołania: Nakładające się wywołania są częstą przyczyną input delay. Wiele wywołań zaplanowanych blisko siebie może tworzyć kolejkę, opóźniając przetwarzanie następnej interakcji.

Minimalizacja input delay

1. Podziel długie wczesne zadania na wiele mniejszych zadań. Podczas długich zadań przeglądarka nie może reagować na dane wejściowe użytkownika, natomiast po każdym krótkim zadaniu przeglądarka może reagować na dane wejściowe. Dlatego podziel długie zadania za pomocą scheduler.yield() (eksperymentalne) lub opakowując każdą funkcję w timeout o wartości 0 za pomocą setTimeout(callback,0)
2. Zarządzaj elementami interaktywnymi. Rozważ nieprezentowanie elementów interaktywnych (takich jak pasek wyszukiwania) przed pełnym załadowaniem kodu JavaScript, który nimi steruje. Zapobiegnie to wczesnym kliknięciom elementów, które nie są gotowe do obsługi kliknięć. Aby zoptymalizować UX dla tego wzorca, możesz priorytetyzować ładowanie niezbędnego kodu JavaScript lub tymczasowo ukryć/wyłączyć element, dopóki nie będzie funkcjonalny.
3. Wykonywanie skryptów w czasie bezczynności: Zaplanuj niekrytyczne skrypty do uruchomienia podczas okresów bezczynności przeglądarki za pomocą requestIdleCallback(). requestIdleCallback uruchamia się, gdy przeglądarka jest bezczynna i nie musi przetwarzać danych wejściowych użytkownika.
4. Użyj web workers, aby uruchomić 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 powstawaniu problemów z input delay w INP.
5. Sprawdzaj oczekujące dane wejściowe podczas powtarzających się zadań. Przed wykonaniem zestawu zaplanowanych zadań sprawdź, czy nie ma oczekujących danych wejściowych. Jeśli jakieś dane wejściowe oczekują, ustąp głównemu wątkowi.
6. Usuń niepotrzebny kod. Regularnie audytuj swoje skrypty i usuwaj zbędny kod lub nawet skrypty, ponieważ każda linia kodu może potencjalnie spowodować input delay, który wpływa na Interaction to Next Paint.

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in window.scheduler) {
    return await window.scheduler.yield();
  }
  return new Promise((resolve) => {
    setTimeout(resolve, 0);
  });
}

Praktyczne zastosowania

Przejdźmy do najważniejszego pytania: 'Co to wszystko oznacza dla mojej strony'. Omówmy to na przykładzie WordPress i REACT.

WordPress

WordPress, ze względu na swoją naturę, często zawiera motyw i dużą liczbę wtyczek. Zarówno wtyczki, jak i motywy często polegają na JavaScript w celu zapewnienia funkcjonalności. Ponieważ te wtyczki i motywy są utrzymywane przez zewnętrznych programistów, nie mamy kontroli nad ich zawartością. Oznacza to, że nie możemy zmieniać plików i optymalizować 'złego kodu'. Nawet jeśli skrypty zachowują się poprawnie, nie ma gwarancji, że będzie tak w przyszłości.

Aby zminimalizować input delay i zoptymalizować Interaction to Next Paint (INP), wykonaj następujące kroki:

• Unikaj używania wtyczek, gdy to możliwe. Chociaż wtyczki są łatwym sposobem na dodanie funkcjonalności, często dodają skrypty do strony. Te skrypty spowodują input delay, który wpływa na INP. Przy każdej wtyczce zadaj sobie pytanie: Czy mogę osiągnąć tę samą funkcjonalność za pomocą własnego kodu?
• Wybieraj lekkie motywy. Wiele motywów WordPress 'oferuje wszystko'. Choć wydaje się to świetnym pomysłem, oznacza to, że prawdopodobnie są wypełnione funkcjonalnością, która nie jest używana, ale zajmuje cenny czas procesora.
• Unikaj kreatorów stron. Kreatory stron takie jak Elementor czy WPBakery zapewniają przyjazny dla użytkownika, wizualny interfejs do budowania układów. Niestety często polegają na skryptach do prezentowania tego układu odwiedzającym.
• Ładuj skrypty tylko wtedy, gdy są potrzebne. WordPress ma tendencję do ładowania wszystkich skryptów na wszystkich stronach. Aby to naprawić, po prostu utwórz motyw potomny i wyrejestruj niepotrzebne skrypty dla każdego typu strony. Na przykład:

function my_deregister_scripts() {
  if ( ! is_page( 'contact' ) ) { 
    // Example: Deregister contact form script on non-contact pages
    wp_dequeue_script( 'contact-form-script' );
  }
}
add_action( 'wp_enqueue_scripts', 'my_deregister_scripts' );

REACT / NextJS

Strony React lub NextJS są głównie napędzane przez JavaScript. Wykonywanie tych skryptów zajmie czas i spowoduje input delay dla Interaction to Next Paint (INP)

• Używaj komponentów serwerowych. Komponenty serwerowe są renderowane na serwerze, a nie na kliencie, co prowadzi do zmniejszenia ilości JavaScript
• Ładuj skrypty zewnętrzne z odpowiednią strategią. Ładuj skrypty zewnętrzne po hydratacji lub nawet podczas czasu bezczynności przeglądarki
• Zaimplementuj wzorzec idle until urgent: Ten wzorzec priorytetyzuje interakcje użytkownika nad zadaniami w tle i tworzy tymczasowe stany, podczas gdy przeglądarka używa requestIdleCallback do wykonywania niekrytycznych zadań podczas okresów bezczynności przeglądarki.
• Leniwie ładuj komponenty. Leniwie ładuj komponenty, które nie są natychmiast potrzebne, używając React.lazy() lub NextJS dynamic()
• Używaj suspense dla komponentów interaktywnych. Rozważ renderowanie po stronie klienta tylko tych komponentów interaktywnych, które wymagają hydratacji, aby stały się interaktywne.