INP – czym jest nowy wskaźnik internetowy w Core Web Vitals? | Sempire
Oferta Black Friday! Pozycjonowanie i kampanie reklamowe w super promocji!

Chcesz pozyskać nowych klientów i zwiększyć sprzedaż?

Zamów bezpłatną konsultację ze Specjalistą od reklamy w Internecie! Otrzymasz darmowe porady, konsultacje i analizę Twojej strony internetowej. Dowiedz się:

  • Jakie działania w Google realizują firmy konkurencyjne
  • Co musisz poprawić na swojej stronie internetowej
  • Ile możesz zyskać wdrażając konkretne rozwiązania

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

Szybkość działania strony to priorytet dla właścicieli firm z branży e-commerce. Jeżeli klient wejdzie na stronę Twojego sklepu, a czas jej pełnego wczytania będzie zbyt długi – szybko ją opuści. Musisz pamiętać o tym, że masz zaledwie 15 sekund na to, aby zachęcić potencjalnego klienta do konwersji. (źrodło: The Daily Egg).

Pojawienie się nowego wskaźnika INP (Interaction to Next Paint) to kolejne wyzwanie dla właścicieli sklepów online w zakresie optymalizacji doświadczenia użytkownika.

Dane wskazują, że aż 93% stron posiada dobry wskaźnik FID na urządzeniach mobilnych, który już w marcu zniknie z zestawu Core Web Vitals. W przypadku nowego wskaźnika INP odsetek ten znacząco maleje, osiągając jedynie 65% (źródło: Web.dev).

W tym artykule wyjaśniamy:

  • jakie są podstawowe wskaźniki internetowe (Core Web Vitals),
  • co to jest INP (Interaction to Next Paint),
  • jaki jest dobry wynik INP,
  • jakie są różnice pomiędzy FID a INP,
  • jak mierzony jest wskaźnik INP,
  • w jaki sposób sprawdzić wskaźnik INP strony internetowej,
  • dlaczego Google wprowadził INP jako wskaźnik w Core Web Vitals,
  • jak INP wpływa na doświadczenie użytkownika i pozycjonowanie strony w wyszukiwarkach.

INP – czym jest nowy wskaźnik internetowy w Core Web Vitals?

Jakie są podstawowe wskaźniki internetowe – Core Web Vitals? 3 wskaźniki

Podstawowe wskaźniki internetowe, znane jako Core Web Vitals, to zestaw metryk stworzonych przez Google. Ich celem jest ocena doświadczeń użytkownika na stronie internetowej, a w ramach analizy koncentrują się na szybkości ładowania witryny, poziomie interaktywności oraz stabilności elementów wizualnych.

Core Web Vitals składa się z 3 głównych wskaźników:

1. LCP (Largest Contenful Paint)

Wskaźnik LCP mierzy czas od początku ładowania witryny aż do pełnego wyrenderowania największego elementu na ekranie (np. grafiki, bloku tekstowego lub materiału audiowizualnego).

LCP Core Web Vitals koncentruje się na postrzeganiu szybkości ładowania strony przez użytkownika, uznając, że szybkie pojawienie się głównych treści witryny jest kluczowe dla dobrego pierwszego wrażenia.

 

Wartości dla wskaźnika LCP
Wartości dla wskaźnika LCP (Largest Contenful Paint)

Dobry wynik dla Largest Contentful Paint: 2,5 sekundy lub mniej.

2. FID (First Input Delay) zastąpiony przez INP (Interaction To Next Paint)

Wskaźnik FID mierzy czas od pierwszej interakcji użytkownika z witryną (np. kliknięcia linku, naciśnięcia przycisku lub zastosowania niestandardowego działania w JavaScript) do momentu, w którym przeglądarka jest w stanie odpowiedzieć na tę interakcję.

Wartości dla wskaźnika FID (First Input Delay)
Wartości dla wskaźnika FID (First Input Delay)

Dobry wynik dla First Input Delay: 100 milisekund lub mniej.

3. CLS (Cumulative Layout Shift)

Wskaźnik CLS mierzy „stabilność wizualną strony”, oceniając, z jaką częstotliwością użytkownicy doświadczają nieoczekiwanych zmian układu treści podczas ładowania witryny.

Wysoki CLS jest frustrujący dla użytkowników, ponieważ oznacza, że elementy na stronie przesuwają się w trakcie ładowania, a to z kolei niejednokrotnie prowadzi do przypadkowych kliknięć lub trudności w odczytywaniu zawartości witryny.

Wartości dla wskaźnika CLS (Cumulative Layout Shift)
Wartości dla wskaźnika CLS (Cumulative Layout Shift)

Dobry wynik dla Cumulative Layout Shift: 0,1 lub mniej (obliczany na podstawie opracowanego wzoru: ułamek wpływu*ułamek odległości=wynik zbiorczego układu).

Co to jest INP (Interaction to Next Paint)?

INP (Interaction to Next Paint), czyli interakcja do kolejnego wyrenderowania, to nowy wskaźnik Core Web Vitals mający na celu ocenę ogólnej responsywności strony internetowej w odniesieniu do interakcji użytkownika.

Wskaźnik INP obserwuje opóźnienia wszystkich interakcji użytkownika ze stroną, takich jak kliknięcia, dotknięcia oraz naciśnięcia klawiszy. Następnie zgłasza pojedynczą wartość, poniżej której znajdowały się wszystkie (lub prawie wszystkie) wymienione interakcje. Niski INP oznacza, że witryna była w stanie szybko reagować na większość interakcji użytkownika.

Uwaga: Od marca 2024 roku nowy wskaźnik internetowy INP zastąpi FID (First Input Delay).

Jaki jest dobry wynik INP? Podstawowe informacje na temat interpretacji wskaźnika

Dobry wynik INP powinien być równy lub niższy od 200 milisekund. Wartość poniżej 200 ms jest uznawana za wskazującą na wysoką responsywność i dobre doświadczenie użytkownika.

Aby jednak lepiej zrozumieć i zinterpretować uzyskane wyniki, warto przeanalizować pozostałe miary INP, które dostarczają następujących komunikatów:

  • wymaga poprawy – w przedziale 200-500 milisekund;
  • zły wynik –  powyżej 500 milisekund.
Wartości dla wskaźnika INP (Interaction to Next Paint)
Wartości dla wskaźnika INP (Interaction to Next Paint)

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.

enlightened 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.

KryteriumFID (First Input Delay)INP (Interaction to Next Paint)

Definicja

Mierzy opóźnienie pomiędzy pierwszą interakcją użytkownika a momentem, gdy przeglądarka zaczyna przetwarzać tę interakcję

Mierzy czas od rozpoczęcia interakcji przez użytkownika do momentu, gdy przeglądarka zaczyna renderować wynik tej interakcji

Obszar koncentracji

Koncentruje się na pierwszej interakcji użytkownika z witryną

Skupia się na wszystkich interakcjach użytkownika z witryną w całym cyklu życia strony WWW

Typ interakcji

Obejmuje kliknięcia, naciśnięcia klawiszy i inne pierwsze interakcje

Obejmuje szeroki zakres interakcji, w tym: kliknięcia, naciśnięcia klawiszy oraz przewijanie za pomocą przycisków na klawiaturze (np. Page Up i Page Down)

Znaczenie

Istotny dla zrozumienia, jak szybko strona reaguje na pierwsze działanie użytkownika

Niezbędny dla oceny ogólnej responsywności strony przez pryzmat interakcji użytkownika podczas całego czasu korzystania z witryny

Pożądane wartości

Istotny dla zrozumienia, jak szybko strona reaguje na pierwsze działanie użytkownika

Równy lub niższy niż 200 ms

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.

Ocena artykułu:

1 2 3 4 5

5 / 5 według 22 opinii

Może Ciebie zainteresować
Ta strona korzysta z ciasteczek aby świadczyć usługi na najwyższym poziomie. Dalsze korzystanie ze strony oznacza, że zgadzasz się na ich użycie.

Dobry wybór!

Przedstawimy strategię i wypromujemy Twój biznes. Daj nam znać o swoim projekcie!

Twoje dane administruje SEMPIRE Europe sp. z o.o.
Więcej o ochronie danych
Administratorem danych osobowych jest SEMPIRE Europe sp. z o.o. z siedzibą w Poznaniu, adres: Plac Andersa 3, 61-894 Poznań, wpisana do rejestru przedsiębiorców prowadzonego przez Sąd Rejonowy Poznań – Nowe Miasto i Wilda w Poznaniu, VIII Wydział Gospodarczy Krajowego Rejestru Sądowego pod nr KRS 0000969190. Przyjmuję do wiadomości, że podanie danych jest dobrowolne, lecz może być niezbędne do przesłania odpowiedzi na zapytanie i przygotowania oferty. Zobacz więcej...