Prześledź wadliwy INP z powrotem do wiersza kodu w siedmiu gałęziach

Czerwony wynik INP nie stanowi problemu z wydajnością, dopóki nie wiadomo, która z trzech faz pochłania czas. Większość zespołów pomija ten krok, kupuje wtyczkę do buforowania lub odkłada wykonanie skryptu i obserwuje, jak 75. percentyl odmawia wykonania ruchu. Ten przewodnik to drzewo decyzyjne, które uruchamiamy zamiast tego: siedem gałęzi, które prowadzą od numeru raportu Chrome UX Report do konkretnego modułu obsługi, skryptu lub tagu innej firmy odpowiedzialnego za problem, z określonym progiem dla każdego rozwidlenia. Jest on przeznaczony dla liderów front-end i zespołów wzrostu, które dysponują liczbą konwersji oraz wynikiem Lighthouse.

Ta luka jest realna. W Web Almanac z 2025 r. 77% źródeł mobilnych miało dobry INP w porównaniu z 97% na komputerach stacjonarnych i tylko 48% źródeł mobilnych przeszło wszystkie trzy podstawowe wskaźniki internetowe (Archiwum HTTP). Na urządzeniach mobilnych nadal problemem są opóźnienia w interakcji, ale problem ten można w większości zdiagnozować.

Co mierzy INP, a co po cichu ignoruje

Interakcja z Next Paint zgłasza jedno opóźnienie interakcji na wizytę na stronie, 75. percentyl w całym twoim pochodzeniu. Dobro jest 200 ms lub mniej, wymaga poprawy powyżej 200 ms i do 500 ms, słaba powyżej 500 ms (web.dev). Trzy rzeczy w tej definicji zmieniają sposób debugowania:

• Liczą się tylko kliknięcia, stuknięcia i naciśnięcia klawiszy. Najeżdżanie kursorem, powiększanie i przewijanie nie jest mierzone, więc niestabilne przewijanie może sprawić, że strona będzie sprawiała wrażenie uszkodzonej, podczas gdy INP pozostanie zielony.
• Na stronach z wieloma interakcjami INP ignoruje jedną najwyższą interakcję na każde 50, więc rzadka, katastrofalna interakcja może ukryć się na stronie o dużym zaangażowaniu i pojawić się na stronie o małym zaangażowaniu.
• Każda interakcja dzieli się na opóźnienie wejściowe (zanim Twoi opiekunowie pobiegną), czas przetwarzania (Twoi opiekunowie biegną) i opóźnienie prezentacji (po twoich opiekunach, przed malowaniem ram). Te trzy problemy inżynieryjne nie mają ze sobą prawie nic wspólnego (web.dev).

Ten ostatni punkt to cała metoda. Nie debugujesz „INP”. Debugujesz jedną z trzech faz, a każda z nich ma inne rozwiązanie.

Oddział 0: sprawdź, czy numer jest prawdziwy, zanim dotkniesz kodu

Otwórz PageSpeed ​​Insights i przeczytaj sekcję dotyczącą pola, a nie wynik laboratoryjny. Narzędzia laboratoryjne nie są w stanie zmierzyć INP, ponieważ INP wymaga naciśnięcia przycisku przez prawdziwego użytkownika. Jeśli źródło nie ma danych terenowych, masz problem z ruchem, a nie z wydajnością, i nic z poniższych nie ma jeszcze zastosowania. Następnie pobierz dane mobilne i stacjonarne osobno — globalnie różniły się one o 20 punktów procentowych w 2025 roku. Jeśli dane mobilne są czerwone, a dane stacjonarne zielone, przestań testować na laptopie.

Gałąź 1: czy powolna interakcja ma miejsce w trakcie ładowania czy po nim?

Zaopatrz pole w instrumenty web-vitals atrybucja. Cztery linijki prowadzą do danych:

import {onINP} from 'web-vitals/attribution';
onINP(({value, rating, attribution}) => {
  navigator.sendBeacon('/rum', JSON.stringify({value, rating, attribution}));
});

Czytaj attribution.loadState po pierwsze. Jeśli większość złych interakcji niesie ze sobą stan obciążenia załadunek or dom-interactiveUżytkownicy klikają, podczas gdy skrypty wciąż są ewaluowane: problem z dostarczaniem, rozwiązany w pakiecie i menedżerze tagów, a nie w module obsługi. Jeśli nieprawidłowe interakcje są rozproszone na w pełni załadowanych stronach, przejdź do gałęzi 2.

Gałąź 2: która podczęść jest właścicielem czasu?

Zaloguj inputDelay, processingDuration oraz presentationDelay dla każdej próbki. Nasza zasada działania: podczęść jest właścicielem interakcji, gdy odpowiada za ponad 50% całkowitego INP. Jeśli żaden z nich nie przekroczy 50%, należy to najpierw potraktować jako przypadek opóźnienia wejściowego — rozproszone przeciążenie wątku głównego zwykle pogarsza dwa pozostałe przypadki.

Gałąź 3: nazwij skrypt

Kompilacja atrybucji zawiera wpisy Long Animation Frame obok każdej próbki INP. attribution.longestScript podaje osobę wywołującą, funkcję i plik źródłowy najgorszego skryptu w interakcji; totalScriptDuration Agreguje wszystko powyżej 5 ms. W tym miejscu niejasne „React jest wolny” staje się ścieżką do pliku. Sprawdź typ programu wywołującego: classic-script or module-script punkty w ocenie czasu ładowania, podczas gdy user-callback or event-listener wskazuje na coś działającego po załadowaniu — obserwatora, timera, nasłuchiwacza analityki (web.dev).

Oddział 4: czy jest Twój czy osoby trzeciej?

Posortuj atrybucję skryptu według źródła. Menedżery tagów, platformy do obsługi zgód, narzędzia do nagrywania sesji i widżety czatu instalują globalne odbiorniki, które uruchamiają się przed Twoimi przy każdym kliknięciu. Jeśli źródło zewnętrzne pojawia się w ponad jednej czwartej Twoich najgorszych próbek, poprawka jest komercyjna, zanim stanie się techniczna: zmniejsz zakres tagu, załaduj go podczas interakcji lub przenieś na serwer. Nie refaktoryzuj swojego handlera, aby odzyskać 40 ms, które i tak zużywa widżet czatu.

Gałąź 5: odtwórz w laboratorium, a następnie napraw ramkę

Wybierz selektor z attribution.interactionTargetOtwórz Chrome DevTools z ograniczeniem procesora dopasowanym do konfiguracji urządzeń i zarejestruj interakcję. Wyszukaj zadanie 50 ms, próg długiego zadania (web.dev) i podzielił go, dając wynik.

Statek scheduler.yield() z opcją zapasową. Chrome i Edge obsługują ją od wersji 129, a Firefox od wersji 142, ale Safari nie obsługuje komputerów stacjonarnych ani iOS, a MDN oznacza jego ograniczoną dostępność, a nie stan podstawowy (DND, mogę uzyć). Dla odbiorców z Turcji lub Zatoki Perskiej, którzy mają duży udział w systemie iOS, setTimeout powrót do stanu pierwotnego nie jest opcjonalny.

Gałąź 6: zmierz rynek, na którym faktycznie sprzedajesz

Globalne średnie CrUX ukrywają rynek, który Ci płaci. Zestaw danych CrUX BigQuery publikuje tabele krajowe — chrome-ux-report.country_tr.YYYYMM w przypadku Turcji obowiązuje ten sam wzór dla każdego dwuliterowego kodu kraju — odświeżany co miesiąc, przy czym wymiarami są współczynnik kształtu urządzenia i efektywny typ połączenia (Chrome dla programistówPubliczny interfejs API CrUX nie ujawnia kraju, więc ten fragment jest dostępny tylko w BigQuery.

Porównaj swoje pochodzenie z tabelą krajów dla każdego rynku, na którym sprzedajesz. Sprzedawca detaliczny obsługujący Turcję, Niemcy i kraje Zatoki Perskiej rutynowo znajduje trzy różne dystrybucje INP w jednej bazie kodów, ponieważ układ urządzeń i warunki sieciowe różnią się. Ustal rynek na podstawie przychodów, a nie tego, na którym działa Twoje biuro.

Gałąź 7: udowodnij, że coś poruszyło

Potraktuj tę poprawkę jako eksperyment, a nie wdrożenie. Trendyol, turecki rynek, powiązał mobilny INP o długości 963 ms z jednym zadaniem o długości 700–900 ms spowodowanym przez wywołanie zwrotne IntersectionObserver w komponencie React, odraczając aktualizację stanu za pomocą scheduler.yield()i obniżył 75. percentyl INP z około 1,400 ms do około 650 ms w ciągu sześciu miesięcy. Test A/B wykazał 1% wzrostu liczby kliknięć z ofert do szczegółów produktu na sesję (web.dev). czerwony autobus skrócono interakcje z leniwym ładowaniem z 870–900 ms do 350–370 ms, poprawiono interakcję z wprowadzaniem tekstu o 72% i zgłoszono 7% wzrost całkowitej sprzedaży (web.dev).

Zwróć uwagę na uczciwą skalę: 1%, a nie 40%. Co prowadzi nas do liczby wartej korekty.

Liczba 8.4% zasługuje na zastrzeżenie

Najczęściej cytowanym wskaźnikiem w tej dziedzinie jest to, że poprawa szybkości mobilnej o 0.1 sekundy zwiększa konwersję w handlu detalicznym o 8.4%, a w podróżach o 10.1%. Pochodzi to z prawdziwego badania – 55 i Deloitte, zleconego przez Google, 37 marek, ponad 30 milionów sesji (web.dev). Ale mierzył takie wskaźniki obciążenia, jak czas ładowania strony i opóźnienie serwera, nie INPDane obejmują 30 dni pod koniec 2019 roku; nie było grupy kontrolnej, więc jest to obserwowana korelacja, a nie związek przyczynowo-skutkowy. Wykorzystaj to do rozpoczęcia rozmowy o budżecie, a nie do prognozowania zwrotu z naprawy opóźnienia interakcji.

[POTRZEBNE DANE WEWNĘTRZNE: Switas przed/po p75 INP i delta konwersji z współpracy z klientem, aby zastąpić publiczne studia przypadków dowodami pierwszej strony.]

Gdzie to drzewo decyzyjne się psuje

• Początki o małym natężeniu ruchu. W przypadku danych z wąskiego pola 75. percentyl to szum. Poniżej około 1,000 interakcji na szablon tygodniowo, profil w laboratorium i zaakceptuj fakt, że nie możesz zweryfikować wygranej w CrUX.
• Użytkownicy przeglądarek Safari i Firefox są niewidoczni. CrUX działa tylko w Chrome. Jeśli znaczna część Twoich przychodów pochodzi z Safari na iOS, Twoje dane INP opisują populację, której nie mierzysz w pełni.
• Przewijanie jest poza zakresem. INP ignoruje przewijanie, więc to drzewo nigdy nie znajdzie problemu w liście przewijanej w nieskończoność, która wygląda okropnie, ale po potwierdzeniu testem daje wynik zielony.
• Wykrywa opóźnienia, a nie dług projektowy. Interakcja trwająca 180 ms na mylącym panelu filtrów to problem UX, którego to drzewo nie dostrzega.

FAQ

Czy INP to to samo co First Input Delay?
Nie. FID mierzył jedynie opóźnienie przed uruchomieniem procedur obsługi pierwszej interakcji. INP uwzględnia pełne opóźnienie reprezentatywnej interakcji w trakcie wizyty, w tym wykonanie procedury obsługi i następujące po niej malowanie.

Dlaczego mój wynik Lighthouse wygląda dobrze, a INP ma kolor czerwony?
Lighthouse to narzędzie laboratoryjne i nie mierzy INP: żaden użytkownik nie naciska żadnego przycisku. Dane proxy, takie jak całkowity czas blokowania, są luźno powiązane. Zamiast tego zapoznaj się z sekcją dotyczącą pól w PageSpeed ​​Insights.

Jak długo trzeba czekać na poprawkę w CrUX?
Raporty CrUX publikowane są w 28-dniowym oknie kroczącym, a tabele BigQuery publikowane są co miesiąc. Spodziewaj się częściowego sygnału po około czterech tygodniach i czystego odczytu po dwóch miesięcznych publikacjach.

Czy mogę naprawić INP nie naruszając ramy?
Często tak. Rozwiązaniem Trendyola było użycie funkcji yield w jednym wywołaniu zwrotnym w React 16.9, bez aktualizacji. Odraczanie tagów zewnętrznych jest również niezależne od frameworka.

Czy baner zgody ma wpływ na INP?
Może to mieć miejsce na dwa sposoby: skrypt banera konkuruje o dostęp do wątku głównego podczas ładowania, a decyzja o wyrażeniu zgody często powoduje natychmiastowe ładowanie tagów. Pierwszą interakcję po wyrażeniu zgody należy zmierzyć osobno.

Czy potrzebuję dostawcy RUM, czy wystarczy biblioteka web-vitals?
Do uruchomienia tego drzewa wystarczy kompilacja atrybucji i punkt końcowy beacon. Dostawca kupuje retencję, segmentację i pulpity nawigacyjne, a nie lepsze dane atrybucyjne.

Czy powinienem optymalizować INP pod kątem SEO czy konwersji?
Zdecyduj się na konwersję. Core Web Vitals to sygnał rankingowy, ale udokumentowane przypadki biznesowe — 1% w Trendyol, 7% w redBus — to efekty jakości interakcji, które same w sobie uzasadniają tę pracę.

Uruchom to na swojej własnej stronie z ofertami

Weź szablon o największym ruchu, zainstrumentuj go za pomocą kompilacji atrybucji i przejdź kolejno przez gałęzie od 0 do 7. Jeśli wolisz, aby drzewo działało na podstawie własnych danych terenowych, z uwzględnieniem wycinka kraju i projektu eksperymentu, skorzystaj z naszych zespół ds. wydajności sieci zajmuje się właśnie tym zajęciem.

Źródła

• Interakcja z następnym malowaniem (INP) — web.dev
• Optymalizacja interakcji do następnego malowania — web.dev
• Znajdź wolne interakcje w terenie — web.dev
• Optymalizacja długich zadań — web.dev
• Wydajność — Web Almanac 2025, Archiwum HTTP
• Jak Trendyol obniżył INP o 50% — web.dev
• Jak redBus poprawił INP i zwiększył sprzedaż o 7% — web.dev
• Milisekundy robią miliony — web.dev / 55 / Deloitte
• CrUX w BigQuery — Chrome dla programistów
• Harmonogram: yield() — MDN
• Harmonogram API: wydajność — caniuse
• Biblioteka JavaScript web-vitals — GoogleChrome/web-vitals