Dlaczego INP zastępuje FID w 2024 roku?

W niniejszym artykule przyjrzymy się bliżej INP. Wyjaśnimy, w jaki sposób różni się od innych kluczowych wskaźników jakości strony internetowej – Core Web Vitals oraz przedstawimy metody pomiaru, które pomogą poprawić obecny wynik Interaction to Next Paint strony internetowej!

Czym jest wskaźnik INP?

Interaction to Next Paint to najnowszy wskaźnik Core Web Vitals, który mierzy czas odpowiedzi strony internetowej w związku z danym wejściem użytkownika. Określa, jak szybko dany element witryny zareaguje po wykonaniu na nim określonej akcji. Na przykład:

• monitoruje tempo, z jakim strona reaguje na kliknięcia Internauty.
• określa czas, jaki upływa od momentu naciśnięcia klawisza na klawiaturze fizycznej lub ekranowej do reakcji serwisu,
• analizuje płynność reakcji witryny na stuknięcia podczas korzystania z urządzeń z ekranem dotykowym.

Uwaga! Najeżdżanie kursorem i przewijanie myszką nie mają wpływu na wskaźnik INP. Jednak przewijanie za pomocą klawiatury (np. spacji, Page Up, Page Down itp.), które jest inicjowane przez klienta na witrynie, może uruchomić zdarzenia monitorowane przez INP.

Jeśli zatem właścicielowi strony internetowej zależy na poprawie jej pozycji w organicznych wynikach wyszukiwania, kluczowe jest zrozumienie, czym dokładnie jest INP oraz jak efektywnie go optymalizować w ramach swojego CMS-a. W przeciwnym razie istnieje ryzyko, że Wasza witryna straci ciężko wypracowaną widoczność w SERP-ie w związku z już oficjalnym wdrożeniem tej aktualizacji od marca 2024 roku.

Czym różni się INP od FID?

First Input Delay raportuje jedynie opóźnienie w responsywności pierwszej interakcji użytkownika ze stroną. Pomimo znaczenia first impression, taka akcja nie zawsze jest reprezentatywna dla wszystkich interakcji zachodzących w czasie korzystania z serwisu. Co więcej, FID mierzy tylko część opóźnienia pierwszej akcji. Oznacza to, że oscyluje wokół czasu, który przeglądarka musiała odczekać – z powodu zajętego głównego wątku – zanim rozpoczęła prawidłową obsługę interakcji.

Z kolei INP, zamiast ograniczać się jedynie do pierwszej interakcji, uwzględnia wszystkie akcje. Raportuje w tym jedne z najwolniejszych, które miały miejsce w trakcie korzystania z witryny. W przeciwieństwie do pomiaru jedynie części opóźnienia, jak w przypadku FID-u, INP obejmuje całościowy przedział czasowy. Czyli od rozpoczęcia interakcji, przez obsługę zdarzenia, aż do momentu, gdy przeglądarka jest gotowa do wyrenderowania kolejnej klatki.

Działanie INP vs. FID – różnice

Aby jeszcze lepiej zrozumieć różnice między wskaźnikami Core Web Vitals, postaramy się omówić ich działanie na konkretnych przykładach.

Wskaźnik FID. Potencjalny klient klika na rozwijane menu główne, typu pull-down menu lub pop-up menu, zaraz po załadowaniu się strony internetowej. W związku z tym FID zaczyna mierzyć czas od kliknięcia użytkownika do pojawienia się menu typu pull-down. W przypadku, gdy przeglądarka jest zajęta ładowaniem witryny, może wystąpić zauważalne opóźnienie, co z kolei może negatywnie wpłynąć na doświadczenie użytkownika (UX).

Wskaźnik INP. Podczas korzystania z elementów strony internetowej, Internauta podejmuje w ich obrębie różne interakcje, tj.:

• wpisywanie fraz w pole wyszukiwania,
• wybieranie opcji z Menu Głównego i klikanie odnośników.

Interaction to Next Paint ocenia responsywność każdej z tych akcji. Innymi słowy, mierzy czas pomiędzy działaniami inicjowanym przez użytkownika, a momentem, gdy strona jest wizualnie aktualizowana w odpowiedzi na to wydarzenie. Wskaźnik ten ma kluczowe znaczenie przy ocenie, jak szybko i skutecznie witryna internetowa może reagować na wejście potencjalnego klienta.

Jak działa pomiar INP?

Chcąc zrozumieć sposób pomiaru wskaźnika INP, musimy rozbić go na pewne, podstawowe elementy. Nic w tym dziwnego, gdyż obejmuje on całą sekwencję od działania użytkownika do wizualnej aktualizacji na danej stronie internetowej.

Etapy pomiaru:

REJESTROWANIE INTERAKCJI UŻYTKOWNIKA

Pomiar rozpoczyna się w momencie, gdy użytkownik podejmuje bezpośrednie i zamierzone interakcję z serwisem.

OPÓŹNIENIE WEJŚCIA

Oznacza to czas, który upływa od momentu, gdy użytkownik podejmuje akcję, do momentu, gdy strona rozpoczyna jej przetwarzanie tej interakcji. W tej fazie przeglądarka może być zajęta innymi zadaniami, co może spowodować opóźnienie w przetwarzaniu danych wejściowych klienta.

CZAS PRZETWARZANIA

Polega to na uruchomieniu procedur obsługi zdarzeń związanych z interakcją. Zazwyczaj są to funkcje JavaScript, które wykonują się w odpowiedzi na działanie użytkownika. Czas przetwarzania może się różnić w zależności od złożoności zadań wykonywanych przez te procedury obsługi.

OPÓŹNIENIE PREZENTACJI

To czas po przetworzeniu danych wejściowych, którego witryna potrzebuje na wyrenderowanie wizualnej reakcji na interakcję. Obejmuje to zadania tj. ponowne obliczenie układu strony, wykonanie wszelkich zmian CSS i przeładowanie zawartości serwisu.

AKTUALIZACJA WIZUALNA

Ostatnim etapem jest aktualizacja wizualna strony, która stanowi kulminację procesu danej akcji. Ma to miejsce, gdy użytkownik widzi rezultat swojej interakcji, tj. otwarcie menu, informacja o wysłaniu formularza lub jakakolwiek inna zmiana wizualna na naszej domenie.

OBLICZENIE INP

Całkowity INP oblicza się poprzez zsumowanie opóźnienia wejścia, czasu przetwarzania i opóźnienia prezentacji.

Przykład pomiaru INP

1. Użytkownik angażuje się w interakcję ze stroną internetową, na przykład poprzez kliknięcie w button.
2. Przeglądarka przesyła do serwera WWW prośbę o nową treść.
3. Serwer WWW odpowiada na żądanie i przesyła ją przeglądarce.
4. Przeglądarka renderuje nową treść na witrynie.
5. Przeglądarka określa czas, jaki jest potrzebny do wyrenderowania nowej treści i raportuje ten wynik jako INP.

Co oznaczają wartości  INP? Jakie niosą za sobą korzyści?

Pomiar Interaction to Next Paint dokonywany jest w milisekundach (ms). Wartości poniżej 200 ms uznawane są za dobre, wyniki między 200 a 500 ms sugerują potrzebę poprawy, natomiast 500 ms i więcej za niezadowalające.

W ramach kluczowych wskaźników jakości stron internetowych – Core Web Vitals – INP ma istotne znaczenie, ponieważ przekłada się na m.in.:

• Lepsze wrażenia użytkownika. Wysoka wartość może nam zasygnalizować, że potencjalni klienci muszą odczekać dłuższą chwilę, zanim witryna zareaguje na ich interakcje, co potencjalnie może wywołać frustrację. 
• Niższy współczynnik odrzuceń. Powolny czas ładowania może sprawić, że użytkownicy porzucą stronę, co prawdopodobnie będzie miało wpływ na wygenerowane wyniki konwersji naszej Firmy w skali miesiąca.
• Search Engine Optimization. INP i inne kluczowe wskaźniki Core Web Vitals, jak LCP czy CLS,  stanowią integralną część sygnałów Google dotyczących jakości naszej witryny. Pomagają one identyfikować i poprawiać różne aspekty domeny pod kątem programistycznym, tak aby osiągała ona lepsze wyniki w bezpłatnych wynikach wyszukiwania. Zatem warto poddawać je regularnej analizie.

Jakie narzędzia będą pomocne do pomiaru INP?

Jeśli potrzebujemy monitorować Interaction to Next Paint, warto skorzystać z poniższych metod:

PageSpeed Insights 

PageSpeed Insights może być popularnym narzędziem do pomiaru INP oraz ogólnej wydajności witryny. Możemy za jego pomocą przeprowadzić kompleksowy audyt naszej domeny, czy uzyskać informacje dotyczące zalecanych praktyk, które warto wdrożyć w ramach kodu witryny. Dodatkowo to darmowe narzędzie umożliwia ocenę szybkości ładowania witryny zarówno na urządzeniach mobilnych, jak i stacjonarnych. Warto w tym miejscu zaznaczyć, że PageSpeed Insights prezentuje dwie kategorie wyników.

Stąd w górnej części znajdziemy podstawowe wskaźniki internetowe pochodzące z raportu Chrome UX. Oparty jest on na rzeczywistych danych o wydajności, które są zbierane od użytkowników korzystających z przeglądarki Chrome.

Audyt sklepu internetowego jednego z naszych klienów komercyjnych

w PageSpeed Insights z raportu Chrome UX (https://pagespeed.web.dev/)

Liczby pokazane w interesującej nas sekcji pokazują, że 5% użytkowników doświadczyło INP gorszego niż wartość 110 ms, czyli:

• 1% większego niż 500,
• 4% mieszczącego się w granicach od 200 ms do 500 ms. 

Podczas gdy 95% doświadczeń użytkowników było szybszych lub równych 200 ms.

Drugi segment prezentuje podobne dane, ale w trochę w innej szacie graficznej. Tutaj źródło tych wyników pochodzi z kontrolowanego środowiska laboratoryjnego, które działa w ramach Google Lighthouse. Zawarte w tej sekcji informacje są szczególnie użyteczne w kontekście testowania nowych funkcjonalności przed ich wprowadzeniem na wersję produkcyjną.

Audyt sklepu internetowego jednego z naszych klienów komercyjnych

w PageSpeed Insights z raportu Google Lighthouse (https://pagespeed.web.dev/)

Uwaga! Jeśli dane o Interaction to Next Paint witryny są niedostępne, warto sprawdzić informacje o Total Blocking Time. TBT mierzy czas, w którym witryna jest zablokowana, uniemożliwiając użytkownikowi interakcję z nią. W przypadku tego wskaźnika wydajności, czas jest liczony od chwili First Contentful Paint, który określa moment załadowania pierwszego elementu na stronie, do momentu Time to Interactive, w którym główny wątek był blokowany na tyle długo, że nie reagował na żadne dane wejściowe.

*Główny wątek jest uznawany za zablokowany, kiedy zadanie przekracza 50 ms.

INP Debuger

INP Debuger wykonuje testy w kontrolowanym środowisku laboratoryjnym, które odwzorowują doświadczenia rzeczywistych użytkowników. Jak wiemy, w trakcie ładowania witryny zachodzi wiele procesów, a często trudno jest zidentyfikować, co dokładnie ją spowalnia. To narzędzie dostarcza spersonalizowany raport dla każdego miernika wydajności – w tym również dla INP – przedstawiając w jego ramach istotne dane. 

Audyt sklepu internetowego jednego z naszych klienów komercyjnych

w INP Debuger (https://www.debugbear.com/inp-debugger/)

W ramach narzędzia zobaczymy wyniki zarówno dla całej strony internetowej – 138 ms, które pochodzą z Chrome User Experience Report, jak i dla ścieżki adresu URL w ramach domeny. Te informacje mogą się różnić od CrUX – 30 ms. A wszystko dlatego, że każda podstrona w ramach naszej witryny może mieć szybszy lub wolniejszy czas reakcji, jaki jest potrzebny, aby użytkownik mógł wejść w pełną interakcje z umieszczonymi dalej elementami.

 

Na załączonym Prt Sc widzimy, że kliknięcie w lewą strzałkę w ramach banneru powoduje opóźnienie wejścia kolejnych elementów slidera (Input Delay) 14 ms, czas przetwarzania wynosi (Processing Time) 8ms, a opóźnienie prezentacji (Presentation Delay) 10 ms. Wartość INP wynosi 30 ms, jest zatem zadawalająca.

*Warto w tym miejscu podkreślić, że Debuger INP w przypadku bardziej skomplikowanych procesów, może być mniej skuteczny. Na przykład, jeśli użytkownik dodaje element do koszyka po raz pierwszy, a podczas procesu realizacji transakcji doświadcza opóźnień, INP DebugBear może nie wykryć tych problemów skutecznie.

Google Search Console

Kiedy posiadamy zweryfikowaną usługę Google Search Console dla naszej domeny lub prefiksu adresu URL, otrzymamy również informacje dotyczące stanu nowego wskaźnika Interaction to Next Paint. W przypadku braku problemów GSC może, ale nie musi, poinformować nas o tym:

Zrzut ekranu z narzędzia Google Search Console (https://search.google.com/)

Jeżeli jednak witryna napotyka jakieś trudności w związku z tą metryką, również otrzymamy stosowne powiadomienie:

Zrzut ekranu z narzędzia Google Search Console (https://search.google.com/)

Możemy w ramach tego segmentu otrzymać grupy adresów URL z problemami, co umożliwia nam identyfikację konkretnych typów podstron, na których występują trudności. Dzięki tym informacjom możemy skoncentrować się na rozwiązaniu niedociągnięć tam, gdzie najbardziej są potrzebne.

 

Zrzut ekranu z narzędzia Google Search Console (https://search.google.com/)

WebPageTest

WebPageTest to jedno z nielicznych narzędzi, które umożliwia precyzyjne określenie zarówno bezwzględnego, jak i postrzeganego czasu ładowania strony internetowej. Co ważne, jest to opcja dostępna w pełni za darmo, bez ukrytych opłat czy modelu subskrypcji. Oferuje cenne dane oraz API, co pozwala na zautomatyzowanie procesu analizy wydajności naszej witryny. 

Źródło (https://www.webpagetest.org/webvitals)

Warto tutaj zauważyć, że WebPageTest udostępnia dokładne opcje konfiguracyjne do testowania stron internetowych. Ważne jest po pierwsze, aby lokalizacja serwera jak najbardziej odpowiadała typowej lokalizacji połączeń. Na przykład, dla angielskiej wersji witryny zalecane jest wybranie serwera w Wielkiej Brytanii, na przykład w Londynie. 

*Uwaga! Jeśli planujesz ocenić efekty działań optymalizacyjnych, wybór lokalizacji serwera nie ma istotnego znaczenia. Jednak kluczowe jest używanie tej samej lokalizacji serwera zarówno przed, jak i po optymalizacji. W przeciwnym razie nie będzie możliwe dokładne porównanie wyników pomiarów.

Po drugie, to darmowe narzędzie oferuje różnorodne opcje ustawień, które pozwalają symulować różne scenariusze transmisji oraz przeglądarki. Możemy na przykład zdecydować, że strona ma być ładowana przy użyciu połączenia 3G oraz przeglądarki Chrome. Warto jednak na początku wybrać przeglądarkę, która jest najczęściej używana przez Twoją grupę docelową. Informacje na ten temat możesz znaleźć m.in. w Google Analytics 4 – Raport „Szczegóły związane z technologią”.

Po trzecie, WebPageTest oferuje możliwość ustawienia, co powinno być wypisane na końcu testu. Istnieją dwa ważne parametry, które pomagają uzyskać wyczerpujące i wiarygodne dane: 

• liczba testów do przeprowadzenia,
• widok powtórzeń. 

Zaleca się przeprowadzenie co najmniej trzech kolejnych testów po sobie, aby uniknąć fałszywych danych, które mogą prowadzić do niewłaściwych wniosków. Ważny jest również pomiar wersji buforowanej strony internetowej – można to osiągnąć, korzystając ze wspomnianej opcji „Powtórzenie widoku". Po wprowadzeniu adresu URL oraz ustawieniu parametrów testu można rozpocząć badanie. Czas analizy może się różnić w zależności od liczby aktualnie wykonywanych testów, ale zazwyczaj trwa kilka minut.

Chrome DevTools

Narzędzia programistyczne dostępne w przeglądarce Google Chrome dostarczają licznych informacji dotyczących funkcjonowania naszej strony internetowej.

Pierwszy sposób. W ramach zakładki „Wydajność” w Chrome DevTools możemy zarejestrować interakcje użytkownika i dokładnie je przeanalizować:

1. Otwórzmy kartę „Wydajność” w narzędziach dla programistów.
2. Naciśnijmy przycisk „Rozpocznij nagrywanie”.
3. Kliknijmy element interfejsu użytkownika na witrynie.
4. Zakończmy nagrywanie.
5. Przejdźmy do sekcji „Interakcje” w profilu wydajności.
6. Przeglądnijmy pasek „Główny”, aby zobaczyć, jakie zadania zostały wykonane przez procesor, w tym konkretne czynności odpowiedzialne za opóźnienia.

Jakiekolwiek działania trwające nad głównym wątkiem mogą spowodować opóźnienia w wyrenderowaniu kolejnych klatek w ramach naszej witryny.

 

Zrzut ekranu z narzędzia Chrome DevTools

Drugi sposób. Przechodząc do zakładki „Lighthouse”, i klikając w button „Start timespan”:

Zrzut ekranu z narzędzia Chrome DevTools

 

Dostaniemy komunikat „Timespan started, interact withe the page”:

Zrzut ekranu z narzędzia Chrome DevTools.

Wykonujemy w tym czasie interakcje ze stroną różnego typu, a kolejno naciskamy na „End timespan”:

Zrzut ekranu z narzędzia Chrome DevTools

Dostaniemy w ten sposób wskazówki, co powinniśmy poprawić w ramach naszej strony internetowej w ramach wskaźnika INP.

Dane dostępne w Chrome DevTools są bardzo szczegółowe i zawierają wszystkie informacje niezbędne do optymalizacji danej interakcji. To narzędzie jest skuteczne zarówno przy prostych stronach, jak i w przypadku bardziej złożonych przepływów użytkowników, czy stron wymagających logowania. Następnie, przy użyciu zebranych danych, należy manualnie przeprowadzić analizę i poeksperymentować, aby określić, z którymi elementami interfejsu użytkownik trudniej wchodzi w interakcję. 

Jak zmniejszyć opóźnienie wejścia na CMS-ie?

W przypadku systemów zarządzania treścią istnieje kilka strategii, które można zastosować, aby zminimalizować opóźnienie wejścia. Jak na przykład:

1. Skróćmy krytyczną ścieżkę renderowania – aby uzyskać optymalne wyniki, należy opóźnić ładowanie mniej istotnych skryptów.
2. Usuńmy nieużywany CSS i JavaScript – wtyczki motywu i treści CMS powinny eliminować wszelkie nieużywane arkusze i skrypty z każdej podstrony.
3. Załadujmy czcionki internetowe lokalnie – jeśli są one hostowane na zew. serwerze, przeglądarka musi dodatkowo wysłać żądania do zew. sieci, co może rodzić dodatkowo obawy dotyczące prywatności w związku z np. RODO.
4. Włączmy kompresję GZIP lub Brotli – algorytmy kompresji, które zmniejszają rozmiary plików HTML, CSS i JavaScript, co umożliwia serwerowi szybsze przesyłanie ich do przeglądarki użytkownika.

*Uwaga! Sprawdźmy aktualną obsługę przeglądarek dla GZIP - https://caniuse.com/brotli - vs Brotli - https://caniuse.com/brotli.

Jak przyśpieszyć czas przetwarzania?

Istnieje kilka skutecznych strategii, które można zastosować, aby zminimalizować czas potrzebny na czas przetwarzania. Między innymi:

1. Audyt wtyczek CMS-a – podstawową zasadą podczas optymalizacji wydajności CMS-a jest minimalizowanie liczby używanych wtyczek, ponieważ każda wtyczka wprowadza dodatkowe obciążenie. Mogą wystąpić konflikty pomiędzy różnymi wtyczkami lub między wtyczkami a motywem. Ponadto, każda z nich jest zakodowana przez innego programistę, co oznacza, że nie zawsze są równej jakości pod względem wydajności.
2. Aktualizujmy oprogramowanie – w przypadku witryn na WordPress oznacza to upgrade m.in. MySQL, PHP, CMS-a, motywów czy wspomnianych wtyczek.

Jak zmniejszyć opóźnienie prezentacji?

Istnieje szereg technik i praktyk, które można wdrożyć, aby zminimalizować czas potrzebny na opóźnienie prezentacji. Stąd np.:

1. Podzielmy długie strony, aby zmniejszyć rozmiar DOM – warto, aby strony docelowe lub wpisy na blogu przekonstruować na mniejsze części, np. w postaci kolejnych podstron. Warto również ograniczyć liczbę widżetów i innych elementów uzupełniających na dłuższych adresach URL, jeśli nie są one konieczne dla treści.
2. Pokażmy elementy treści warunkowo – ponieważ czasami nie można podzielić długich stron na mniejsze, rozważmy usunięcie innych elementów, tj. pasek boczny lub wyróżniający obrazek. Przykładowo, motyw Blocksy dla WordPress pozwala na włączanie i wyłączanie różnych elementów treści, tj. tagi postów, pola udostępniania, powiązane posty.
3. Uprośćmy Menu Główne na wersji mobilnej – duży rozmiar DOM może powodować dodatkowe opóźnienia w renderowaniu na mobile device w związku z ich małymi ekranami. Możemy zatem skorzystać ze wtyczek do tworzenia menu na urządzenia mobilne lub wybrać motyw, który umożliwia tworzenie oddzielnych menu dla ekranów komputerów stacjonarnych i urządzeń mobilnych.

Podsumowanie

Interakcja z Next Paint (INP) jest kluczowym wskaźnikiem oceny responsywności naszej strony internetowej. Zapewnia wszechstronne spojrzenie na to, jak szybko witryna reaguje na działania użytkownika, wykraczając poza opóźnienie pierwszego wejścia (FID). Czyli poprzez pomiar opóźnienia wszystkich akcji, a nie tylko pierwszej. Poprawiając zatem wydajności witryny pod kątem Core Web Vitals, możemy niejako przyczynić się do zwiększenia dochodów reklamowych, które prowadzimy w ramach naszej strategii marketingowej. W końcu efektywnie zoptymalizowany serwis będzie miał większe szanse na przyciągnięcie regularnych odwiedzających, ale też tych nowych.