Eingabeverzögerung optimieren

Hier erfährst du, was Eingabeverzögerung ist und wie du sie für eine schnellere Interaktion reduzieren kannst.

Wagner
Jeremy Wagner
GitHub Startseite

Interaktionen im Web sind kompliziert und es gibt zahlreiche Aktivitäten im Browser, um sie zu fördern. Sie alle haben jedoch gemeinsam, dass sie eine gewisse Eingabeverzögerung verursachen, 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 Eingabeverzögerung?

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

Eine vereinfachte Visualisierung der Eingabeverzögerung. Auf der linken Seite ist eine Strichzeichnung eines Mauscursors zu sehen, im Hintergrund ein Stern, der den Beginn einer Interaktion angibt. Rechts ist das Strichbild eines Zahnrads zu sehen, das angibt, wann die Event-Handler für eine Interaktion beginnen. Das Leerzeichen dazwischen wird als Eingabeverzögerung mit einer geschweiften Klammer bezeichnet.
Die Mechanik der Eingabeverzögerung. Wenn eine Eingabe vom Betriebssystem empfangen wird, muss sie vor Beginn der Interaktion an den Browser übergeben werden. Dies nimmt eine gewisse Zeit in Anspruch und kann durch die vorhandene Arbeit im Hauptthread erhöht werden.

Ein Teil der Eingabeverzögerung ist unvermeidbar: Es dauert immer eine gewisse Zeit, bis das Betriebssystem ein Eingabeereignis erkennt und an den Browser übergibt. Dieser Teil der Eingabeverzögerung ist jedoch oft nicht einmal wahrnehmbar. Es gibt andere Dinge, die auf der Seite selbst passieren und dazu führen können, dass die Eingabeverzögerungen so lange dauern, dass Probleme auftreten.

Was bedeutet Eingabeverzögerung?

Generell ist es wichtig, jeden Teil einer Interaktion so kurz wie möglich zu halten, damit Ihre Website unabhängig vom Gerät des Nutzers möglichst den Grenzwert für die Interaktion mit dem nächsten Paint (INP) erreicht. Die Eingabeverzögerungen zu prüfen, ist nur ein Teil der Erreichung dieses Grenzwerts.

Sie könnten versucht sein, sich die Grenzwerte für die First Input Delay (FID) anzusehen, um die Zulässigkeit für Eingabeverzögerungen zu bestimmen. Der „gute“ Grenzwert für FID beträgt jedoch 100 Millisekunden oder weniger. Wenn Sie diesen Grenzwert überschreiten, weisen Sie die Hälfte Ihres Budgets für INP allein der Eingabeverzögerung zu. Dies ist nicht empfehlenswert, wenn Sie bedenken, dass eine Interaktion auch Zeit benötigt, um Ereignis-Callbacks auszuführen und den Browser den nächsten Frame darzustellen.

Um den „guten“ Grenzwert von INP zu erreichen, sollten Sie eine möglichst kürzeste Eingabeverzögerung anstreben. Sie sollten jedoch nicht davon ausgehen, dass sie vollständig beseitigt wird, da dies unmöglich ist. Solange Sie die übermäßige Arbeit des Hauptthreads vermeiden, während Nutzer mit Ihrer Seite interagieren, sollte die Eingabeverzögerung niedrig genug sein, um Probleme zu vermeiden.

Eingangsverzögerung minimieren

Wie bereits erwähnt, ist eine gewisse Eingabeverzögerung unvermeidbar, andererseits eine gewisse Eingabeverzögerung vermeidbar. Hier sind einige Dinge, die Sie berücksichtigen sollten, wenn Sie Probleme mit langen Eingabeverzögerungen haben.

Vermeiden Sie wiederkehrende Timer, die zu viel Arbeit im Hauptthread einleiten.

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 die Ausführung eines Callbacks nach einer bestimmten Zeit plant. setInterval hingegen plant einen Callback, der dauerhaft alle n Millisekunden ausgeführt wird oder so lange, bis der Timer mit clearInterval gestoppt wird.

setTimeout ist an sich kein Problem. Es kann sogar hilfreich sein, um langwierige 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überschreitungs-Callback ausgeführt wird.

Außerdem kann setTimeout in einer Schleife oder rekursiv ausgeführt werden, wobei es sich ähnlich wie setInterval verhält, wobei die nächste Iteration vorzugsweise erst nach Abschluss der vorherigen geplant wird. Das bedeutet, dass die Schleife bei jedem Aufruf von setTimeout an den Hauptthread übergeben wird. Sie sollten jedoch darauf achten, dass der Callback nicht übermäßig viel Arbeit in Anspruch nimmt.

setInterval führt einen Callback in einem Intervall aus und behindert Interaktionen daher viel eher. Im Gegensatz zu einer einzelnen Instanz eines setTimeout-Aufrufs, bei dem es sich um einen einmaligen Callback handelt, der einer Nutzerinteraktion möglicherweise im Weg steht, ist es aufgrund des wiederkehrenden Charakters von setInterval viel wahrscheinlicher, dass er einer Interaktion gestört wird. Dadurch erhöht sich die Eingabeverzögerung der Interaktion.

Screenshot des Leistungsprofils in den Chrome-Entwicklertools, der die Eingabeverzögerung zeigt Eine Aufgabe, die von einer Timer-Funktion ausgelöst wird, wird ausgeführt, kurz bevor ein Nutzer eine Klick-Interaktion initiiert. Der Timer verlängert jedoch die Eingabeverzögerung, sodass die Ereignisrückrufe der Interaktion später ausgeführt werden als sonst.
Ein Timer, der von einem vorherigen setInterval-Aufruf registriert wurde und zur Eingabeverzögerung beiträgt, wie im Leistungssteuerfeld der Chrome-Entwicklertools dargestellt. Durch die zusätzliche Eingabeverzögerung werden die Ereignis-Callbacks für die Interaktion später ausgeführt als sonst.

Wenn Timer in eigenen Code ausgeführt werden, haben Sie die Kontrolle über sie. Bewerten Sie, ob Sie sie brauchen, oder geben Sie Ihr Bestes, um den darin enthaltenen Arbeitsaufwand so weit wie möglich zu reduzieren. Bei Timern von Drittanbietern sieht das jedoch anders aus. Häufig haben Sie keine Kontrolle über die Funktionsweise von Drittanbieter-Skripts. Um Leistungsprobleme im Code von Drittanbietern zu beheben, müssen Sie häufig gemeinsam mit Stakeholdern ermitteln, ob ein bestimmtes Drittanbieterskript erforderlich ist. Wenden Sie sich in diesem Fall an einen Skriptanbieter des Drittanbieters, 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 Sie übermäßig viele Hauptthread-Arbeiten haben, die den Hauptthread während Interaktionen blockieren, erhöht dies die Eingabeverzögerung für sie, bevor die langen Aufgaben abgeschlossen werden konnten.

Eine Visualisierung, wie lange Aufgaben die Eingabeverzögerung verlängern. Eine Interaktion findet kurz nach der Ausführung einer einzelnen langen Aufgabe statt. Dadurch kommt es zu einer erheblichen Eingabeverzögerung, die dazu führt, dass Ereignis-Callbacks viel später als erwartet ausgeführt werden. Im unteren Bereich erfolgt eine Interaktion ungefähr zur gleichen Zeit, die lange Aufgabe wird jedoch in mehrere kleinere Aufgaben aufgeteilt, indem sie zurückgegeben 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, im Vergleich zur Aufteilung längerer Aufgaben in kleinere Aufgaben.

Neben der Minimierung des Arbeitsaufwands in einer Aufgabe – und Sie sollten sich immer bemühen, möglichst wenig Arbeit am Hauptthread zu erledigen, können Sie die Reaktionsfähigkeit auf Nutzereingaben verbessern, indem Sie lange Aufgaben aufteilen.

Interaktionsüberschneidungen berücksichtigen

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

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

Die Quellen der Interaktionsüberschneidung können so einfach sein, dass Nutzende in kurzer Zeit viele Interaktionen ausführen. Dies kann vorkommen, wenn Nutzer Text in Formularfelder eingeben, wo viele Tastaturinteraktionen in sehr kurzer Zeit erfolgen können. Wenn die Arbeit an einem Schlüsselereignis besonders aufwendig ist, z. B. bei Feldern für die automatische Vervollständigung, bei denen Netzwerkanfragen an ein Back-End gestellt werden, haben Sie mehrere Möglichkeiten:

  • Sie können Eingaben entprellen, 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: Das Attribut 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önnten. Um dies zu umgehen, sollten 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 in GPU- und Compositor-Threads ausgeführt werden und nicht im Hauptthread.

Fazit

Auch wenn die Eingabeverzögerungen nicht den Großteil der Zeit ausmachen, die Ihre Interaktionen benötigen, 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 sie reduzieren. Indem Sie wiederkehrende Timer-Rückrufe vermeiden, lange Aufgaben aufteilen und sich mögliche Interaktionsüberschneidungen bewusst sind, können Sie die Eingabeverzögerung reduzieren und so die Interaktivität Ihrer Website-Nutzer beschleunigen.

Hero-Image aus Unsplash von Erik Mclean