Eingabeverzögerung optimieren

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

Jeremy Wagner

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

Was ist Input Delay?

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

Eine vereinfachte Visualisierung der Eingabeverzögerung. Auf der linken Seite ist eine Strichzeichnung eines Mauszeigers zu sehen, hinter dem ein Stern aufgeht, der den Beginn einer Interaktion darstellt. Rechts ist eine Strichzeichnung eines Zahnradsymbols zu sehen, die angibt, wann die Event-Handler für eine Interaktion beginnen. Der dazwischen liegende Abstand wird als Eingabeverzögerung in geschweiften Klammern angegeben.
Die Mechanismen hinter der Eingabeverzögerung. Wenn eine Eingabe vom Betriebssystem empfangen wird, muss sie vor Beginn der Interaktion an den Browser übergeben werden. Dies dauert eine gewisse Zeit und kann durch die vorhandene Arbeit des Hauptthreads erhöht werden.

Ein Teil der Eingabeverzögerung ist unvermeidbar: Es dauert immer etwas Zeit, bis das Betriebssystem ein Eingabeereignis erkennt und an den Browser übergibt. Dieser Teil der Eingabeverzögerung ist jedoch oft nicht einmal spürbar, und es gibt andere Dinge, die auf der Seite selbst auftreten, die die Eingabeverzögerungen so lange dauern können, dass sie Probleme verursachen können.

Was ist die Eingabeverzögerung?

Grundsätzlich sollten Sie jeden Teil einer Interaktion so kurz wie möglich halten, damit Ihre Website unabhängig vom Gerät des Nutzers die besten Chancen hat, den Grenzwert für „gute“ Werte für den INP-Messwert (Interaction to Next Paint) zu erreichen. Die Eingabeverzögerung unter Kontrolle zu halten, ist nur ein Teil davon, diesen Grenzwert zu erreichen.

Daher sollten Sie eine möglichst kürzeste Eingabeverzögerung anstreben, um den Grenzwert für „gut“ von INP zu erreichen. Eingabeverzögerungen werden jedoch nicht vollständig ausgeschlossen. Solange Sie eine übermäßige Eingabe des Hauptthreads vermeiden, während Nutzer mit Ihrer Seite interagieren, sollte die Eingabeverzögerung niedrig genug sein, um Probleme zu vermeiden.

Eingabeverzögerung minimieren

Wie bereits erwähnt, ist eine gewisse Eingabeverzögerung unvermeidlich, andererseits ist eine solche Eingangsverzögerung vermeidbar. Hier sind einige Dinge, die Sie beachten sollten, wenn Sie Probleme mit langen Eingabeverzögerungen haben.

Vermeide wiederkehrende Timer, die übermäßige Arbeit des Hauptthreads auslösen

Es gibt zwei häufig verwendete Timerfunktionen in JavaScript, die zur Eingabeverzögerung beitragen können: setTimeout und setInterval. Der Unterschied zwischen den beiden besteht darin, dass setTimeout einen Callback so plant, dass er nach einer bestimmten Zeit ausgeführt wird. setInterval hingegen plant einen Callback so, dass er alle n Millisekunden oder bis zum Beenden des Timers mit clearInterval ausgeführt wird.

setTimeout ist an sich kein Problem. Oft hilft es sogar dabei, lange Aufgaben zu vermeiden. Sie hängt jedoch davon ab, wann das Zeitlimit auftritt und ob der Nutzer versucht, mit der Seite zu interagieren, wenn der Zeitüberschreitungsrückruf ausgeführt wird.

Außerdem kann setTimeout in einer Schleife oder rekursiv ausgeführt werden, wobei es sich eher wie setInterval verhält, wobei die nächste Iteration vorzugsweise erst geplant wird, wenn die vorherige abgeschlossen ist. Das bedeutet, dass die Schleife bei jedem Aufruf von setTimeout eine Ausgabe an den Hauptthread liefert. Du solltest aber darauf achten, dass der Callback nicht übermäßig viel Arbeit verrichtet.

setInterval führt einen Callback in einem Intervall aus und ist daher Interaktionen viel wahrscheinlicher. Das liegt daran, dass – im Gegensatz zu einer einzelnen Instanz eines setTimeout-Aufrufs, bei der es sich um einen einmaligen Callback handelt, der einer Nutzerinteraktion im Weg stehen kann – setInterval aufgrund des wiederkehrenden Charakters einer Interaktion viel wahrscheinlicher stört, wodurch sich die Eingabeverzögerung der Interaktion erhöht.

Screenshot des Leistungsprofils in den Chrome-Entwicklertools mit Darstellung der Eingabeverzögerung. Eine Aufgabe, die von einer Timer-Funktion ausgelöst wird, wird ausgeführt, kurz bevor ein Nutzer eine Klickinteraktion initiiert. Der Timer verlängert jedoch die Eingabeverzögerung, sodass die Ereignis-Callbacks der Interaktion später ausgeführt werden als sonst.
Ein Timer, der von einem vorherigen setInterval-Aufruf registriert wurde und zur Eingabeverzögerung beigetragen hat, wie im Leistungsbereich der Chrome-Entwicklertools dargestellt. Die zusätzliche Eingabeverzögerung führt dazu, dass die Ereignis-Callbacks für die Interaktion später ausgeführt werden, als dies sonst der Fall wäre.

Wenn Timer im eigenen Code ausgeführt werden, können Sie sie steuern. Bewerten Sie, ob Sie sie benötigen, oder tun Sie Ihr Bestes, um die Arbeit darin so weit wie möglich zu reduzieren. Bei Timern in Drittanbieter-Skripten sieht das jedoch anders aus. Häufig haben Sie keine Kontrolle darüber, was ein Drittanbieter-Script tut. Um Leistungsprobleme im Drittanbietercode zu beheben, müssen Sie häufig mit den Beteiligten herausfinden, ob ein bestimmtes Drittanbieter-Skript erforderlich ist. Wenn ja, nehmen Sie Kontakt mit einem Drittanbieter-Skriptanbieter auf, um herauszufinden, wie Leistungsprobleme behoben werden können, die diese auf Ihrer Website verursachen könnten.

Lange Aufgaben vermeiden

Eine Möglichkeit, lange Eingabeverzögerungen abzuschwächen, besteht darin, lange Aufgaben zu vermeiden. Wenn zu viele Arbeiten im Hauptthread während Interaktionen blockiert werden, erhöht dies die Eingabeverzögerung, bevor die langen Aufgaben abgeschlossen werden konnten.

Eine Visualisierung, wie lange Aufgaben die Eingabeverzögerung verlängern. Oben wird eine Interaktion kurz nach der Ausführung einer einzelnen langen Aufgabe durchgeführt. Dies führt zu einer erheblichen Eingabeverzögerung, die dazu führt, dass Ereignis-Callbacks viel später als vorgesehen ausgeführt werden. Unten findet eine Interaktion ungefähr zur gleichen Zeit statt, aber die lange Aufgabe wird in mehrere kleinere Aufgaben aufgeteilt, indem sie ausgegeben wird, sodass die Ereignis-Callbacks der Interaktion viel früher ausgeführt werden können.
Eine Visualisierung dessen, was mit Interaktionen passiert, wenn Aufgaben zu lang sind und der Browser nicht schnell genug auf Interaktionen reagieren kann, oder wenn längere Aufgaben in kleinere Aufgaben aufgeteilt werden.

Sie sollten nicht nur den Arbeitsaufwand, den Sie in einer Aufgabe ausführen, auf ein Minimum beschränken und sich immer bemühen, so wenig Arbeit im Hauptthread wie möglich zu erledigen. Sie können die Reaktionsfähigkeit auf Nutzereingaben verbessern, indem Sie lange Aufgaben aufteilen.

Interaktionsüberschneidungen berücksichtigen

Eine besonders schwierige Aufgabe bei der Optimierung von INP kann sein, wenn sich Interaktionen überschneiden. Interaktionsüberschneidung bedeutet, dass Sie nach der Interaktion mit einem Element eine weitere Interaktion mit der Seite vornehmen, bevor die erste Interaktion den nächsten Frame rendern konnte.

Darstellung, wann sich Aufgaben überschneiden können, um lange Eingabeverzögerungen zu erzeugen. In dieser Darstellung überschneidet sich eine Klickinteraktion mit einer Keydown-Interaktion, um die Eingabeverzögerung für die Keydown-Interaktion zu erhöhen.
Eine Visualisierung zweier gleichzeitiger Interaktionen im Leistungsprofiler in den Chrome-Entwicklertools. Das Rendering bei der ersten Klickinteraktion führt zu einer Eingabeverzögerung bei der nachfolgenden Tastaturinteraktion.

Die Ursachen für Interaktionsüberschneidungen können so einfach sein, dass die Nutzer viele Interaktionen innerhalb kurzer Zeit ausführen. Das kann vorkommen, wenn Nutzer etwas in Formularfelder eingeben. Dann können viele Tastaturinteraktionen innerhalb sehr kurzer Zeit erfolgen. Wenn die Arbeit an einem Schlüsselereignis besonders teuer ist, wie es beispielsweise bei automatisch vervollständigten Feldern der Fall ist, bei denen Netzwerkanfragen an ein Backend gestellt werden, haben Sie zwei Möglichkeiten:

  • Sie können Eingaben entfernen, um zu begrenzen, wie oft ein Ereignisrückruf in einem bestimmten Zeitraum ausgeführt wird.
  • Verwenden Sie AbortController, um ausgehende fetch-Anfragen abzubrechen, damit der Hauptthread bei der Verarbeitung von fetch-Callbacks nicht überlastet wird. Hinweis: Die Eigenschaft signal einer AbortController-Instanz kann auch zum Abbrechen von Ereignissen verwendet werden.

Eine weitere Ursache für eine erhöhte Eingabeverzögerung aufgrund von sich überschneidenden Interaktionen können teure Animationen sein. Insbesondere durch Animationen in JavaScript können viele requestAnimationFrame-Aufrufe ausgelöst werden, die Nutzerinteraktionen behindern können. Sie können dies umgehen, indem Sie nach Möglichkeit CSS-Animationen verwenden, um potenziell teure Animationsframes zu vermeiden. In diesem Fall sollten Sie jedoch nicht zusammengesetzte Animationen vermeiden, damit Animationen hauptsächlich auf GPU- und Compositor-Threads und nicht auf dem Hauptthread ausgeführt werden.

Fazit

Auch wenn die Eingabeverzögerungen nicht den größten Teil der Zeit für die Ausführung von Interaktionen ausmachen, ist es wichtig zu verstehen, dass jeder Teil einer Interaktion viel Zeit in Anspruch nimmt, die Sie reduzieren können. Wenn Sie eine lange Eingabeverzögerung beobachten, können Sie diese reduzieren. Indem Sie wiederkehrende Timer-Callbacks vermeiden, lange Aufgaben aufteilen und sich über potenzielle Interaktionsüberschneidungen im Klaren sind, können Sie Eingabeverzögerungen reduzieren und so die Interaktivität für die Nutzer Ihrer Website steigern.

Hero-Image aus Unsplash von Erik Mclean