Eingabeverzögerung optimieren

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

Jeremy Wagner

Interaktionen im Web sind kompliziert und im Browser finden alle möglichen Aktivitäten statt, die sie vorantreiben. Allen gemeinsam ist jedoch, dass es zu einer gewissen Eingabeverzögerung kommt, bevor die Ereignis-Callbacks ausgeführt werden. In diesem Leitfaden erfahren Sie, was eine Eingabeverzögerung ist und wie Sie sie minimieren können, damit die Interaktionen auf Ihrer Website schneller ablaufen.

Was ist eine Eingabeverzögerung?

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

Eine vereinfachte Visualisierung der Eingabeverzögerung. Auf der linken Seite ist ein Mauszeiger mit einem Sternenkranz dahinter zu sehen, der den Beginn einer Interaktion signalisiert. Rechts ist ein Zahnrad zu sehen, das angibt, wann die Ereignis-Handler für eine Interaktion ausgeführt werden. Der Zwischenraum wird als Eingabeverzögerung mit einer geschweiften Klammer angegeben.
Die Funktionsweise der Eingabeverzögerung. Wenn eine Eingabe vom Betriebssystem empfangen wird, muss sie vor Beginn der Interaktion an den Browser übergeben werden. Das dauert eine gewisse Zeit und kann durch vorhandene Hauptthread-Arbeiten verlängert werden.

Ein Teil der Eingabeverzögerung ist unvermeidlich: Es dauert immer einige Zeit, bis das Betriebssystem ein Eingabeereignis erkennt und an den Browser weitergibt. Dieser Teil der Eingabeverzögerung ist jedoch oft nicht einmal wahrnehmbar. Außerdem gibt es andere Dinge auf der Seite, die die Eingabeverzögerung so lang werden lassen können, dass Probleme auftreten.

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 besten Chancen hat, den Grenzwert „gut“ für den Messwert „Interaction to Next Paint“ (INP) zu erreichen. Die Eingabeverzögerung im Auge zu behalten, ist nur ein Teil der Anforderungen, um diesen Grenzwert einzuhalten.

Daher sollten Sie die Eingabeverzögerung so kurz wie möglich halten, um den Grenzwert „gut“ für INP zu erreichen. Sie sollten jedoch wissen, dass Eingabeverzögerungen nicht vollständig beseitigt werden können. Solange Sie übermäßige Hauptthread-Arbeiten vermeiden, während Nutzer versuchen, mit Ihrer Seite zu 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 kann sie auch vermieden werden. Hier sind einige Dinge, die Sie beachten sollten, wenn Sie lange Eingabeverzögerungen haben.

Wiederkehrende Timer vermeiden, die zu viel Arbeit im Hauptthread auslösen

Es gibt zwei häufig verwendete Timerfunktionen in JavaScript, die zu einer Eingabeverzögerung beitragen können: setTimeout und setInterval. Der Unterschied besteht darin, dass mit setTimeout ein Callback nach einem bestimmten Zeitraum geplant wird. Mit setInterval wird dagegen ein Rückruf geplant, der alle n Millisekunden ausgeführt wird, bis der Timer mit clearInterval gestoppt wird.

setTimeout ist an sich nicht problematisch. Es kann sogar hilfreich sein, lange Aufgaben zu vermeiden. Das hängt jedoch davon ab, wann die Zeitüberschreitung auftritt und ob der Nutzer versucht, mit der Seite zu interagieren, wenn der Timeout-Callback ausgeführt wird.

Außerdem kann setTimeout in einer Schleife oder rekursiv ausgeführt werden, wobei es eher wie setInterval funktioniert. Die nächste Iteration wird jedoch vorzugsweise erst geplant, wenn die vorherige abgeschlossen ist. Das bedeutet zwar, dass die Schleife jedes Mal, wenn setTimeout aufgerufen wird, den Hauptthread freigibt, aber Sie sollten darauf achten, dass der Rückruf nicht zu viel Arbeit verursacht.

setInterval führt einen Callback in einem Intervall aus und beeinträchtigt daher viel wahrscheinlicher Interaktionen. Das liegt daran, dass im Gegensatz zu einer einzelnen Instanz eines setTimeout-Aufrufs, bei dem es sich um einen einmaligen Rückruf handelt, der möglicherweise die Nutzerinteraktion beeinträchtigt, die wiederholte Ausführung von setInterval die Wahrscheinlichkeit deutlich erhöht, dass die Interaktion beeinträchtigt wird, was wiederum die Eingabeverzögerung der Interaktion erhöht.

Screenshot des Leistungsprofils in den Chrome-Entwicklertools, der eine Eingabeverzögerung zeigt Eine Aufgabe, die durch eine Timerfunktion ausgelöst wird, wird ausgeführt, kurz bevor ein Nutzer eine Klickinteraktion ausführt. Der Timer verlängert jedoch die Eingabeverzögerung, wodurch die Ereignis-Callbacks der Interaktion später ausgeführt werden als sonst.
Ein Timer, der durch einen vorherigen setInterval-Aufruf registriert wurde und zur Eingabeverzögerung beiträgt, wie im Bereich „Leistung“ der Chrome-Entwicklertools dargestellt. Durch die zusätzliche Eingabeverzögerung werden die Ereignis-Callbacks für die Interaktion später ausgeführt als sie es sonst könnten.

Wenn Timer in Code von Drittanbietern auftreten, haben Sie keine Kontrolle darüber. Überlegen Sie, ob Sie sie benötigen, oder versuchen Sie, den Arbeitsaufwand so gering wie möglich zu halten. Bei Timern in Drittanbieter-Scripts sieht es jedoch anders aus. Sie haben oft keine Kontrolle darüber, was ein Drittanbieter-Script tut. Die Behebung von Leistungsproblemen im Code von Drittanbietern erfordert häufig die Zusammenarbeit mit Stakeholdern, um festzustellen, ob ein bestimmtes Drittanbieter-Script erforderlich ist. Falls ja, müssen Sie sich mit dem Anbieter des Drittanbieter-Scripts in Verbindung setzen, um herauszufinden, wie sich die Leistungsprobleme beheben lassen, die es auf Ihrer Website verursachen kann.

Lange Aufgaben vermeiden

Eine Möglichkeit, lange Eingabeverzögerungen zu vermeiden, besteht darin, lange Aufgaben zu vermeiden. Wenn zu viele Aufgaben im Hauptthread ausgeführt werden, die den Hauptthread während der Interaktionen blockieren, erhöht sich die Eingabeverzögerung, bevor die langen Aufgaben abgeschlossen werden können.

Eine Visualisierung, wie lange Aufgaben die Eingabeverzögerung verlängern. Oben tritt eine Interaktion kurz nach dem Ausführen einer einzelnen langen Aufgabe auf, was zu einer erheblichen Eingabeverzögerung führt, die dazu führt, dass Ereignis-Callbacks viel später als vorgesehen ausgeführt werden. Unten wird eine Interaktion ungefähr zur selben Zeit ausgeführt, aber die lange Aufgabe wird durch Yielding in mehrere kleinere Aufgaben aufgeteilt, 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 darauf reagieren kann, im Vergleich dazu, wenn längere Aufgaben in kleinere Aufgaben unterteilt werden.

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

Achten Sie auf Überschneidungen von Interaktionen

Eine besonders große Herausforderung bei der Optimierung von Conversions vom Typ „Interaktion“ kann es sein, wenn sich Interaktionen überschneiden. Bei einer Überschneidung von Interaktionen führen Sie nach einer Interaktion mit einem Element eine weitere Interaktion mit der Seite aus, bevor die ursprüngliche Interaktion den nächsten Frame gerendert hat.

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

Überschneidungen von Interaktionen können so einfach sein wie viele Interaktionen der Nutzer in kurzer Zeit. Das kann passieren, wenn Nutzer in Formularfelder tippen, in denen viele Tastaturinteraktionen in sehr kurzer Zeit stattfinden. Wenn die Verarbeitung eines Schlüsselereignisses besonders aufwendig ist, z. B. bei Autocomplete-Feldern, bei denen Netzwerkanfragen an ein Back-End gesendet werden, haben Sie mehrere Möglichkeiten:

  • Sie können Debounce-Ereignisse verwenden, um zu begrenzen, wie oft ein Ereignis-Callback in einem bestimmten Zeitraum ausgeführt wird.
  • Verwende AbortController, um ausgehende fetch-Anfragen abzubrechen, damit der Hauptthread nicht überlastet wird, wenn fetch-Callbacks verarbeitet werden. Hinweis: Mit der Property signal einer AbortController-Instanz können auch Ereignisse abgebrochen werden.

Eine weitere Ursache für eine erhöhte Eingabeverzögerung aufgrund sich überschneidender Interaktionen können aufwendige Animationen sein. Insbesondere Animationseffekte in JavaScript können viele requestAnimationFrame-Aufrufe auslösen, was die Nutzerinteraktionen beeinträchtigen kann. Verwenden Sie daher nach Möglichkeit CSS-Animationen, um potenziell teure Animationsframes nicht in die Warteschlange zu stellen. Achten Sie dabei aber darauf, nicht zusammengesetzte Animationen zu vermeiden, damit Animationen hauptsächlich auf der GPU und den Compose-Threads und nicht im Hauptthread ausgeführt werden.

Fazit

Eingabeverzögerungen machen zwar nicht den Großteil der Zeit aus, die für die Ausführung Ihrer Interaktionen benötigt wird, aber Sie sollten wissen, dass jeder Teil einer Interaktion eine gewisse Zeit in Anspruch nimmt, die Sie reduzieren können. Wenn Sie eine lange Eingabeverzögerung feststellen, gibt es Möglichkeiten, diese zu verringern. Wenn Sie wiederholte Timer-Callbacks vermeiden, lange Aufgaben aufteilen und sich über mögliche Überschneidungen von Interaktionen im Klaren sind, können Sie die Eingabeverzögerung reduzieren. Das führt zu einer schnelleren Interaktivität für die Nutzer Ihrer Website.

Hero-Image von Unsplash, von Erik Mclean.