Eingabeverzögerung optimieren

Hier erfahren Sie, was die Eingabeverzögerung ist und wie Sie sie reduzieren können, um die Interaktivität zu beschleunigen.

Jeremy Wagner

Interaktionen im Web sind kompliziert, da im Browser alle möglichen Aktivitäten stattfinden, um sie zu ermöglichen. Alle haben jedoch gemeinsam, dass es zu einer Eingabeverzögerung kommt, bevor die Ereignis-Callbacks ausgeführt werden. In diesem Leitfaden erfahren Sie, was die Eingabeverzögerung ist und wie Sie sie minimieren können, damit Interaktionen auf Ihrer Website schneller ausgeführt werden.

Was ist die Eingabeverzögerung?

Die Eingabeverzögerung ist der Zeitraum zwischen der ersten Interaktion des Nutzers mit einer Seite (z. B. Tippen auf einen Bildschirm, Klicken mit der Maus oder Drücken einer Taste) und dem Beginn der Ereignis-Callbacks für die Interaktion. Jede Interaktion beginnt mit einer gewissen Eingabeverzögerung.

Eine vereinfachte Darstellung der Eingabeverzögerung. Links ist ein Mauszeiger mit einem Stern dahinter zu sehen, der den Beginn einer Interaktion darstellt. Rechts ist eine Strichzeichnung eines Zahnrads zu sehen, die den Zeitpunkt darstellt, an dem die Event-Handler für eine Interaktion ausgeführt werden. Der Abstand dazwischen wird mit einer geschweiften Klammer als Eingabeverzögerung gekennzeichnet.
Die Mechanismen hinter der Eingabeverzögerung. Wenn das Betriebssystem eine Eingabe empfängt, muss diese an den Browser weitergegeben werden, bevor die Interaktion beginnt. Dies nimmt eine gewisse Zeit in Anspruch und kann durch vorhandene Hauptthread-Arbeit erhöht werden.

Ein Teil der Eingabeverzögerung ist unvermeidlich: Es dauert immer eine gewisse Zeit, bis das Betriebssystem ein Eingabeereignis erkennt und an den Browser weitergibt. Dieser Teil der Eingabeverzögerung ist jedoch oft nicht einmal spürbar. Es gibt andere Dinge, die auf der Seite selbst passieren und die Eingabeverzögerungen so lang machen können, dass sie Probleme verursachen.

Eingabeverzögerung

Im Allgemeinen sollten Sie jeden Teil einer Interaktion so kurz wie möglich halten, damit Ihre Website unabhängig vom Gerät des Nutzers die beste Chance hat, den Schwellenwert „Gut“ des Messwerts „Interaction to Next Paint“ (INP) zu erreichen. Die Eingabeverzögerung im Rahmen zu halten, ist nur ein Teil der Anforderungen.

Daher sollten Sie eine möglichst kurze Eingabeverzögerung anstreben, um den Grenzwert „Gut“ des INP zu erreichen. Sie sollten sich jedoch bewusst sein, dass Sie Eingabeverzögerungen nicht vollständig eliminieren können. Solange Sie übermäßige Arbeit im Hauptthread vermeiden, während Nutzer versuchen, mit Ihrer Seite zu interagieren, sollte die Eingabeverzögerung gering genug sein, um Probleme zu vermeiden.

Eingabeverzögerung minimieren

Wie bereits erwähnt, ist eine gewisse Eingabeverzögerung unvermeidlich, aber ein Teil der Eingabeverzögerung ist vermeidbar. Hier sind einige Punkte, die du beachten solltest, wenn du Probleme mit langen Eingabeverzögerungen hast.

Vermeiden Sie wiederkehrende Timer, die zu viele Hauptthread-Aufgaben auslösen.

In JavaScript gibt es zwei häufig verwendete Timer-Funktionen, die zu Eingabeverzögerungen beitragen können: setTimeout und setInterval. Der Unterschied zwischen den beiden besteht darin, dass setTimeout einen Callback plant, der nach einer bestimmten Zeit ausgeführt wird. setInterval hingegen plant einen Callback, der alle n Millisekunden ausgeführt wird, bis der Timer mit clearInterval gestoppt wird.

setTimeout ist an sich nicht problematisch. Tatsächlich kann es hilfreich sein, um Long Tasks zu vermeiden. Es hängt jedoch davon ab, wann das Zeitlimit erreicht wird und ob der Nutzer versucht, mit der Seite zu interagieren, wenn der Zeitlimit-Callback ausgeführt wird.

Außerdem kann setTimeout in einer Schleife oder rekursiv ausgeführt werden, wobei es sich eher wie setInterval verhält. Es ist jedoch besser, die nächste Iteration erst zu planen, wenn die vorherige abgeschlossen ist. Das bedeutet zwar, dass die Schleife bei jedem Aufruf von setTimeout an den Hauptthread übergibt, Sie sollten aber darauf achten, dass der Callback nicht zu viel Arbeit verursacht.

setInterval führt einen Callback in einem Intervall aus und beeinträchtigt daher mit höherer Wahrscheinlichkeit Interaktionen. Im Gegensatz zu einer einzelnen Instanz eines setTimeout-Aufrufs, bei dem es sich um einen einmaligen Callback handelt, der eine Nutzerinteraktion möglicherweise behindert, ist es aufgrund der wiederkehrenden Natur von setInterval viel wahrscheinlicher, dass er eine Interaktion tatsächlich behindert. Dadurch erhöht sich die Eingabeverzögerung der Interaktion.

Screenshot des Leistungsprofilers in den Chrome-Entwicklertools, der die Eingabeverzögerung zeigt. Eine Aufgabe, die von einer Timer-Funktion ausgelöst wird, tritt kurz vor einer Klickinteraktion durch den Nutzer auf. Der Timer verlängert jedoch die Eingabeverzögerung, sodass die Ereignis-Callbacks der Interaktion später als sonst ausgeführt werden.
Ein Timer, der durch einen vorherigen setInterval-Aufruf registriert wurde und zur Eingabeverzögerung beiträgt, wie im Bereich „Leistung“ der Chrome-Entwicklertools dargestellt. Die zusätzliche Eingabeverzögerung führt dazu, dass die Ereignis-Callbacks für die Interaktion später als sonst ausgeführt werden.

Wenn Timer in Code von Erstanbietern auftreten, haben Sie die Kontrolle darüber. Überlegen Sie, ob Sie sie wirklich benötigen, oder versuchen Sie, die Arbeit darin so weit wie möglich zu reduzieren. Bei Timern in Drittanbieterskripts ist das jedoch anders. Sie haben oft keine Kontrolle darüber, was ein Drittanbieter-Script tut. Um Leistungsprobleme in Drittanbieter-Code zu beheben, müssen Sie oft mit Stakeholdern zusammenarbeiten, um festzustellen, ob ein bestimmtes Drittanbieter-Script erforderlich ist. Wenn ja, müssen Sie sich mit dem Anbieter des Drittanbieter-Scripts in Verbindung setzen, um herauszufinden, was getan werden kann, um Leistungsprobleme zu beheben, die es auf Ihrer Website verursachen kann.

Long Tasks vermeiden

Eine Möglichkeit, lange Eingabeverzögerungen zu vermeiden, besteht darin, lange Aufgaben zu vermeiden. Wenn der Hauptthread während Interaktionen durch übermäßige Arbeit blockiert wird, erhöht sich die Eingabeverzögerung, bevor die Long Tasks abgeschlossen werden können.

Eine Visualisierung, die zeigt, wie lange Aufgaben die Eingabeverzögerung verlängern. Oben: Eine Interaktion erfolgt kurz nach der Ausführung eines einzelnen Long Tasks. Das führt zu einer erheblichen Eingabeverzögerung, sodass Ereignis-Callbacks viel später als vorgesehen ausgeführt werden. Im unteren Beispiel findet eine Interaktion ungefähr zur gleichen Zeit statt, aber die lange Aufgabe wird durch das Yielding in mehrere kleinere Aufgaben aufgeteilt, sodass die Event-Callbacks der Interaktion viel früher ausgeführt werden können.
Eine Visualisierung, die zeigt, was mit Interaktionen passiert, wenn Aufgaben zu lang sind und der Browser nicht schnell genug auf Interaktionen reagieren kann, im Vergleich dazu, wenn längere Aufgaben in kleinere Aufgaben aufgeteilt werden.

Neben der Minimierung des Arbeitsaufwands in einer Aufgabe – und Sie sollten immer versuchen, so wenig Arbeit wie möglich im Hauptthread zu erledigen – können Sie die Reaktionsfähigkeit auf Nutzereingaben verbessern, indem Sie lange Aufgaben aufteilen.

Auf Überschneidungen bei Interaktionen achten

Ein besonders schwieriger Teil der INP-Optimierung kann sein, wenn sich Interaktionen überschneiden. Interaktionsüberschneidung bedeutet, dass Sie nach der Interaktion mit einem Element eine weitere Interaktion mit der Seite ausführen, bevor die erste Interaktion die Möglichkeit hatte, den nächsten Frame zu rendern.

Eine Darstellung, wie sich Aufgaben überschneiden können, was zu langen Eingabeverzögerungen führt. In dieser Darstellung überschneidet sich eine Klickinteraktion mit einer „keydown“-Interaktion, wodurch sich die Eingabeverzögerung für die „keydown“-Interaktion erhöht.
Eine Visualisierung von zwei gleichzeitigen Interaktionen im Leistungsprofiler in den Chrome-Entwicklertools. Die Rendering-Arbeit bei der ersten Klickinteraktion verursacht eine Eingabeverzögerung für die nachfolgende Tastaturinteraktion.

Eine Ursache für Interaktionsüberschneidungen kann einfach sein, dass Nutzer in kurzer Zeit viele Interaktionen ausführen. Das kann passieren, wenn Nutzer in Formularfelder tippen, wo in sehr kurzer Zeit viele Tastaturinteraktionen auftreten können. Wenn die Arbeit an einem Schlüsselereignis besonders aufwendig ist, wie es häufig bei Feldern mit automatischer Vervollständigung der Fall ist, bei denen Netzwerkanfragen an ein Backend gesendet werden, haben Sie mehrere Möglichkeiten:

  • Sie können Eingaben entprellen, um die Häufigkeit zu begrenzen, mit der ein Ereignis-Callback in einem bestimmten Zeitraum ausgeführt wird.
  • Verwenden Sie AbortController, um ausgehende fetch-Anfragen abzubrechen, damit der Hauptthread nicht durch die Verarbeitung von fetch-Callbacks überlastet wird. Hinweis: Die signal-Property einer AbortController-Instanz kann auch zum Abbrechen von Ereignissen verwendet werden.

Eine weitere Ursache für eine erhöhte Eingabeverzögerung aufgrund sich überschneidender Interaktionen können rechenintensive Animationen sein. Insbesondere Animationen in JavaScript können viele requestAnimationFrame-Aufrufe auslösen, die Nutzerinteraktionen beeinträchtigen können. Um dies zu umgehen, sollten Sie nach Möglichkeit CSS-Animationen verwenden, um das Einreihen potenziell rechenintensiver Animationsframes in die Warteschlange zu vermeiden. Achten Sie dabei aber darauf, nicht zusammengesetzte Animationen zu vermeiden, damit Animationen hauptsächlich auf der GPU und den Compositor-Threads und nicht auf dem Hauptthread ausgeführt werden.

Fazit

Eingabeverzögerungen machen zwar möglicherweise nicht den Großteil der Zeit aus, die für die Ausführung Ihrer Interaktionen benötigt wird, aber es ist wichtig zu wissen, dass jeder Teil einer Interaktion Zeit in Anspruch nimmt, die Sie reduzieren können. Wenn Sie eine lange Eingabeverzögerung feststellen, haben Sie die Möglichkeit, diese zu reduzieren. Wenn Sie wiederkehrende Timer-Callbacks vermeiden, lange Aufgaben aufteilen und sich potenzieller Überschneidungen bei Interaktionen bewusst sind, können Sie die Eingabeverzögerung reduzieren und die Interaktivität für die Nutzer Ihrer Website beschleunigen.