INP (Interaction to Next Paint) – czym jest nowy wskaźnik internetowy w Core Web Vitals?

Jak oblicza się wartość INP?

Wartość INP jest obliczana od momentu, kiedy użytkownik opuszcza witrynę i otrzymuje pojedynczą wartość odzwierciedlającą ogólną responsywność strony przez cały okres jej działania. Niski wynik INP świadczy o tym, że strona efektywnie odpowiada na interakcje użytkownika.

Jakie zdarzenia są monitorowane w Interaction to Next Paint?

W Interaction to Next Paint monitorowane są 3 typy zdarzeń:

• Kliknięcia – rejestruje, jak szybko strona reaguje na kliknięcia użytkownika.
• Naciśnięcia klawiszy – mierzy czas reakcji strony w odpowiedzi na naciśnięcie klawisza na klawiaturze fizycznej lub ekranowej.
• Stuknięcia – ocenia, jak płynnie strona reaguje na kliknięcia podczas korzystania z urządzeń z ekranem dotykowym.

 Zapamiętaj!

Najeżdżanie kursorem i przewijanie myszką nie wpływają na wartość wskaźnika INP. Natomiast przewijanie za pomocą klawiatury (np. spacji, Page Up, Page Down itp.) inicjowane przez naciśnięcie klawisza może aktywować zdarzenia rejestrowane przez INP. Samo przewijanie, jako działanie, nie jest brane pod uwagę przy obliczaniu wartości Interaction to Next Paint.

Jakie są różnice pomiędzy FID a INP?

Różnice pomiędzy FID (opóźnieniem przy pierwszym działaniu), a INP (interakcją do kolejnego wyrenderowania) szczegółowo omówiono w poniższej tabeli.

Porównanie wskaźników Core Web Vitals: FID (First Input Delay) do INP (Interaction to Next Paint)

Aby lepiej zrozumieć różnice pomiędzy wskaźnikami FID (First Input Delay) a INP (Interaction to Next Paint), wyjaśniamy ich działanie na konkretnych przykładach.

Przykład 1. Działanie wskaźnika FID (First Input Delay)

Użytkownik klika rozwijalne menu (z ang. pull-down menu; pop-up menu) tuż po załadowaniu strony. FID mierzy czas od kliknięcia użytkownika do momentu pojawienia się pull-down menu. Jeżeli przeglądarka jest „zajęta” ładowaniem strony, może wystąpić zauważalne opóźnienie, które to z kolei prowadzi do złego doświadczenia użytkownika (UX).

Przykład 2. Działanie wskaźnika INP (Interaction to Next Paint)

Użytkownik wchodzi w interakcję z różnymi elementami strony internetowej, np. wpisuje frazę w pole wyszukiwania, wybiera elementy z menu i klika różne odnośniki. INP mierzy responsywność każdej z tych interakcji, zapewniając szerszy obraz ogólnej interaktywności strony podczas wizyty użytkownika.

Jak mierzony jest wskaźnik INP?

To, jak mierzony jest wskaźnik INP najlepiej ilustrują poniższe 3 kroki:

Krok 1. Początek interakcji

Pomiar wskaźnika INP rozpoczyna się w momencie, w którym użytkownik zaczyna interakcję na stronie, np. poprzez kliknięcie myszką, dotknięcie ekranu czy naciśnięcie klawisza na klawiaturze.

Krok 2. Przetwarzanie

Strona, za pomocą JavaScriptu, przetwarza to działanie (np. kliknięcie myszką na obiekt w witrynie), co może wiązać się ze zmianami w strukturze strony (DOM).

Krok 3. Wyświetlanie zmian

Na końcu pomiaru wskaźnika INP strona pokazuje zmiany użytkownikowi, np. poprzez modyfikację tekstu lub koloru przycisku.

Jak sprawdzić INP strony internetowej? Zestaw 4 narzędzi

Aby sprawdzić INP strony internetowej, możesz skorzystać z kilku dostępnych narzędzi terenowych. Należą do nich:

1. PageSpeed Insights

PageSpeed Insights (PSI) to narzędzie od Google, które analizuje zawartość strony internetowej i przedstawia sugestie, jak można ją przyspieszyć, w tym informacje o INP i innych Core Web Vitals.

Aby skorzystać z PageSpeed Insights, musisz wykonać 3 kroki:

1. Wejdź na stronę PageSpeed Insights.
2. Wpisz adres URL strony, którą chcesz sprawdzić.
3. Kliknij „Analizuj”, aby zobaczyć wyniki, w tym INP.

2. Chrome DevTools

Chrome DevTools to zbiór narzędzi, które zapewniają możliwość testowania INP i innych wskaźników wydajności bezpośrednio w przeglądarce.

Jeżeli chcesz użyć Chrome DevTools, podążaj zgodnie z poniższymi wskazówkami:

• Otwórz stronę w przeglądarce Chrome.
• Kliknij prawym przyciskiem myszy i wybierz „Zbadaj”, aby przejść do narzędzi DevTools.
• Wybierz zakładkę „Performance".
• Kliknij ikonę nagrywania, odśwież stronę i wykonaj interakcje, które chcesz zmierzyć.
• Zatrzymaj nagrywanie i przeanalizuj wyniki. Szukaj długich zadań lub opóźnień w sekcji „Experience".

3. Lighthouse

Lighthouse to narzędzie służące do audytu strony internetowej, które pozwala na poprawę jakości witryn (dostępne również jako część Chrome DevTools).

Aby uzyskać dostęp do Lighthouse i skorzystać z jego funkcjonalności, postępuj według następujących kroków:

• Otwórz DevTools w Chrome.
• Przejdź do zakładki „Lighthouse".
• Zaznacz „Performance” i kliknij „Generate report".
• W wygenerowanym raporcie znajdziesz informacje o INP i innych wskaźnikach Core Web Vitals.

4. Rozszerzenie Web Vitals

Rozszerzenie Web Vitals dla Chrome umożliwia bieżące monitorowanie Core Web Vitals, w tym INP, bezpośrednio w przeglądarce.

Jeżeli zależy Ci na użyciu rozszerzenia Web Vitals, podążaj zgodnie z następującymi punktami z krótkiej instrukcji:

• Zainstaluj rozszerzenie Web Vitals dla Chrome.
• Odwiedź stronę, którą chcesz sprawdzić.
• Kliknij ikonę rozszerzenia, aby zobaczyć aktualne statystyki INP i inne wskaźniki.

Jak poprawić INP? Najlepsze praktyki w optymalizacji strony pod kątem nowego wskaźnika Core Web Vitals

Optymalizacja interakcji do kolejnego wyrenderowania (INP) to podstawowa czynność w poprawie responsywności strony internetowej oraz doświadczenia użytkownika (UX). Praca nad wskaźnikiem Interaction to Next Paint wymaga doświadczenia i wiedzy webmasterskiej.

Poniżej przedstawiamy TOP 4 najczęstszych praktyk, dzięki którym poprawisz wynik INP.

1. Zidentyfikuj problem niskiej wartości INP

Pierwszą praktyką, którą należy wykonać, by poprawić INP, jest identyfikacja problemu niskiej wartości tego wskaźnika. Aby zlokalizować potencjalne przeszkody, skorzystaj z danych laboratoryjnych (lab data) poprzez użycie opcji Console Logging (stanowiącej rozszerzenie Web Vitals dla przeglądarki Chrome). Opcjonalnie dodaj fragment JavaScript INP do kodu swojej witryny, aby rejestrować wydajność każdej interakcji na bieżąco.

W identyfikacji problemu niskiego wyniku Interaction to Next Paint pomocne mogą okazać się narzędzia Lighthouse, Chrome DevTools lub WebPageTest. Ich użycie ułatwia identyfikację elementów strony lub skryptu, przyczyniających się do opóźnienia oraz czynności, które mogą być potrzebne do ich optymalizacji.

2. Zmniejsz opóźnienie sygnału wejściowego

Opóźnienie sygnału wejściowego to czas między interakcją użytkownika z urządzeniem (np. kliknięciem lub dotknięciem ekranu) a momentem, w którym aplikacja lub strona internetowa zaczyna przetwarzać tę interakcję.

Zminimalizuj opóźnienie sygnału wejściowego – możesz to zrobić na kilka sposobów:

• podziel długie zdania na krótsze,
• użyj metryki mierzącej reaktywność ładowania strony (TBT), aby zidentyfikować działania w tle, które mogą blokować interakcje użytkownika,
• unikaj powtarzających się timerów, powodujących nadmiernie obciążenie głównego wątku.

3. Zadbaj o optymalizację wywołań zwrotnych zdarzeń

Wywołanie zwrotne zdarzeń to funkcja wykonywana w odpowiedzi na określone zdarzenie, takie jak kliknięcie przycisku lub zmiana danych, uruchamiana automatycznie przez system zarządzania zdarzeniami.

Jeżeli chcesz poprawić wynik INP, unikaj projektowania zbyt złożonych i skomplikowanych układów stron, ponieważ te działania mogą doprowadzić do ich dezorganizacji oraz uszkodzeń.

4. Zmniejsz opóźnienie prezentacji

Opóźnienie prezentacji to czas potrzebny przeglądarce na wyrenderowanie następnej klatki po wykonaniu wywołań zwrotnych zdarzeń, czyli od momentu zakończenia przetwarzania interakcji użytkownika do momentu wizualnego przedstawienia wyników tej interakcji na ekranie.

Aby zmniejszyć opóźnienie prezentacji i poprawić wynik INP, wykonaj następujące czynności:

• Zminimalizuj rozmiar DOM, ponieważ mniejszy obiektowy model dokumentu przyspiesza renderowanie.
• Unikaj dużych i złożonych układów strony, które mogą spowalniać renderowanie.
• Zredukuj zakres i złożoność obliczeń CSS, aby przyspieszyć czas potrzebny na wyświetlenie zmian.
• Podziel zadania wykonywane w wywołaniach zwrotnych zdarzeń na mniejsze, aby uniknąć blokowania wątku głównego.
• Wykorzystaj techniki, takie jak ‘setTimeout’, aby odłożyć mniej krytyczne zadania na później.

Wciąż nie wiesz, jak poprawić INP na swojej stronie? Skonsultuj się z zespołem naszych ekspertów z SEMPIRE, którzy pomogą Ci w optymalizacji nowego wskaźnika Core Web Vitals.

Dlaczego Google wprowadził INP jako wskaźnik w Core Web Vitals?

Google wprowadził INP jako wskaźnik w Core Web Vitals, aby lepiej odzwierciedlać jakość doświadczenia interakcji użytkownika ze stroną internetową. Wprowadzenie Interaction to Next Paint wiązało się z ograniczeniami jego poprzednika, FID (First Input Delay).

Do ograniczeń FID należą m.in.:

• pomiar czasu opóźnienia reakcji w odpowiedzi na pierwszą interakcję użytkownika ze stroną (FID nie uwzględnia opóźnień w interakcjach, które następują po pierwszej);
• brak uwzględnienia interakcji bez odpowiedzi (FID nie bierze pod uwagę interakcji, które nie wywołują odpowiedzi przeglądarki, takich jak przewijanie, czy animacje);
• zmienność wyników (istnieją przypadki, w których FID wykazuje dużą zmienność w zależności od warunków sieciowych, konfiguracji urządzenia użytkownika oraz innych czynników zewnętrznych – w rezultacie wyniki nie są w pełni spójne pomiędzy różnymi sesjami użytkowników).

Wprowadzony od marca 2024 INP uwzględnia wszystkie interakcje (nie tylko pierwszą), ponieważ analizuje nawet najwolniejsze działania w całym okresie funkcjonowania strony internetowej.

Jak INP wpływa na doświadczenie użytkownika i pozycjonowanie strony w wyszukiwarkach?

INP ma bezpośredni wpływ na doświadczenie użytkownika i pozycjonowanie strony w wyszukiwarkach. Poprawa wskaźnika Interaction to Next Paint zakłada szybsze reagowanie na interakcje internauty w witrynie, co przekłada się na dłuższy czas spędzany na stronie, niższy współczynnik odrzuceń oraz potencjalnie wyższą konwersję. 

Lepsze doświadczenie użytkownika (UX) z kolei przekłada się na wyższe pozycje stron w SERP-ach. Google jasno wskazuje na to, że Core Web Vitals należą do czynników rankingowych, uwzględnianych przy określaniu miejsca strony w wynikach wyszukiwania.

FAQ – lista najczęściej zadawanych pytań na temat Interaction to Next Paint (INP)

Jakie czynniki mogą negatywnie wpływać na INP i jak je zidentyfikować?

Czynniki negatywnie wpływające na INP mogą obejmować:

• wolne serwery,
• zasoby blokujące renderowanie (skrypty JavaScript i arkusze stylów CSS),
• duże pliki multimedialne,
• niewystarczającą optymalizację obrazów,
• zewnętrzne skrypty i czcionki (takie jak biblioteki JavaScript, widgety społecznościowe).

Identyfikacja tych czynników może odbywać się poprzez narzędzia do analizy wydajności strony internetowej, takie jak Google PageSpeed Insights, Lighthouse, czy WebPageTest. Te narzędzia oferują szczegółowe raporty na temat czynników wpływających na INP i zalecenia dotyczące optymalizacji.

Czy INP jest ważny dla wszystkich typów stron internetowych?

Tak, INP jest ważnym wskaźnikiem dla wszystkich typów stron internetowych, ponieważ bezpośrednio wpływa na doświadczenia użytkowników. Niezależnie od tego, czy strona jest sklepem internetowym, portalem informacyjnym, blogiem, czy platformą społecznościową, szybkość ładowania jest kluczowa dla utrzymania zainteresowania użytkownika. Strony wolno wczytujące się mogą prowadzić do frustracji internautów, zwiększonej liczby odrzuceń i, ostatecznie, niższej konwersji lub zaangażowania.
W jaki sposób aktualizacje strony internetowej mogą wpłynąć na INP?
Aktualizacje strony internetowej mogą mieć zarówno pozytywny, jak i negatywny wpływ na INP, w zależności od charakteru i sposobu implementacji tych zmian. Poniżej przedstawiliśmy scenariusze obu sytuacji:

Pozytywny wpływ:

• Optymalizacja obrazów i innych zasobów multimedialnych może poprawić INP.
• Usuwanie niepotrzebnych skryptów i arkuszy stylów lub opóźnienie ładowania niekrytycznych zasobów mają znaczenie dla przyspieszania ładowania strony.
• Użycie nowoczesnych technologii webowych, takich jak lazy loading, znacznie poprawia wydajność strony.

Negatywny wpływ:

• Dodawanie zasobów, które blokują renderowanie, takich jak zewnętrzne skrypty czy duże obrazy bez odpowiedniej optymalizacji, może spowolnić INP.
• Zwiększenie złożoności strony bez odpowiedniej optymalizacji wydajności prowadzi do dłuższego czasu ładowania.