[object Object]

Interakcja z Next Paint (INP) to oficjalny wskaźnik Google Core Web Vital wprowadzony w celu oceny ogólnej responsywności interfejsu stron internetowych.

W przeciwieństwie do opóźnienia pierwszego wejścia (FID), które oceniało tylko początkową interakcję podczas ładowania strony, INP obserwuje opóźnienie wszystkich interakcji użytkownika (kliknięć, dotknięć i wejść z klawiatury), które mają miejsce przez cały czas trwania wizyty użytkownika na stronie.

Podsumowanie w pierwszej kolejności

Interakcja z Next Paint (INP) to wskaźnik Core Web Vital, który mierzy czas, jaki upłynął od interakcji użytkownika ze stroną (kliknięcie, dotknięcie lub naciśnięcie klawisza) do chwili, gdy przeglądarka wyświetli na ekranie zaktualizowaną ramkę wizualną.Opóźnienie INP składa się z trzech podczęści: opóźnienia wejściowego, czasu przetwarzania i opóźnienia prezentacji.Zaliczony wynik INP wynosi 200 milisekund lub mniej w 75. percentylu wizyt rzeczywistych użytkowników.W marcu 2024 r. INP oficjalnie zastąpiło opóźnienie pierwszego wejścia (FID) w algorytmach rankingu wyszukiwania Google.

Progi punktacji i skala ocen INP

Aby zapewnić użytkownikom responsywność, strony internetowe muszą spełniać następujące progi podstawowych wskaźników internetowych dla INP ocenianego na 75. percentylu wizyt rzeczywistych użytkowników:

• Dobrze: $\le 200\text {ms} $ (Zielony) — Szybka i płynna reakcja interfejsu użytkownika, która dla użytkowników jest natychmiastowa.
• Wymaga poprawy: $> 200\text {ms} $ i $\le 500\text {ms} $ (bursztynowy) - zauważalne opóźnienie podczas kliknięć lub dotknięć, które wpływa na zaangażowanie użytkownika.
• Słabe: $> 500\text {ms} $ (czerwony) - Poważne zawieszanie interfejsu i blokowanie głównego wątku, które prowadzi do frustracji użytkowników i wysokiego współczynnika odrzuceń.

Trzy składniki opóźnienia interakcji INP

Kiedy użytkownik wchodzi w interakcję z elementem na stronie internetowej, całkowite opóźnienie interakcji mierzone przez INP składa się z trzech kolejnych faz:

1. Opóźnienie wejścia: Czas, jaki upłynął pomiędzy zainicjowaniem przez użytkownika interakcji fizycznej (kliknięciem, dotknięciem lub naciśnięciem klawisza) a rozpoczęciem wykonywania powiązanych procedur obsługi zdarzeń przez główny wątek przeglądarki.Opóźnienie wejściowe jest spowodowane głównie przeciążeniem głównego wątku z powodu długich zadań JavaScript działających w tle podczas ładowania strony lub ponownego renderowania komponentów.
2. Czas przetwarzania: Czas spędzony na wykonywaniu kodu JavaScript we wszystkich zarejestrowanych detektorach zdarzeń dla tej interakcji (takich jak onclick, onkeydown lub reaktywne procedury obsługi aktualizacji stanu platformy).
3. Opóźnienie prezentacji: Czas, jaki upływa od zakończenia obsługi zdarzeń do zakończenia przez przeglądarkę obliczeń ponownego obliczania stylu, układu, malowania zaktualizowanych pikseli i wyświetlania kolejnej klatki wizualnej na sprzęcie wyświetlającym użytkownika.

Matematycznie całkowite opóźnienie INP dla pojedynczej interakcji wyraża się jako:

$$\text{Opóźnienie INP} = \text{Opóźnienie wejścia} + \text{Czas przetwarzania} + \text{Opóźnienie prezentacji}$$

Dlaczego Google zastąpiło FID przez INP w marcu 2024 r

Opóźnienie pierwszego wejścia (FID) mierzyło tylko składową opóźnienia wejścia pierwszej interakcji na stronie.Chociaż FID pomógł zidentyfikować strony, na których blokowanie głównego wątku uniemożliwiało początkową interakcję, miał dwa główne ograniczenia techniczne:

• Zakres pojedynczej interakcji: FID zignorował wszystkie kolejne interakcje użytkownika po załadowaniu strony, nie mogąc uchwycić powolności podczas złożonej nawigacji po stronie klienta aplikacji jednostronicowej (SPA).
• Niekompletny pomiar opóźnienia: FID zmierzył tylko opóźnienie wejścia, całkowicie ignorując czas przetwarzania i opóźnienie prezentacji.Procedura obsługi zdarzeń, której wykonanie trwało 2000 ms, uzyskała pozytywny wynik FID, jeśli początkowe opóźnienie wejściowe było mniejsze niż 50 ms.

W marcu 2024 r. Google oficjalnie zastąpiło FID przez INP jako oficjalny czynnik rankingowy Core Web Vital.INP ocenia 75. percentyl wszystkich interakcji podczas sesji, zapewniając znacznie bardziej wszechstronną i realistyczną ocenę doświadczeń rzeczywistych użytkowników we współczesnych aplikacjach internetowych.

Kwalifikujące się interakcje użytkowników a niekwalifikujące się zdarzenia

INP mierzy dyskretne interakcje użytkownika, w przypadku których użytkownik oczekuje natychmiastowej wizualnej informacji zwrotnej.Zrozumienie, które interakcje liczą się do INP, jest niezbędne do profilowania diagnostycznego:

Zmierzone interakcje

• Kliknięcia myszą: Klikanie przycisków, łączy, kontrolek formularzy lub niestandardowych komponentów interaktywnych.
• Dotknięcie ekranu dotykowego: Dotykanie elementów na urządzeniach mobilnych lub tabletach.
• Naciśnięcie klawiatury: Naciśnięcie klawiszy klawiatury fizycznej lub wirtualnej (takich jak Enter , Space lub klawiszy alfanumerycznych podczas wprowadzania tekstu).

Zdarzenia niezmierzone

• Przewijanie i przesuwanie: Przewijanie strony lub przesuwanie komponentu mapy nie wyzwala pomiaru INP.
• Najechanie: Przesuwanie kursora myszy nad elementem bez kliknięcia jest wykluczone z INP.
• Animacje ładowania strony: Animacje CSS uruchamiane automatycznie bez udziału użytkownika nie wliczają się do INP.

Sprawdzone strategie techniczne optymalizujące wysokie wyniki INP

Aby zmniejszyć opóźnienie INP poniżej progu 200 ms, zespoły inżynieryjne powinny wdrożyć następujące optymalizacje techniczne:

1. Podziel długie zadania głównego wątku: Użyj requestIdleCallback() , setTimeout() lub scheduler.yield(), aby podzielić zadania wykonawcze dłuższe niż 50 ms na mniejsze fragmenty, umożliwiając przeglądarce natychmiastowe przetwarzanie danych wejściowych przychodzących użytkownika pomiędzy blokami wykonywania zadań.
2. Optymalizuj aktualizacje stanu struktury: W aplikacjach Vue 3 i Nuxt 4 odłóż niekrytyczne ponowne renderowanie interfejsu użytkownika, korzystając z asynchronicznych granic komponentów lub odroczonych reaktywnych aktualizacji ref.
3. Minimalizuj rozrzut układu: Unikaj czytania właściwości geometrii DOM (takich jak offsetHeight lub getBoundingClientRect() ) natychmiast po zmutowaniu elementów DOM, co wymusza synchroniczne ponowne obliczenie układu.
4. Zmniejsz głębokość drzewa DOM: Zbyt duże drzewa DOM zwiększają kalkulację stylu i koszt układu podczas opóźnienia prezentacji.Utrzymuj łączną liczbę elementów DOM poniżej 1500 węzłów na stronę.
5. Optymalizuj skrypty innych firm: Ciężkie skrypty innych firm (analityczne, sieci reklamowe, widżety czatu z klientami) często przejmują główny wątek.Odłóż lub odciąż pracownika internetowego nieistotne skrypty innych firm.

Ciągłe monitorowanie INP za pomocą SimpleOps

SimpleOps stale śledzi wydajność INP, przechwytując dane dotyczące zestawu danych rzeczywistych użytkowników w raporcie Chrome UX (CrUX) oraz syntetyczne audyty Lighthouse.SimpleOps automatycznie powiadamia Twój zespół, gdy INP Twojej witryny na 75. percentylu przekracza 200 ms, zapewniając, że Twoja aplikacja pozostanie szybka, płynna i zoptymalizowana pod kątem rankingów w wyszukiwarkach.