INP zastępuje FID: przygotowania do zmiany Core Web Vitals w marcu 2024

12 marca 2024 roku INP zastępuje FID jako wskaźnik responsywności w Core Web Vitals. First Input Delay zostaje przy tej okazji wycofany, co potwierdza ogłoszenie tej zmiany na web.dev. Prowadzisz serwis na WordPressie i widzisz w Search Console ostrzeżenia dotyczące INP? Masz jeszcze kilka tygodni, żeby ustalić, których stron dotyczy problem i co naprawić w pierwszej kolejności. Poniżej: co się zmienia, gdzie szukać danych i w jakiej kolejności sam bym się za to zabrał.

Co się zmienia 12 marca, gdy INP zastępuje FID?

Interaction to Next Paint staje się wskaźnikiem Core Web Vitals. First Input Delay wypada z programu. Na tym polega cała zamiana. Historię opisuje harmonogram przejścia zespołu Chrome: INP pojawił się jako wskaźnik eksperymentalny w maju 2022 roku, w zeszłym roku dostał status oczekującego, a w marcu 2024 staje się stabilny. FID znika z Search Console 12 marca, choć PageSpeed Insights i CrUX zachowają go jeszcze przez sześciomiesięczny okres wycofywania. A LCP i CLS? Bez zmian. W Core Web Vitals 2024 inna jest więc tylko część dotycząca responsywności.

Czym Interaction to Next Paint różni się od First Input Delay?

FID nie potrafił uchwycić tych aspektów interaktywności, które mierzy INP. Stąd nowy wskaźnik. Stary pomiar brał pod uwagę pierwszą interakcję podczas wizyty i nic więcej. Jego następca obserwuje interakcje w trakcie całej wizyty i mierzy czas do chwili, w której strona widocznie zareaguje.

Interakcja oznacza tu kliknięcie, dotknięcie ekranu albo naciśnięcie klawisza. W praktyce serwis, który zaliczał FID, może nie zaliczyć INP, bo teraz liczy się także to powolne menu albo filtr, z którego ktoś korzysta później w trakcie sesji. Właśnie dlatego ostrzeżenia pojawiają się na stronach, które wcześniej wyglądały dobrze.

Gdzie sprawdzić, czy mieścisz się w progu INP

Pierwsze pytanie: czy INP Twojego serwisu mieści się w progu „good” w danych terenowych? Dane terenowe to pomiary od prawdziwych użytkowników, a nie z Twojego komputera. Core Web Vitals ocenia się w terenie na poziomie 75. percentyla wczytań strony, a dokładne wartości graniczne podaje dokumentacja INP na web.dev. Te dane można pobrać z kilku miejsc:

• Search Console - raport Core Web Vitals grupuje adresy URL, których dotyczy problem.
• PageSpeed Insights - pokazuje dane CrUX na poziomie całej domeny, a czasem także dla pojedynczego adresu URL.
• Biblioteka JavaScript web-vitals - zbiera INP od Twoich własnych użytkowników.

Narzędzia laboratoryjne, które wczytują stronę, na której nikt niczego nie klika, nie pokażą prawdziwego obrazu. Dlatego najpierw zaufaj danym terenowym. Testy laboratoryjne służą do odtwarzania problemu, o którym już wiesz.

Dlaczego INP to głównie problem JavaScriptu, a nie serwera

INP mierzy to, co przeglądarka robi po kliknięciu. Wszystko sprowadza się więc do skryptów działających na stronie, a nie do tego, jak szybko odpowiedział serwer. Reverse proxy albo szybsza maszyna poprawiają głównie czas do pierwszego bajtu, a to wskaźnik wczytywania. Tak samo jest z wyborem lokalizacji hostingu dla odległych czytelników: skraca drogę, którą pokonuje odpowiedź, a nie pracę wykonywaną na urządzeniu.

Konfiguracja sieci też trafia do worka z dostarczaniem treści, łącznie z całą kwestią tego, jak ma się dedykowany adres IP do szybkości strony. Trzymaj te dwa problemy osobno, bo inaczej wysiłek pójdzie w złe miejsce. Wolne wczytywanie naprawia się po stronie infrastruktury. Ospałe reakcje na działania użytkownika naprawia się w kodzie, który wykonuje przeglądarka.

Co naprawić najpierw, żeby poprawić INP w serwisie na WordPressie

Zacznij od stron oznaczonych w Search Console, a potem usuń albo opóźnij JavaScript, który uruchamia się podczas interakcji. Przeszedłbym przez listę w tej kolejności:

1. Wybierz oznaczone grupy adresów URL i odtwórz powolną interakcję na prawdziwym telefonie.
2. Przejrzyj wtyczki i wyłącz te, które bez potrzeby ładują skrypty na każdej stronie.
3. Odrocz albo opóźnij skrypty zewnętrzne, takie jak widżety czatu, tagi reklamowe i analityka.
4. Sprawdź motyw i kreator stron pod kątem ciężkich menu, sliderów i wyskakujących okienek.
5. Podziel długie zadania we własnym kodzie, żeby przeglądarka mogła między nimi odrysować stronę.
6. Zmniejsz rozmiar DOM na długich stronach, bo duże drzewo elementów podnosi koszt każdej aktualizacji.

Jedna zmiana naraz. Po każdym kroku testuj ponownie. Jasne, wyłączenie kilku wtyczek za jednym zamachem może usunąć ostrzeżenie, ale wtedy nie masz pojęcia, która z nich je powodowała (a problem lubi wracać przy następnej aktualizacji).

Co zrobić z raportami FID i monitoringiem przed terminem

Zamień FID na INP w panelach, alertach i każdym kodzie, który odczytuje ten wskaźnik. First Input Delay jest wycofywany i zostanie usunięty z programu, więc nie ma sensu go podtrzymywać. Porządki zwykle obejmują takie obszary:

• Zaktualizuj skrypty, które pobierają stary wskaźnik z CrUX albo PageSpeed Insights, zanim skończy się okres wycofywania.
• Przełącz monitoring rzeczywistych użytkowników na INP za pomocą biblioteki web-vitals.
• Przestań raportować FID klientom i interesariuszom i wyjaśnij, dlaczego ta liczba zniknęła.

Dane terenowe aktualizują się powoli. Poprawki wprowadzone w lutym potrzebują czasu, żeby pojawić się w raportach, więc nie panikuj, gdy następnego dnia nic się nie ruszy. Po wdrożeniu zmiany uruchom weryfikację w Search Console i poczekaj na świeże pomiary od użytkowników, zanim ocenisz efekt.

INP zastępuje FID w przyszłym miesiącu, a kolejność prac jest, szczerze mówiąc, dość prosta: zmierz w terenie, odchudź JavaScript, który blokuje interakcje, a potem zaktualizuj monitoring, żeby nic już nie zależało od wycofanego wskaźnika.

FAQ