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 gar nicht bemerkbar, und es gibt andere Dinge, die auf der Seite selbst passieren, wodurch Eingabeverzögerungen lang genug sein können, um Probleme zu 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 besten Chancen hat, den Grenzwert „gut“ für den Messwert „Interaction to Next Paint“ (INP) zu erreichen. Die Eingabeverzögerung im Blick zu behalten, ist nur ein Teil davon, diesen Grenzwert zu erreichen.

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 die übermäßige Arbeit mit dem Hauptthread vermeiden, während Nutzer versuchen, mit Ihrer Seite zu interagieren, sollte die Eingabeverzögerung so gering sein, dass Probleme vermieden werden.

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.

Vermeiden Sie wiederkehrende Timer, die übermäßige Arbeit im Hauptthread verursachen.

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 einer bestimmten Zeit geplant wird. setInterval plant dagegen einen Callback so, dass er alle n Millisekunden dauerhaft ausgeführt wird oder bis der Timer mit clearInterval gestoppt wird.

setTimeout ist an sich nicht problematisch. Tatsächlich kann es 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 sich eher wie setInterval verhält, wobei vorzugsweise die Planung der nächsten Iteration erst erfolgt, 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 die 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, der zur Eingabeverzögerung führt, 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, was getan werden kann, um Leistungsprobleme zu beheben, die auf Ihrer Website auftreten können.

Lange Aufgaben vermeiden

Eine Möglichkeit, lange Eingabeverzögerungen zu vermeiden, besteht darin, lange Aufgaben zu vermeiden. Wenn überflüssige Arbeiten im Hauptthread den Hauptthread während Interaktionen blockieren, erhöht sich dadurch die Eingabeverzögerung, bevor die langen Aufgaben beendet werden konnten.

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 für eine 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 besondere Herausforderung bei der Optimierung von Conversions vom Typ „Interaktion“ kann es sein, wenn sich Interaktionen überschneiden. Eine Überschneidung von Interaktionen bedeutet, dass Sie nach einer Interaktion mit einem Element eine weitere Interaktion mit der Seite ausführen, bevor der nächste Frame nach der ersten Interaktion gerendert werden konnte.

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.
Eine Visualisierung zweier gleichzeitiger Interaktionen im Leistungsprofiler in den Entwicklertools von Chrome. 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 durch die Verarbeitung von fetch-Callbacks überlastet wird. Hinweis: Das Attribut signal einer AbortController-Instanz kann auch zum Abbruch von Ereignissen verwendet werden.

Eine weitere Ursache für eine erhöhte Eingabeverzögerung aufgrund sich überschneidender Interaktionen können aufwendige Animationen sein. Insbesondere können Animationen in JavaScript viele requestAnimationFrame-Aufrufe auslösen, was 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 bemerken, gibt es Möglichkeiten, sie zu reduzieren. 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.