INP (Interaction to Next Paint) to metryka responsywności strony. 12 marca 2024 zastąpiła FID w zestawie podstawowych wskaźników internetowych, co potwierdza wpis web.dev o uruchomieniu INP. Co z tego wynika dla właściciela witryny? W sumie jedna rzecz: wskaźnik INP Core Web Vitals sprawia, że Google ocenia teraz, jak szybko serwis reaguje na każde kliknięcie, a nie tylko na pierwsze. PageSpeed Insights albo Search Console pokazały Ci nową pozycję z oceną “do poprawy”? Nie jesteś wyjątkiem. Niżej po kolei: co ta miara obejmuje, skąd bierze się zły wynik, gdzie go sprawdzić i co zlecić wykonawcy.
Spis treści
Czym jest INP w Core Web Vitals i co dokładnie mierzy?
INP to czas od kliknięcia, dotknięcia ekranu lub naciśnięcia klawisza do chwili, gdy przeglądarka pokaże na ekranie reakcję na tę akcję. I tyle. Metryka bierze pod uwagę interakcje z całej wizyty, więc liczy się zarówno pierwsze kliknięcie, jak i dziesiąte. Na stronie firmowej będzie to rozwinięcie menu albo wpisanie tekstu w pole formularza, w sklepie - użycie filtra produktów lub przycisku dodania do koszyka. Pomiar robi się sam, przez API przeglądarki, więc witryna nie musi niczego raportować (i dobrze, jedna rzecz mniej do pilnowania). Jak ten wskaźnik wpisuje się w cały zestaw, opisujemy w tekście Core Web Vitals a SEO.
INP zamiast FID: co się zmieniło w marcu 2024
FID oceniał wyłącznie opóźnienie pierwszej interakcji. INP sprawdza responsywność przez całą wizytę. No i stąd niespodzianka: serwis z dobrym FID może teraz dostać słabszą notę. Narzędzia Chrome, czyli PageSpeed Insights, CrUX Dashboard i rozszerzenie Web Vitals, pokazują nową metrykę w trójce głównych wskaźników, a sama ocena Core Web Vitals w PageSpeed Insights uwzględnia ją w miejsce poprzedniczki. FID jest wycofywany i część narzędzi może wyświetlać przy nim ostrzeżenie. Według harmonogramu podanego przez zespół Chrome czas na przejście mija 9 września 2024.
Co z tego w praktyce? Gorsza ocena nie oznacza, że strona nagle zaczęła działać wolniej. Zmieniła się miara. Obejmuje więcej sytuacji niż dotąd i wyciąga na wierzch opóźnienia, których wcześniej w raportach po prostu nie było widać.
Gdzie sprawdzić INP w PageSpeed Insights i Search Console
Wynik znajdziesz w dwóch miejscach: w PageSpeed Insights, w sekcji danych od rzeczywistych użytkowników, oraz w raporcie Podstawowe wskaźniki internetowe w Search Console. Dane terenowe pochodzą z Chrome User Experience Report, do którego witryna musi się kwalifikować. Jeśli się kwalifikuje, zawsze dostępny jest obraz dla całej domeny, a w niektórych przypadkach także dla pojedynczego adresu. Granice ocen “dobry”, “do poprawy” i “słaby” podaje dokumentacja metryki INP na web.dev i moim zdaniem to do niej najlepiej odnosić odczyty.
Ale przy małym ruchu danych terenowych może zabraknąć. Co wtedy? Zostaje ręczne przeklikanie typowych ścieżek użytkownika, bo to one najlepiej pokazują kłopoty: wejście na listę produktów, filtrowanie, dodanie do koszyka, wysłanie formularza. Przed rozmową z wykonawcą zanotuj:
- adresy lub grupy adresów z oceną “do poprawy” albo “słaby”,
- czy problem dotyczy urządzeń mobilnych, komputerów, czy obu,
- które elementy reagują z wyczuwalnym opóźnieniem,
- jakie wtyczki i skrypty marketingowe doszły w ostatnich miesiącach.
Co psuje responsywność strony
Winny jest przede wszystkim JavaScript, który zajmuje główny wątek przeglądarki akurat wtedy, gdy użytkownik coś klika. Główny wątek to kolejka, w której przeglądarka wykonuje większość pracy: uruchamia skrypty, przelicza układ i rysuje zmiany. A długie zadanie (z angielskiego long task) to fragment kodu działający na tyle długo, że w tym czasie nic innego nie zostanie obsłużone. Kliknięcie czeka. Najczęstsze źródła takich blokad:
- ciężki JavaScript motywu lub aplikacji,
- rozbudowane wtyczki, zwłaszcza kreatory stron i dodatki ładowane na każdej podstronie,
- skrypty zewnętrzne: czat, analityka, piksele reklamowe, mapy,
- długie zadania uruchamiane po kliknięciu, na przykład przeładowanie całej listy produktów,
- rozbudowana struktura strony z bardzo dużą liczbą elementów.
Na telefonach kłopot widać częściej niż na komputerach. Nic dziwnego, bo słabszy procesor potrzebuje więcej czasu na wykonanie tego samego kodu. W serwisach opartych na WordPressie pierwszym podejrzanym są zwykle dodatki, o czym szerzej piszemy w poradniku o tym, jak poprawić szybkość i wydajność WordPressa.
Jak poprawić INP: co zlecić wykonawcy
Ogólnie chodzi o to, żeby pracę JavaScriptu ograniczyć i podzielić, tak aby przeglądarka mogła szybko odpowiedzieć na akcję użytkownika. Zakres prac polecam ułożyć od rzeczy najprostszych do najbardziej czasochłonnych:
- Przegląd oraz usunięcie zbędnych wtyczek i skryptów zewnętrznych.
- Opóźnione ładowanie kodu niekrytycznego, na przykład czatu dopiero po pierwszej interakcji.
- Podział długich zadań na krótsze, między którymi przeglądarka obsłuży kliknięcie.
- Uproszczenie obsługi kliknięć i formularzy, aby natychmiast pokazywały widoczną reakcję.
- Odchudzenie struktury strony: mniej zagnieżdżonych elementów i sekcji.
- Ponowny pomiar na danych terenowych.
Pierwszy punkt często załatwisz samodzielnie, wyłączając nieużywane dodatki i stare kody śledzące. Reszta to już robota dla programisty, szczególnie gdy witryna działa na frameworku JavaScript - tu przydaje się wiedza, jaką daje optymalizacja frontendu w React i podobnych bibliotekach. Nie wiadomo, od czego zacząć? Punktem wyjścia do ustalenia przyczyn może być audyt serwisu WWW.
Czego spodziewać się po poprawkach
Na efekt w raportach trzeba poczekać. Dane terenowe zbierane są od rzeczywistych użytkowników w dłuższym okresie, więc wykres nie drgnie od razu. Realna korzyść pojawia się wcześniej: menu, filtry i koszyk odpowiadają szybciej, z serwisu po prostu łatwiej korzystać. Klient to czuje niezależnie od tego, co pokaże narzędzie.
I jeszcze jedno. Wynik sprawdzaj po każdym większym wdrożeniu, bo nowa wtyczka albo skrypt marketingowy potrafi cofnąć wcześniejszą pracę (nie ma co się łudzić, że raz zrobione zostanie na zawsze). Traktuj więc INP Core Web Vitals jako stały punkt odbioru zmian na stronie: zanim zaakceptujesz kolejny dodatek, przeklikaj na telefonie najważniejsze ścieżki i porównaj odczyt z poprzednim.
Najczęstsze pytania
Czy słaby wynik INP obniży pozycję mojej strony w Google?
INP jest jedną ze składowych Core Web Vitals, a te należą do sygnałów opisujących jakość korzystania ze strony. Ale nie da się uczciwie przewidzieć, jak pojedynczy wskaźnik przełoży się na widoczność konkretnej witryny. Pewne jest co innego: wolno reagujący serwis utrudnia użytkownikom wykonanie zadania, z którym przyszli.
Dlaczego PageSpeed Insights nie pokazuje INP dla mojej strony?
Najczęściej dlatego, że w Chrome User Experience Report nie ma wystarczających danych dla sprawdzanego adresu. Bywa też tak, że wynik jest dostępny tylko dla całej domeny, a nie dla pojedynczej podstrony. Wtedy zostaje ręczne testowanie typowych ścieżek użytkownika.
Czy muszę jeszcze zajmować się FID?
Nie. Wskaźnik przestał być częścią Core Web Vitals i jest wycofywany z narzędzi Chrome, więc jego odczyty tracą znaczenie. Uwagę i budżet na prace optymalizacyjne lepiej skierować na Interaction to Next Paint.
