INP w WordPress zamiast FID: jak sprawdzić responsywność strony

INP na stronie WordPress najszybciej sprawdzisz w PageSpeed Insights. Narzędzie pokazuje dane terenowe z raportu CrUX, czyli pomiary od prawdziwych użytkowników Chrome. Nie odkładaj tego na później, bo zgodnie z ogłoszeniem zespołu Chrome o zmianie od 12 marca 2024 INP zastępuje FID w Core Web Vitals. Niżej opisuję, czym jest nowa metryka, gdzie ją zmierzyć, jak czytać ocenę i co robić, kiedy wynik jest słaby.

Czym jest Interaction to Next Paint i dlaczego zastąpił FID?

Interaction to Next Paint mierzy czas od interakcji użytkownika (kliknięcia, dotknięcia ekranu, naciśnięcia klawisza) do wyświetlenia kolejnej klatki. Krótko mówiąc: jak szybko strona reaguje przez całą wizytę, a nie tylko na starcie. FID patrzył wyłącznie na opóźnienie pierwszej interakcji. I tu był haczyk. Witryna mogła mieć ładny wynik, a mimo to przycinać się przy dodawaniu produktu do koszyka albo rozwijaniu menu.

Zmiana nie spadła z nieba. Jak opisuje blog web.dev o wejściu INP, metryka pojawiła się jako eksperymentalna w maju 2022, potem dostała status oczekującej, a 12 marca 2024 weszła na stałe do Core Web Vitals. FID wypada z programu Web Vitals, a jego dokumentacja dostaje odesłania do materiałów o INP.

Co zmienia się w Core Web Vitals 2024 dla stron na WordPressie?

Core Web Vitals to teraz trzy wskaźniki: LCP (szybkość wyświetlenia największego elementu), CLS (stabilność układu) i INP w miejsce FID. Ocena nie bierze się z jednego testu. Według zespołu Chrome odpowiedzialnego za Web Vitals liczy się wynik na 75. percentylu wszystkich odsłon w danych terenowych. Google Search Console wyrzuca FID już 12 marca. PageSpeed Insights i CrUX trzymają go jeszcze przez sześciomiesięczny okres przejściowy.

Kto powinien się tym przejąć najbardziej? Sklepy WooCommerce, zwłaszcza przed Black Friday, i strony na rozbudowanych motywach. Tam interaktywnych elementów jest pełno: koszyk, filtry produktów, wybór wariantów, wyszukiwarka na żywo. Każdy z nich odpala JavaScript po kliknięciu. A to dokładnie ten moment, który INP mierzy.

Jak sprawdzić INP strony WordPress krok po kroku

Pomiar to kilka minut roboty. Wystarczą darmowe narzędzia Google, a w razie potrzeby dane od dostawcy monitoringu. Idź po kolei:

1. Wpisz w PageSpeed Insights adres strony głównej, a potem najważniejszych podstron: kategorii, karty produktu, koszyka.
2. Odczytaj sekcję z danymi od rzeczywistych użytkowników, która pochodzi z CrUX.
3. Otwórz raport Core Web Vitals w Google Search Console, gdzie adresy są pogrupowane według podobnych problemów.
4. Jeśli korzystasz z narzędzia RUM (Real User Monitoring, czyli pomiaru na urządzeniach odwiedzających), zapytaj dostawcę, czy obsługuje już INP.

Mobile i desktop sprawdzaj osobno. Telefony mają słabsze procesory, więc zwykle wypadają gorzej (to raczej nikogo nie zdziwi). Aha, przy małym ruchu CrUX może w ogóle nie mieć danych o Twojej witrynie. Wtedy jedynym źródłem realnych pomiarów zostaje własny RUM.

Jak czytać wynik: dobry, wymaga poprawy, słaby

INP dostaje jedną z trzech ocen. Cel? Kategoria „dobry” dla większości wizyt. Wynik dobry znaczy, że strona reaguje płynnie i nic nie pali się pod nogami. Wymaga poprawy to sygnał, że część interakcji wyraźnie się ciągnie, zwykle na konkretnych typach podstron. Ocena słaby oznacza, że klienci po kliknięciu czekają i to czują. Od tego zaczynasz porządki.

Patrz też, skąd wynik pochodzi. Test laboratoryjny w PageSpeed Insights symuluje jedno urządzenie i nie wykonuje typowych interakcji. Do diagnozy się nada, do oceny już nie. Liczą się dane terenowe z CrUX, bo pokazują zachowanie prawdziwych użytkowników na różnych telefonach i komputerach.

Co najczęściej psuje responsywność strony na WordPressie?

W praktyce prawie zawsze JavaScript. Zajmuje przeglądarkę akurat wtedy, gdy użytkownik chce coś kliknąć. Najczęstsi winowajcy:

• ciężkie skrypty wtyczek ładowane na każdej podstronie, także tam, gdzie nie są potrzebne,
• rozbudowane page buildery z wieloma warstwami kodu,
• skrypty zewnętrzne: czaty, analityka, piksele reklamowe,
• długie zadania JavaScript blokujące główny wątek przeglądarki,
• rozbudowany DOM, czyli tysiące elementów HTML do przeliczenia po każdej zmianie.

Jak znaleźć sprawcę? Najprościej na kopii strony: wyłączasz wtyczki po jednej i mierzysz efekt. Nudne, ale działa. Zakładka Performance w Chrome DevTools pokaże z kolei, który skrypt wykonuje się po kliknięciu. Zespół Chrome przygotował też osobne materiały o diagnozowaniu i rozwiązywaniu problemów z INP.

Jak poprawić INP w WordPressie i WooCommerce

Najwięcej daje odchudzenie JavaScriptu. Mniej wtyczek, a te, które zostają, ładują skrypty tylko tam, gdzie są używane. Formularz kontaktowy nie musi wczytywać kodu na karcie produktu. Moduł opinii na stronie „O nas” też nie. Skrypty zewnętrzne polecam opóźnić do pierwszej interakcji albo załadować po wyświetleniu treści. I jeszcze jedno: lżejszy motyw plus regularne aktualizacje wtyczek często załatwiają sprawę bez dalszego grzebania, bo autorzy też poprawiają wydajność kodu.

Sklep potrzebuje niestandardowej funkcji? Moim zdaniem lepiej od razu zamówić lekki kod, niż doklejać kolejną ogólną wtyczkę do kolekcji. Takie rozwiązania, razem z licencjami obejmującymi aktualizacje i wsparcie, oferuje K4.pl. Po każdej zmianie zmierz wynik ponownie. Tylko bez nerwów: dane terenowe zbierane są z opóźnieniem, więc efekt w CrUX i Search Console zobaczysz dopiero po kilku tygodniach.

Mierz INP regularnie w PageSpeed Insights i Search Console. Zacznij od stron z największym ruchem, a potem koszyk i karta produktu. Ten wskaźnik mówi o czymś bardzo konkretnym: czy przycisk reaguje od razu, czy klient musi kliknąć drugi raz. Dobra responsywność to mniej porzuconych zakupów, a nie tylko zielona kropka w raporcie.

Najczęstsze pytania