Verfolgen Sie einen fehlerhaften INP zurück zur Codezeile in sieben Zweigen

Ein roter INP-Wert deutet erst dann auf ein Performance-Problem hin, wenn bekannt ist, welche der drei Phasen die meiste Zeit in Anspruch nimmt. Die meisten Teams überspringen diesen Schritt, kaufen ein Caching-Plugin oder verschieben ein Skript und beobachten, wie sich der 75. Perzentilwert nicht verbessert. Dieser Leitfaden beschreibt den Entscheidungsbaum, den wir stattdessen verwenden: Sieben Zweige führen Sie von einem fehlerhaften Wert im Chrome UX Report direkt zum verantwortlichen Handler, Skript oder Drittanbieter-Tag – mit einem festgelegten Schwellenwert an jeder Verzweigung. Er richtet sich an Frontend-Leiter und Wachstumsteams, die sowohl Conversion-Raten als auch Lighthouse-Scores verantworten.

Die Lücke ist real. Im Web-Almanach 2025 77 % der Mobilfunkursprünge wiesen einen guten INP-Wert auf. gegenüber 97 % auf Desktop-Computern und nur 48 % der mobilen Ursprünge haben alle drei Core Web Vitals erfüllt. (HTTP-ArchivWas auf Mobilgeräten immer noch nicht funktioniert, ist hauptsächlich die Interaktionslatenz, und das ist größtenteils diagnostizierbar.

Was das INP misst und was es stillschweigend ignoriert

Interaction to Next Paint meldet eine Interaktionslatenz pro Seitenaufruf, bei 75. Perzentil über Ihren Ursprung hinweg. Gut ist 200 ms oder weniger, Verbesserungsbedarf liegt zwischen 200 ms und 500 ms, mangelhaft liegt über 500 ms (web.devDrei Dinge an dieser Definition verändern die Art und Weise, wie Sie das Debuggen durchführen:

• Nur Klicks, Tippen und Tastendrücke zählen. Hovern, Zoomen und Scrollen wird nicht gemessenEin ruckeliges Scrollen kann dazu führen, dass sich eine Seite fehlerhaft anfühlt, während INP grün bleibt.
• Auf Seiten mit vielen Interaktionen, INP ignoriert jeweils die höchste Interaktion pro 50So kann eine seltene, katastrophale Interaktion auf einer Seite mit hoher Nutzerinteraktion verborgen bleiben und auf einer Seite mit niedriger Nutzerinteraktion wieder auftauchen.
• Jede Interaktion teilt sich auf in Eingangsverzögerung (bevor Ihre Handler ausgeführt werden), Bearbeitungsdauer (Ihre Handler laufen) und Präsentationsverzögerung (nach Ihren Handlern, vor dem Lackieren des Rahmens). Diese drei haben als technische Probleme fast nichts gemeinsam (web.dev).

Dieser letzte Punkt ist die Grundlage der gesamten Methode. Sie debuggen nicht „INP“, sondern eine von drei Phasen, und jede erfordert eine andere Lösung.

Zweig 0: Prüfen Sie, ob die Zahl korrekt ist, bevor Sie den Code bearbeiten.

Öffnen Sie PageSpeed ​​Insights und lesen Sie den Abschnitt „Felder“, nicht den Laborwert. Labortools können INP nicht messen, da für INP eine Eingabe eines echten Nutzers erforderlich ist. Wenn die Ursprungsseite keine Felddaten enthält, liegt ein Traffic-Problem vor, kein Performance-Problem, und die folgenden Hinweise sind noch nicht relevant. Testen Sie anschließend Mobilgeräte und Desktop-Computer separat – weltweit betrug der Unterschied im Jahr 2025 20 Prozentpunkte. Wenn Mobilgeräte rot und Desktop-Computer grün angezeigt werden, beenden Sie die Tests auf Ihrem Laptop.

Zweig 1: Findet die langsame Interaktion während oder nach dem Lastvorgang statt?

Instrumentieren Sie das Feld mit dem web-vitals Attributionsaufbau. Vier Zeilen liefern die Daten:

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

Lesen Sie mehr attribution.loadState Erstens. Wenn die meisten negativen Interaktionen einen Lastzustand von Laden or dom-interaktivNutzer tippen, während Ihre Skripte noch ausgewertet werden: ein Auslieferungsproblem, das im Bundle und im Tag-Manager behoben werden muss, nicht im Handler. Falls fehlerhafte Interaktionen auf vollständig geladenen Seiten auftreten, fahren Sie mit Branch 2 fort.

Zweig 2: Welcher Teilbereich ist für die Zeit zuständig?

Log inputDelay, processingDuration und presentationDelay für jedes Beispiel. Unsere Arbeitsregel: Ein Unterteil ist für die Interaktion verantwortlich, wenn er für Folgendes zuständig ist: mehr als 50 % der gesamten INPWenn keiner der Werte unter 50 % liegt, sollte man zunächst von einer Eingabeverzögerung ausgehen – eine diffuse Überlastung des Hauptthreads ist in der Regel die Ursache dafür, dass die anderen beiden Probleme noch schlimmer werden.

Zweig 3: Benenne das Skript

Der Attributions-Build enthält Einträge für lange Animationsframes neben jedem INP-Sample. attribution.longestScript liefert Ihnen den Aufrufer, die Funktion und die Quelldatei für das schlechteste Skript in der Interaktion; totalScriptDuration Aggregiert alles, was länger als 5 ms dauert. Hier wird aus einer vagen Aussage wie „React ist langsam“ ein konkreter Dateipfad. Überprüfen Sie den Aufrufertyp: classic-script or module-script Punkte bei der Auswertung der Ladezeit, während user-callback or event-listener verweist auf etwas, das nach dem Laden weiterläuft – einen Beobachter, einen Timer, einen Analyse-Listener (web.dev).

Zweig 4: Gehört es Ihnen oder einem Dritten?

Sortieren Sie die Zuordnung Ihrer Skripte nach Ursprung. Tag-Manager, Einwilligungsplattformen, Tools zur Sitzungsaufzeichnung und Chat-Widgets installieren globale Listener, die bei jedem Klick vor Ihren eigenen Listenern ausgeführt werden. Wenn in mehr als einem Viertel Ihrer problematischsten Beispiele ein Drittanbieter-Ursprung auftaucht, ist die Lösung eher kommerzieller als technischer Natur: Reduzieren Sie den Gültigkeitsbereich des Tags, laden Sie ihn bei Interaktion oder verlagern Sie ihn auf den Server. Refaktorieren Sie Ihren Handler nicht, um die 40 ms, die ein Chat-Widget ohnehin benötigt, wieder aufzuholen.

Zweig 5: Im Labor reproduzieren, dann den Rahmen reparieren

Nehmen Sie den Selektor von attribution.interactionTargetÖffnen Sie die Chrome-Entwicklertools mit auf Ihre Feldgeräte abgestimmter CPU-Drosselung und zeichnen Sie die Interaktion auf. Suchen Sie nach einer Aufgabe, die über 50 ms, die Schwelle für lange Aufgaben (web.dev), und teilt es durch Nachgeben auf.

Schiff scheduler.yield() mit einer Ausweichlösung. Chrome und Edge unterstützen dies ab Version 129 und Firefox ab Version 142, aber Safari tut dies weder auf dem Desktop noch auf iOS.und MDN kennzeichnet es als eingeschränkte Verfügbarkeit anstatt als Basisversion (DND, kann ich benutzenFür ein türkisches oder Golf-Publikum mit einem hohen iOS-Anteil, ein setTimeout Ein Ausweichmodell ist nicht optional.

Zweig 6: Messen Sie den Markt, an den Sie tatsächlich verkaufen.

Die globalen CrUX-Durchschnittswerte verschleiern den Markt, der Ihnen tatsächlich Gewinne beschert. Der CrUX BigQuery-Datensatz veröffentlicht Ländertabellen. chrome-ux-report.country_tr.YYYYMM Für die Türkei gilt das gleiche Muster für jeden zweistelligen Ländercode – monatlich aktualisiert, wobei Geräteformfaktor und effektiver Verbindungstyp als Dimensionen dienen (Chrome für EntwicklerDie öffentliche CrUX-API gibt keine Länderinformationen preis, daher ist dieser Ausschnitt nur für BigQuery verfügbar.

Vergleichen Sie Ihre Herkunft mit der Ländertabelle für jeden Markt, in den Sie verkaufen. Ein Einzelhändler, der in der Türkei, Deutschland und der Golfregion tätig ist, findet regelmäßig drei verschiedene INP-Distributionen für dieselbe Codebasis, da sich Gerätemix und Netzwerkbedingungen unterscheiden. Bestimmen Sie den Markt mit dem höchsten Umsatz, nicht den, in dem sich Ihre Niederlassung befindet.

Zweig 7: Beweise, dass etwas bewegt wurde

Betrachten Sie die Fehlerbehebung als Experiment, nicht als endgültige Implementierung. TrendyolEin türkischer Marktplatz konnte eine 963 ms lange mobile INP auf eine 700–900 ms lange Aufgabe zurückführen, die durch einen IntersectionObserver-Callback innerhalb einer React-Komponente verursacht wurde und die Aktualisierung des Zustands verzögerte. scheduler.yield()und senkte den INP-Wert im 75. Perzentil innerhalb von sechs Monaten von etwa 1,400 ms auf etwa 650 ms. Der A/B-Test zeigte eine 1 % Steigerung der Klickrate von der Angebotsseite zu den Produktdetails pro Sitzung (web.dev). roter Bus Die Lazy-Load-Interaktionen wurden von 870–900 ms auf 350–370 ms verkürzt, die Texteingabeinteraktion um 72 % verbessert und ein Ergebnis berichtet. 7 % Steigerung des Gesamtumsatzes (web.dev).

Beachten Sie die korrekte Skala: 1 %, nicht 40 %. Was uns zu einer Zahl führt, die einer Korrektur bedarf.

Die Angabe von 8.4 % bedarf einer Einschränkung.

Die am häufigsten zitierte Zahl in diesem Bereich besagt, dass eine Verbesserung der mobilen Geschwindigkeit um 0.1 Sekunden die Konversionsrate im Einzelhandel um 8.4 % und im Reisebereich um 10.1 % steigert. Sie stammt aus einer realen Studie – 55 und Deloitte, im Auftrag von Google, 37 Marken, über 30 Millionen Sitzungen (web.devEs wurden jedoch Lastkennzahlen wie Seitenladezeit und Serverlatenz gemessen. nicht INPDie Daten umfassen 30 Tage Ende 2019; da es keine Kontrollgruppe gab, handelt es sich um eine beobachtete Korrelation, nicht um einen kausalen Zusammenhang. Nutzen Sie sie, um eine Budgetdiskussion anzustoßen, nicht um den Nutzen einer Behebung von Interaktionsverzögerungen vorherzusagen.

[INTERNE DATEN BENÖTIGT: Switas vor/nach p75 INP und Konversions-Delta aus einem Kundenprojekt, um die öffentlichen Fallstudien durch Daten aus erster Hand zu ersetzen.]

Wo dieser Entscheidungsbaum versagt

• Herkunftsorte mit geringem Verkehrsaufkommen. Bei geringer Datenmenge ist das 75. Perzentil Rauschen. Bei weniger als etwa 1,000 Interaktionen pro Vorlage und Woche sollten Sie im Labor ein Profil erstellen und akzeptieren, dass Sie den Erfolg in CrUX nicht verifizieren können.
• Safari- und Firefox-Nutzer sind unsichtbar. CrUX ist nur für Chrome verfügbar. Wenn ein signifikanter Anteil Ihrer Einnahmen über iOS Safari generiert wird, beschreiben Ihre INP-Daten eine Zielgruppe, die Sie nicht vollständig erfassen.
• Scrollruckeln wird nicht behandelt. INP ignoriert das Scrollen, daher wird dieser Baum niemals das Problem in einer Liste mit unendlichem Scrollen finden, die sich schrecklich anfühlt, aber beim Test grün ist.
• Es findet Latenzzeiten, keine Designschulden. Eine 180 ms lange Interaktion auf einem unübersichtlichen Filterfeld ist ein UX-Problem, das dieser Baum nicht erkennen kann.

FAQ

Ist INP dasselbe wie Eingangsverzögerung (First Input Delay)?
Nein. FID maß lediglich die Verzögerung, bevor die Handler der ersten Interaktion ausgeführt wurden. INP erfasst die gesamte Latenz einer repräsentativen Interaktion während des gesamten Besuchs, einschließlich der Handler-Ausführung und des anschließenden Paint-Vorgangs.

Warum sieht mein Lighthouse-Score gut aus, obwohl INP rot ist?
Lighthouse ist ein Testtool und kann INP nicht messen, da kein echter Nutzer aktiv Aktionen ausführt. Annäherungswerte wie die Gesamtblockierungszeit korrelieren nur schwach. Lesen Sie stattdessen den Abschnitt „Felder“ in PageSpeed ​​Insights.

Wie lange dauert es, bis ein Fix in CrUX erscheint?
CrUX meldet Daten in einem gleitenden 28-Tage-Fenster, die BigQuery-Tabellen werden monatlich veröffentlicht. Nach etwa vier Wochen ist mit einem ersten Teilsignal und nach zwei monatlichen Veröffentlichungen mit einem vollständigen Ergebnis zu rechnen.

Kann ich INP reparieren, ohne das Framework anzufassen?
Oft ja. Trendyols Lösung bestand in einem `yield` innerhalb eines Callbacks in React 16.9, ohne dass ein Upgrade erforderlich war. Das verzögerte Laden von Drittanbieter-Tags ist ebenfalls frameworkunabhängig.

Hat ein Einwilligungsbanner Auswirkungen auf INP?
Dies kann auf zwei Arten geschehen: Das Skript des Banners selbst beansprucht während des Ladevorgangs den Hauptthread, und die Zustimmungsentscheidung löst häufig unmittelbar danach einen Anstieg des Tag-Ladens aus. Messen Sie die erste Interaktion nach der Zustimmung separat.

Benötige ich einen RUM-Anbieter oder reicht die Web-Vitals-Bibliothek aus?
Die Attributionskonfiguration und ein Beacon-Endpunkt genügen, um diesen Baum auszuführen. Ein Anbieter kauft Kundenbindung, Segmentierung und Dashboards, nicht bessere Attributionsdaten.

Soll ich INP für SEO oder für Conversion optimieren?
Entscheiden Sie sich für Conversion. Die Core Web Vitals sind zwar ein Ranking-Signal, aber die dokumentierten Geschäftsszenarien – 1 % bei Trendyol, 7 % bei redBus – sind Effekte auf die Interaktionsqualität, die den Aufwand allein schon rechtfertigen.

Führen Sie dies auf Ihrer eigenen Angebotsseite aus.

Nehmen Sie Ihre Vorlage mit dem höchsten Traffic, integrieren Sie die Attributionsfunktion und durchlaufen Sie die Zweige 0 bis 7 der Reihe nach. Falls Sie den Entscheidungsbaum lieber mit Ihren eigenen Felddaten, einschließlich Länderaufteilung und Versuchsdesign, erstellen möchten, bieten wir Ihnen folgende Lösung an: Web-Performance-Team Dies geschieht im Rahmen dieses Engagements.

Quellen

• Interaktion zum nächsten Zeichnen (INP) — web.dev
• Interaktion bis zum nächsten Rendering optimieren — web.dev
• Langsame Interaktionen im Feld finden — web.dev
• Lange Aufgaben optimieren — web.dev
• Leistung – Web-Almanach 2025, HTTP-Archiv
• Wie Trendyol den INP-Wert um 50 % senkte — web.dev
• Wie redBus den INP verbesserte und den Umsatz um 7 % steigerte — web.dev
• Millisekunden machen Millionen – web.dev / 55 / Deloitte
• CrUX auf BigQuery — Chrome für Entwickler
• Scheduler: yield() — MDN
• Scheduler-API: yield – caniuse
• web-vitals JavaScript-Bibliothek — GoogleChrome/web-vitals