Popraw Interaction to Next Paint (INP)

Czym jest Interaction to Next Paint (INP)?

Interaction to Next Paint (INP) to stosunkowo nowy i interesujący wskaźnik, który mierzy  responsywność strony internetowej we wszystkich interakcjach na stronie. Niski Interaction to Next Paint zapewnia, że strona będzie niezawodnie responsywna przez cały czas. INP stanie się Core Web Vital w marcu 2024, kiedy Google zastąpi metrykę FID metryką INP.

Aby obliczyć metrykę Interaction to Next Paint, wszystkie różnice między każdą interakcją użytkownika a ostateczną zmianą prezentacji na stronie są zapisywane. Najwyższa wartość ze wszystkich interakcji (lub 98. percentyl) będzie ostateczną  metryką Interaction to Next Paint (INP).

98. percentyl czy najgorszy INP?

INP to metryka, która ma na celu reprezentowanie ogólnego opóźnienia interakcji strony poprzez wybranie jednej z najdłuższych pojedynczych interakcji, które występują podczas wizyty użytkownika na stronie. Dla stron z mniej niż 50 interakcjami łącznie, INP jest interakcją z najgorszym opóźnieniem. Dla stron z wieloma interakcjami, INP to najczęściej 98. percentyl opóźnienia interakcji.

Jak dokładnie działa Interaction to Next Paint (INP)?

Interakcja następuje, gdy odwiedzający klika lub dotyka strony. Ta interakcja może skutkować zmianą prezentacji na ekranie. Interaction to Next Paint (INP) mierzy czas między kliknięciem a prezentacją.

Opóźnienie pojedynczej interakcji składa się z najdłuższego czasu trwania dowolnego zdarzenia będącego częścią interakcji, gdzie czas trwania jest mierzony od momentu, w którym użytkownik wchodzi w interakcję ze stroną, do momentu wyświetlenia następnej klatki po wykonaniu wszystkich powiązanych procedur obsługi zdarzeń. Czas trwania jest sumą następujących przedziałów czasowych:

Jakie są dobre i złe wartości Interaction to Next Paint (INP)?

Jak mierzyć Interaction to Next Paint (INP)?

Interaction to Next Paint można mierzyć tylko narzędziami terenowymi. Aby zmierzyć Interaction to Next Paint, potrzebujemy rzeczywistej interakcji użytkownika. Google mierzy wszystkie interakcje, które rzeczywiści użytkownicy Chrome mają ze stroną i przechowuje je w zbiorze danych CrUX. Zbiór danych CrUX jest oficjalnym zbiorem danych dla Core Web Vitals.

Uzyskaj oficjalne metryki INP

Oficjalne metryki INP możesz uzyskać w PageSpeed Insights lub panelu CrUX i Google BigQuery. PageSpeed Insights poda Ci wynik 75. percentyla za ostatnie 28 dni. Google BigQuery (przez datastudio) da Ci więcej kontekstu historycznego.

Śledzenie Interaction to Next Paint za pomocą Real User Monitoring

Chociaż oficjalny zbiór danych CrUX jest ostatecznym źródłem metryk Interaction to Next Paint, zbiór danych CrUX nie jest tak naprawdę użyteczny, ponieważ jest wysoce zanonimizowany. Zbiór danych CrUX nie zapewnia monitorowania w czasie rzeczywistym ani nie pozwala na zaawansowane filtrowanie. Dlatego konsultanci Web Performance zazwyczaj polegają na Real User Monitoring.

Zmierz Interaction to Next Paint bieżącej sesji.

Najłatwiejszym sposobem na debugowanie Interaction to Next Paint jest Lighthouse w trybie 'timespan'.  Możesz również użyć Core Web Vitals Visualizer lub, jeśli wolisz podejście praktyczne, biblioteki Google Web Vitals JavaScript Library

Zaloguj INP do konsoli za pomocą biblioteki Web Vitals JavaScript

<script type="module">
 import {onINP} 
 from 'https://unpkg.com/web-vitals@3/dist/web-vitals.attribution.js?module';
 onINP(console.log);
</script>

Jak poprawić Interaction to Next Paint?

Interaction to Next Paint to skomplikowana metryka. Twoja strona może być naprawdę szybka i reagować natychmiast w większości przypadków. Niestety, jeśli tylko jedna interakcja jest wolna, wpłynie to na cały Interaction to Next Paint.

Pamiętaj, INP można rozłożyć na input delay, processing time i presentation delay.

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

1. Minimalizuj input delay - zapobiegaj długim zadaniom na głównym wątku

Zazwyczaj każda strona jest mniej responsywna podczas fazy uruchamiania. Wtedy wykonywana jest większość pracy na głównym wątku (parsowanie, dekodowanie, renderowanie i skrypty).  Aby utrzymać główny wątek jak najbardziej wolny, rozważ:

• Usuń nieużywany kod. Można to zrobić poprzez proces zwany tree shaking (usuwanie nieużywanego kodu) i code splitting (grupowanie kodu w wiele małych pakietów, które mogą być ładowane w miarę potrzeb). 
• Ładuj nieistotny kod podczas bezczynności przeglądarki. Na przykład, czy naprawdę potrzebujesz widgetu czatu podczas pierwszych 500ms ładowania strony? Nie, prawdopodobnie nie!
• Zidentyfikuj wolne skrypty wymagające dużo zasobów i przepisz kod, aby był bardziej wydajny.
• Upewnij się, że Twoja strona jest 'łatwa do renderowania'. Unikaj dużych rozmiarów DOM, zbyt wielu lub ogromnych obrazów, zbyt wielu filmów, animacji CSS itp.
  

2. Minimalizuj processing time - zapewnij natychmiastową informację zwrotną, aby strona reagowała bezpośrednio na dane wejściowe użytkownika

Gdy odwiedzający wykonuje akcję, taką jak wysłanie formularza lub dodanie produktu do koszyka, nie czekaj na potwierdzenie po stronie serwera (Twój formularz został wysłany, Twoje produkty zostały dodane do koszyka), ale zapewnij natychmiastową informację zwrotną (wysyłamy Twój formularz, dodajemy produktX do koszyka). 

Również oddaj kontrolę głównemu wątkowi tak szybko, jak to możliwe. Ponieważ JavaScript stosuje zasadę 'run to completion', blokuje główny wątek, dopóki cały kod nie zostanie wykonany. Możesz ręcznie utworzyć punkt przerwania, w którym przeglądarka może zaktualizować układ (a następnie kontynuować resztę kodu) poprzez 'yielding to the main thread'. Najłatwiejszym sposobem na to jest opakowanie części kodu w setTimeout()

const formfeedbackEl = document.getElementById("formfeedback");
const formEl = document.getElementById("form");

formEl.addEventListener("submit", (evt) => {
  evt.preventDefault();
  formfeedbackEl.innerText = "Submitting form ... please hold on";

  let headers = new Headers({ Accept: "application/json" });
  let formData = new FormData(formEl);
  fetch("/form-endpoint", { method: "POST", headers, body: formData })
    .then(function (response) {
      return response.json();
    })
    .then(function (jsonData) {
      formEl.reset();
      formfeedbackEl.innerText = jsonData.message;
    });
   setTimeout(other_code_that_needs_to_run(),0);
});

3. Minimalizuj presentation delay - utrzymuj prostotę!