INP Input Delay: Ursachen, Diagnose und Lösungen

Interaction to Next Paint (INP)-Probleme verursacht durch Input Delay

Diese Seite ist Teil unserer Interaction to Next Paint (INP)-Serie. INP misst die Gesamtzeit von einer Benutzerinteraktion bis zum nächsten visuellen Update. Input Delay ist die erste von drei Phasen, die den INP ausmachen, gefolgt von Processing Time und Presentation Delay. Wenn Sie neu bei INP sind, lesen Sie zuerst unseren Leitfaden zum Identifizieren und Beheben von INP-Problemen.

INP-TIPP: Meistens tritt Input Delay während der frühen Ladephasen der Webseite auf. In dieser Zeit ist der Browser am stärksten damit beschäftigt, Skripte zu parsen und auszuführen.

Was ist Input Delay?

Input Delay bezeichnet die Zeit, die der Browser benötigt, um mit der Verarbeitung eines Event-Callbacks zu beginnen, nachdem ein Benutzer mit einer Webseite interagiert hat (zum Beispiel durch Klicken auf eine Schaltfläche oder Drücken einer Taste). Obwohl es immer einen gewissen Input Delay gibt (auch Browser brauchen Zeit, um Callbacks zu planen), tritt übermäßiger Input Delay auf, wenn der Browser mit der Ausführung anderer geplanter Aufgaben beschäftigt ist und die durch die Interaktion angeforderten Callbacks nicht sofort planen kann.

Während des Input Delays hat der Benutzer seine Aktion bereits ausgeführt (Klick, Tippen oder Tastendruck), aber der Browser hat noch nicht begonnen, den zugehörigen Event-Handler auszuführen. Der Benutzer sieht keinerlei Reaktion. Dies unterscheidet sich von der Processing Time, bei der der Event-Handler aktiv ausgeführt wird, und vom Presentation Delay, bei dem der Browser das visuelle Update rendert. Input Delay ist reine Wartezeit, verursacht durch einen überlasteten Hauptthread.

Input Delay und der INP

Der Interaction to Next Paint (INP) kann in 3 Teilbereiche unterteilt werden: "Input Delay", "Processing Time" und "Presentation Delay".

Ihnen fällt vielleicht auf, dass es Namensähnlichkeiten zwischen dem Input Delay und dem älteren Core Web Vital "First Input Delay" (FID) gibt. Interaction to Next Paint hat FID als Core Web Vital im März 2024 ersetzt. Der First Input Delay maß nur die Zeit zwischen der ersten Interaktion und dem Event-Callback. Obwohl FID eingestellt wurde, ist Input Delay weiterhin wichtig, da er die Grundlage jeder Interaction to Next Paint-Messung bildet.

Die Bedeutung von Input Delay

Da viele Entwickler bei der Verbesserung des INP an die Optimierung von Callback-Funktionen denken (Optimierung der Processing Time), wird Input Delay oft übersehen. Zugegeben, Input Delay ist normalerweise nicht der größte Teil des INP, aber wenn wir den Input Delay optimieren, optimieren wir oft alle INP-Interaktionen gleichzeitig. Die Reduzierung des Input Delays verbessert jede Interaktion auf der Seite, nicht nur die schlechteste.

Bei CoreDash sammeln wir stündlich Millionen von Core Web Vitals-Datenpunkten. Basierend auf diesen Daten macht Input Delay etwa 18% des Interaction to Next Paint aus. Das ist weniger als Processing Time oder Presentation Delay, aber Input Delay ist oft die am einfachsten zu reduzierende Phase, da die Ursache fast immer "zu viel JavaScript, das zur falschen Zeit läuft" ist.

Ursachen für Input Delay

Input Delay tritt auf, wenn der Hauptthread mit der Ausführung anderer Aufgaben beschäftigt ist. Diese Aufgaben können stammen von:

1. Frühe Aufgaben. Normale, deferred und async Skripte, die früh eingereiht werden, erzeugen frühe Aufgaben. Diese sind die häufigste Quelle für Input Delay, da sie während des kritischen Startfensters ausgeführt werden, wenn Benutzer am wahrscheinlichsten mit der Seite interagieren.
2. Geplante Aufgaben. Einige Aufgaben werden nicht beim Start des Seitenladevorgangs ausgeführt, sondern können für nach dem Laden der Seite geplant sein. Diese Aufgaben können ebenfalls den INP beeinträchtigen und einen Input Delay verursachen. Zum Beispiel Skripte, die nach dem window.onload-Event ausgeführt werden, oder Skripte, die durch sogenannte Optimierungs-Plugins verzögert werden. Erfahren Sie mehr darüber, wann Sie async vs defer für JavaScript verwenden sollten.
3. Wiederkehrende Aufgaben. Wiederkehrende Aufgaben über setInterval(), die relativ lange zur Ausführung brauchen und zeitgleich mit dem INP auftreten.
4. Überlappende Callbacks. Überlappende Callbacks sind eine häufige Ursache für Input Delay. Mehrere Callbacks, die zeitnah geplant werden, können eine Warteschlange bilden und die Verarbeitung der nächsten Interaktion verzögern. Zum Beispiel kann ein mouseover-Handler, der kurz vor einem click-Handler ausgelöst wird, die Verarbeitung des Klicks um die Dauer der Mouseover-Aufgabe verzögern.

Input Delay minimieren

1. Lange frühe Aufgaben in mehrere kleinere Aufgaben aufteilen. Während langer Aufgaben kann der Browser nicht auf Benutzereingaben reagieren, während er nach jeder kurzen Aufgabe auf Benutzereingaben reagieren kann. Teilen Sie lange Aufgaben mit scheduler.yield() auf oder indem Sie jede Funktion in ein timeout von 0 mit setTimeout(callback, 0) einpacken.
2. Interaktive Elemente verwalten. Erwägen Sie, interaktive Elemente (wie eine Suchleiste) erst anzuzeigen, wenn der JavaScript-Code, der sie steuert, vollständig geladen ist. Dies verhindert frühe Klicks auf Elemente, die noch nicht bereit sind, Klicks zu empfangen. Um die UX für dieses Muster zu optimieren, könnten Sie entweder das Laden des notwendigen JavaScript priorisieren oder das Element vorübergehend ausblenden/deaktivieren, bis es funktionsfähig ist.
3. Skriptausführung in der Leerlaufzeit. Planen Sie nicht-kritische Skripte so, dass sie während der Leerlaufzeiten des Browsers mit requestIdleCallback() ausgeführt werden. Diese Funktion wird ausgeführt, wenn der Browser im Leerlauf ist und keine Benutzereingaben verarbeiten muss.
4. Web Workers verwenden, um JavaScript außerhalb des Hauptthreads des Browsers auszuführen. Web Workers ermöglichen es, Skripte außerhalb des Hauptthreads auszuführen. Dies verhindert, dass der Hauptthread blockiert wird und INP-Input-Delay-Probleme verursacht.
5. Auf ausstehende Eingaben bei wiederkehrenden Aufgaben prüfen. Bevor Sie eine Reihe geplanter Aufgaben ausführen, prüfen Sie vor dem Start der Aufgaben auf ausstehende Eingaben. Wenn Eingaben ausstehen, geben Sie zuerst dem Hauptthread nach.
6. Unnötigen Code entfernen. Überprüfen Sie regelmäßig Ihre Skripte und entfernen Sie unnötigen Code oder sogar ganze Skripte, denn jede Codezeile kann potenziell einen Input Delay verursachen, der den Interaction to Next Paint beeinflusst. Lesen Sie unseren Leitfaden zu 14 Methoden zum Verzögern von JavaScript für praktische Techniken.

Aufgaben aufteilen mit scheduler.yield()

Die scheduler.yield()-API ist die empfohlene Methode zum Aufteilen langer Aufgaben. Im Gegensatz zu setTimeout(callback, 0), das die Fortsetzung ans Ende der Aufgabenwarteschlange stellt, behält scheduler.yield() die Priorität der Aufgabe bei. Das bedeutet, der Browser setzt Ihren Code so schnell wie möglich fort, nachdem er ausstehende Benutzereingaben verarbeitet hat. Hier ist eine wiederverwendbare Hilfsfunktion:

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in window.scheduler) {
    return await window.scheduler.yield();
  }
  // Fallback for browsers without scheduler.yield()
  return new Promise((resolve) => {
    setTimeout(resolve, 0);
  });
}

// Example: break up a long initialization sequence
async function initializeApp() {
  loadCriticalFeatures();
  await yieldToMain();  // Let the browser handle any pending input

  loadSecondaryFeatures();
  await yieldToMain();

  loadAnalytics();
  await yieldToMain();

  loadNonEssentialWidgets();
}

Weitere Informationen zur Funktionsweise von scheduler.yield() finden Sie im Chrome Developers Blog.

Aufgaben priorisieren mit scheduler.postTask()

Während scheduler.yield() Aufgaben aufteilt, gibt Ihnen scheduler.postTask() eine feingranulare Kontrolle über die Aufgabenpriorität. Die API akzeptiert drei Prioritätsstufen: "user-blocking" für kritische Aufgaben, die die höchste Priorität benötigen, "user-visible" für Aufgaben mittlerer Priorität und "background" für Aufgaben niedrigster Priorität, die während der Leerlaufzeit ausgeführt werden sollten.

Mit postTask() können Sie sicherstellen, dass nicht-essentielle Arbeit keine Benutzerinteraktionen blockiert. Hier ist ein praktisches Beispiel, das Analytics-Arbeit mit Hintergrundpriorität plant, während UI-Updates die höchste Priorität erhalten:

// High priority: UI feedback runs first
scheduler.postTask(() => {
  showLoadingSpinner();
}, { priority: 'user-blocking' });

// Medium priority: fetch data
scheduler.postTask(async () => {
  const data = await fetchSearchResults(query);
  renderResults(data);
}, { priority: 'user-visible' });

// Low priority: analytics can wait
scheduler.postTask(() => {
  trackSearchEvent(query);
  sendToAnalytics('search', { query });
}, { priority: 'background' });

Überprüfen Sie die Browser-Support-Tabelle für scheduler.postTask(), bevor Sie es in der Produktion verwenden. Für Browser, die die API nicht unterstützen, greifen Sie auf requestIdleCallback() für Hintergrundaufgaben und queueMicrotask() für hochprioritäre Aufgaben zurück.

Praktische Auswirkungen

Was bedeutet das für Ihre Website? Hier sind spezifische Empfehlungen für WordPress und React/Next.js.

WordPress

WordPress kommt aufgrund seiner plugin-gesteuerten Architektur oft mit einem Theme und einer großen Anzahl von Plugins. Sowohl die Plugins als auch die Themes setzen häufig auf JavaScript für Funktionalität. Da diese Plugins und Themes von Drittentwicklern gepflegt werden, haben Sie keine Kontrolle über deren Inhalte. Das bedeutet, dass Sie die Dateien nicht ändern und "schlechten Code" nicht optimieren können. Selbst wenn die Skripte sich heute gut verhalten, gibt es keine Garantie, dass sie das nach dem nächsten Update auch noch tun.

Um Input Delay zu minimieren und den Interaction to Next Paint (INP) auf WordPress zu optimieren, gehen Sie folgendermaßen vor:

• Vermeiden Sie die Verwendung von Plugins, wann immer möglich. Obwohl Plugins eine einfache Möglichkeit sind, Funktionalität hinzuzufügen, fügen sie oft Skripte zur Seite hinzu. Diese Skripte verursachen einen Input Delay, der den INP beeinflusst. Fragen Sie sich bei jedem Plugin: Kann ich die gleiche Funktionalität mit eigenem Code oder einer serverseitigen Lösung erreichen?
• Wählen Sie leichtgewichtige Themes. Viele WordPress-Themes "bieten alles." Obwohl das nach einer großartigen Idee klingt, bedeutet es, dass sie wahrscheinlich mit Funktionalität gefüllt sind, die nicht genutzt wird, aber wertvolle CPU-Zeit beansprucht.
• Vermeiden Sie Page Builder. Page Builder wie Elementor oder WPBakery bieten Ihnen eine benutzerfreundliche, visuelle Oberfläche zum Erstellen von Layouts. Leider setzen sie oft auf schwere Skripte, um dieses Layout den Besuchern zu präsentieren.
• Laden Sie Skripte nur, wenn sie benötigt werden. WordPress neigt dazu, alle Skripte auf allen Seiten zu laden. Um dies zu beheben, erstellen Sie ein Child-Theme und deregistrieren Sie nicht benötigte Skripte pro Seitentyp:

function my_deregister_scripts() {
  if ( ! is_page( 'contact' ) ) {
    // Deregister contact form script on non-contact pages
    wp_dequeue_script( 'contact-form-script' );
  }
}
add_action( 'wp_enqueue_scripts', 'my_deregister_scripts' );

• Überprüfen Sie Ihren Tag Manager. Google Tag Manager-Container sammeln im Laufe der Zeit oft Tags an. Jeder Tag, der während des Seitenladevorgangs ausgelöst wird, fügt dem Hauptthread eine Aufgabe hinzu. Entfernen Sie ungenutzte Tags, setzen Sie geeignete Trigger (zum Beispiel Marketing-Tags nur auf Conversion-Seiten auslösen) und verwenden Sie die integrierten Timing-Berichte des Tag Managers, um langsame Tags zu identifizieren.
• Verzögern Sie nicht-essentielle Drittanbieter-Skripte. Chat-Widgets, Feedback-Tools und Social-Media-Einbettungen müssen nicht sofort geladen werden. Verwenden Sie requestIdleCallback() oder einen scroll-basierten Trigger, um sie nur zu laden, wenn der Benutzer sie wahrscheinlich benötigt. Für detaillierte Strategien lesen Sie unseren Leitfaden zu 14 Methoden zum Verzögern von JavaScript.

React / Next.js

React- und Next.js-Websites werden primär durch JavaScript angetrieben. Das Ausführen von Startup-Skripten, Hydrieren von Komponenten und Verarbeiten des virtuellen DOM benötigt Zeit und kann Input Delay für den Interaction to Next Paint (INP) verursachen. Die gute Nachricht ist, dass sowohl React als auch Next.js Werkzeuge bereitstellen, um dies effektiv zu verwalten.

• Server Components verwenden (React Server Components im Next.js App Router). Server Components werden auf dem Server gerendert und senden kein JavaScript an den Client, was direkt die Menge an Code reduziert, die um Hauptthread-Zeit konkurriert.
• Drittanbieter-Skripte mit der richtigen Strategie laden. In Next.js verwenden Sie die next/script-Komponente mit strategy="afterInteractive" für Skripte, die nach der Hydration benötigt werden, oder strategy="lazyOnload" für Skripte, die während der Browser-Leerlaufzeit geladen werden können. Lesen Sie unseren Leitfaden zu async vs defer JavaScript für die zugrundeliegenden Prinzipien.
• Ein Idle-until-urgent-Muster implementieren. Dieses Muster priorisiert Benutzerinteraktionen gegenüber Hintergrundaufgaben, indem es requestIdleCallback() für nicht-kritische Initialisierung verwendet und gleichzeitig einen synchronen Fallback bereithält, der aktiviert wird, wenn die Komponente tatsächlich benötigt wird.
• Komponenten lazy laden. Laden Sie Komponenten, die nicht sofort benötigt werden, lazy mit React.lazy() oder Next.js dynamic() mit { ssr: false } für rein clientseitige Komponenten.
• Suspense für interaktive Komponenten verwenden. Umschließen Sie interaktive Komponenten mit <Suspense>-Grenzen, damit der Rest der Seite rendern und interaktiv werden kann, während schwere Komponenten im Hintergrund laden. Dies verhindert, dass eine einzelne langsame Komponente die Eingabeverarbeitung auf der gesamten Seite blockiert.
• React Transitions für nicht-dringende Updates verwenden. Umschließen Sie nicht-kritische State-Updates mit startTransition(), damit React sie unterbrechen kann, wenn der Benutzer eine neue Interaktion durchführt. Dies hält die Benutzeroberfläche responsiv, auch wenn große Re-Renders im Gange sind.

Die anderen INP-Phasen erkunden

Um Ihren INP unter Kontrolle zu bekommen, befassen Sie sich auch mit den anderen beiden Phasen:

• Processing Time: Optimieren Sie den Event-Handler-Code, der während der Interaktion ausgeführt wird. Auf den meisten Seiten zahlt sich hier der Großteil Ihrer Optimierungsarbeit aus.
• Presentation Delay: Reduzieren Sie die Rendering- und Painting-Arbeit, die auf die Event-Verarbeitung folgt. Auf komplexen Seiten mit großen DOMs ist dies oft die größte Phase.

Für einen vollständigen Diagnose-Workflow lesen Sie unseren Leitfaden zum Finden und Beheben von INP-Problemen und kehren Sie zur INP-Übersichtsseite für den vollständigen Überblick zurück.