Interaction to Next Paint - Interaction to Next Paint - Eingabeverzögerung (Input Delay)

Interaction to Next Paint (INP) Probleme verursacht durch Eingabeverzögerung (Input Delay)

In unserem vorherigen Artikel haben wir über den Interaction to Next Paint gesprochen und wie man Interaction to Next Paint Probleme identifiziert. Wenn Sie die Grundlagen nachlesen möchten, ist dies ein großartiger Ort, um zu beginnen!

In diesem Artikel werde ich mich auf 'Input Delay' konzentrieren. Wie dies die Interaction To Next Paint Probleme beeinflusst und dann erklären, wie man Eingabeverzögerungen minimiert, um den Interaction to Next Paint zu verbessern.!

INP TIPP: meistens tritt Input Delay in den frühen Ladephasen der Webseite auf!

Was ist Input Delay?

Input Delay bezieht sich auf die Zeit, die der Browser benötigt, um mit der Verarbeitung eines Event-Callbacks zu beginnen, nachdem ein Benutzer mit einer Webseite interagiert hat (z. B. Klicken auf eine Schaltfläche oder Drücken einer Taste). Während es immer etwas Input Delay gibt (selbst Browser benötigen Zeit, um die Callbacks zu planen), tritt Input Delay auf, wenn der Browser damit beschäftigt ist, andere geplante Aufgaben auszuführen und die von der Interaktion angeforderten Callbacks nicht sofort planen kann.

Input Delay und der INP

Der Interaction to Newt Paint (INP) kann in 3 Unterteile zerlegt werden: 'Input Delay', 'Processing Time' und 'Presentation Delay'

Vielleicht bemerken Sie, dass es Namensähnlichkeiten zwischen dem Input Delay und dem älteren Core Web Vital 'First Input Delay' gibt. Für diejenigen, die es nicht wissen: Der Interaction to Next Paint ist der Nachfolger des eingestellten 'First Input Delay'. Der First Input Delay maß die Zeit zwischen der ersten Interaktion und dem Event-Callback. Obwohl der First Input Delay eingestellt wurde, spielt 'Input Delay' immer noch eine wichtige Rolle bei der Verbesserung der Web-Reaktionsfähigkeit, da Input Delay die Basis jedes Interaction to Next Paint ist.

Die Bedeutung von Input Delay

Da viele Entwickler beim Verbessern des INP an die Optimierung der Callback-Funktion denken (Optimierung der Verarbeitungszeit), wird der 'Input Delay' oft übersehen. Zugegeben, Input Delay ist normalerweise nicht der größte Teil des INP, aber trotzdem, wenn wir den INP Delay optimieren, werden wir oft alle INP-Interaktionen auf einmal optimieren!

Bei CoreDash sammeln wir jede Stunde Millionen von Core Web Vitals Datenpunkten. Basierend auf diesen Daten macht der Input Delay nur 18% des Interaction to Next Paint aus. Und obwohl das bei weitem nicht so viel ist wie der Presentation Delay oder die Processing Time, ist es immer noch ein signifikanter Anteil.

Ursachen für Input Delay:

Input Delay tritt auf, wenn der Hauptthread damit beschäftigt ist, andere Aufgaben auszuführen. Diese Aufgaben können stammen von:

1. Frühe Aufgaben. Normale, verzögerte und asynchrone Skripte, die früh eingereiht werden, werden frühe Aufgaben erstellen
   
2. Geplante Aufgaben. Manche Aufgaben laufen nicht zu Beginn des Seitenladevorgangs, könnten aber geplant sein für nachdem die Seite geladen wurde. Diese Aufgaben können auch den INP stören und einen Input Delay verursachen. Zum Beispiel Skripte, die nach dem window.onload-Ereignis laufen oder Skripte, die durch sogenannte Optimierungs-Plugins verzögert werden.
   
3. Wiederholte Aufgaben. Wiederkehrende Aufgaben über setInterval(), die eine relativ lange Zeit benötigen, um ausgeführt zu werden, und mit dem INP zusammenfallen
4. Überlappende Callbacks: Überlappende Callbacks sind eine häufige Ursache für Input Delay. Mehrere Callbacks, die kurz hintereinander geplant sind, können eine Warteschlange erstellen, die die Verarbeitung der nächsten Interaktion verzögert.

Minimieren Sie Input Delay

1. Brechen Sie lange frühe Aufgaben in mehrere kleinere Aufgaben auf. Während langer Aufgaben kann der Browser nicht auf Benutzereingaben reagieren, während der Browser nach jeder kurzen Aufgabe auf Benutzereingaben reagieren kann. Also brechen Sie lange Aufgaben auf mit scheduler.yield() (experimentell) oder indem Sie jede Funktion in ein Timeout von 0 verpacken mit setTimeout(callback,0)
2. Verwalten Sie interaktive Elemente. Ziehen Sie in Betracht, interaktive Elemente (wie eine Suchleiste) nicht zu präsentieren, bevor der JavaScript-Code, der sie steuert, vollständig geladen ist. Dies verhindert frühe Klicks für Elemente, die 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 Leerlaufzeiten: Planen Sie nicht-kritische Skripte, um während Browser-Leerlaufzeiten zu laufen mit requestIdleCallback(). RequestIdleCallback läuft, wenn der Browser inaktiv ist und keine Benutzereingaben verarbeiten muss.
4. Verwenden Sie Web Worker, um JavaScript abseits des Hauptthreads des Browsers auszuführen. Web Worker ermöglichen es Skripten, abseits des Hauptthreads zu laufen. Dies wird verhindern, dass der Hauptthread blockiert und INP Input Delay Probleme verursacht.
5. Prüfen Sie auf anstehende Eingaben während wiederholter Aufgaben. Bevor Sie einen Satz oder geplante Aufgaben ausführen, prüfen Sie auf anstehende Eingaben, bevor Sie die Aufgaben starten. Wenn eine Eingabe ansteht, geben Sie dem Hauptthread Vorrang.
6. Entfernen Sie unnötigen Code. Überprüfen Sie Ihre Skripte regelmäßig und entfernen Sie unnötigen Code oder sogar Skripte, da jede Codezeile potenziell einen Input Delay verursachen kann, der den Interaction to Next Paint beeinflusst.

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

Praktische Auswirkungen

Lassen Sie uns zur wichtigsten Frage kommen: 'Was bedeutet das alles für meine Seite?'. Lassen Sie uns es aufschlüsseln für WordPress & REACT.

WordPress

WordPress kommt aufgrund seiner Natur oft mit einem Theme und einer großen Anzahl von Plugins. Sowohl die Plugins als auch die Themes verlassen sich oft auf JavaScript für Funktionalität. Da diese Plugins und Themes von Drittentwicklern gewartet werden, haben wir keine Kontrolle über den Inhalt. Das bedeutet, dass wir die Dateien nicht ändern und 'schlechten Code' optimieren können. Selbst wenn sich die Skripte gut verhalten, gibt es keine Garantie, dass sie dies auch in Zukunft tun werden.

Um also Input Delay zu minimieren und den Interaction to Next Paint (INP) zu optimieren, tun Sie das Folgende:

• Vermeiden Sie die Verwendung von Plugins wann immer möglich. Während Plugins ein einfacher Weg sind, um 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 benutzerdefiniertem Code erreichen?
• Wählen Sie leichtgewichtige Themes. Viele WordPress-Themes 'bieten alles'. Während das wie eine großartige Idee scheint, bedeutet es, dass sie wahrscheinlich mit Funktionalität gefüllt sind, die nicht verwendet wird, aber wertvolle CPU-Zeit beansprucht.
• Vermeiden Sie Page Builder. Page Builder wie Elementor oder WPBakery geben Ihnen eine benutzerfreundliche, visuelle Oberfläche zum Erstellen von Layouts. Leider verlassen sie sich oft auf Skripte für die Präsentation dieses Layouts an die Besucher.
• 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 einfach ein Child-Theme und deregistrieren Sie unnötige Skripte pro Seiten- typ. Zum Beispiel:

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

REACT / NextJS

React oder NextJS-Seiten werden hauptsächlich von JavaScript angetrieben. Das Ausführen dieser Skripte benötigt Zeit und verursacht Input Delay für den Interaction to Next Paint (INP)

• Verwenden Sie Server Components. Server Components werden auf dem Server und nicht auf dem Client gerendert, was zu einer verringerten Menge an JavaScript führen wird.
• Laden Sie Skripte von Drittanbietern mit der richtigen Strategie. Laden Sie Skripte von Drittanbietern nach der Hydration oder sogar während der Leerlaufzeit des Browsers.
• Implementieren Sie ein "Idle Until Urgent"-Muster: Dieses Muster priorisiert Benutzerinteraktionen gegenüber Hintergrundaufgaben und erstellt temporäre Zustände, während der Browser requestIdleCallback verwendet, um nicht-kritische Aufgaben während Browser-Leerlaufzeiten auszuführen.
• Lazy Load Components. Laden Sie Komponenten, die nicht sofort benötigt werden, verzögert mit React.lazy() oder NextJS dynamic()
• Verwenden Sie Suspense für interaktive Komponenten. Ziehen Sie in Betracht, nur interaktive Komponenten clientseitig zu rendern, die Hydration benötigen, um interaktiv zu werden.