Eingabeverzögerung optimieren

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

Jeremy Wagner

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

Was ist Eingabeverzögerung?

Eingabeverzögerung ist der Zeitraum, der beginnt, wenn der Nutzer zum ersten Mal mit einer Seite interagiert, z. B. auf einen Bildschirm tippt, mit einer Maus klickt oder eine Taste drückt, und endet, wenn die Event-Callbacks für die Interaktion ausgeführt werden. Jede Interaktion beginnt mit einer gewissen Eingabeverzögerung.

Eine vereinfachte Visualisierung der Eingabeverzögerung. Links ist eine Strichzeichnung eines Mauszeigers mit einem Stern dahinter zu sehen, der den Beginn einer Interaktion symbolisiert. Rechts ist eine Strichzeichnung eines Zahnrads zu sehen, die angibt, wann die Ereignishandler für eine Interaktion ausgeführt werden. Der Zwischenraum wird als Eingabeverzögerung mit einer geschweiften Klammer angegeben.
Die Mechanismen hinter der Eingabeverzögerung. Wenn das Betriebssystem eine Eingabe empfängt, muss diese an den Browser weitergeleitet werden, bevor die Interaktion beginnt. Das dauert eine gewisse Zeit und kann durch vorhandene Main-Thread-Arbeit verlängert werden.

Ein Teil der Eingabeverzögerung ist unvermeidlich: 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 spürbar. Es gibt andere Dinge, die auf der Seite selbst passieren und die zu Eingabeverzögerungen führen können, die lang genug sind, um Probleme zu verursachen.

Überlegungen zur 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 INP-Schwelle (Interaction to Next Paint) für „gut“ erreicht. Die Eingabeverzögerung im Blick zu behalten, ist nur ein Teil der Erfüllung dieser Anforderung.

Daher sollten Sie versuchen, die Eingabeverzögerung so gering wie möglich zu halten, um den INP-Schwellenwert „gut“ zu erreichen. Sie sollten jedoch bedenken, dass sich Eingabeverzögerungen nicht vollständig vermeiden lassen. Solange Sie übermäßige Hauptthread-Arbeit 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, aber andererseits ist eine gewisse Eingabeverzögerung vermeidbar. Hier sind einige Dinge, die Sie beachten sollten, wenn Sie mit langen Eingabeverzögerungen zu kämpfen haben.

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

Es gibt zwei häufig verwendete Timer-Funktionen in JavaScript, die zu Eingabeverzögerungen führen können: setTimeout und setInterval. Der Unterschied zwischen den beiden besteht darin, dass mit setTimeout ein Callback für die Ausführung nach einem bestimmten Zeitraum geplant wird. setInterval plant hingegen einen Rückruf, der alle n Millisekunden ausgeführt wird, bis der Timer mit clearInterval beendet wird.

setTimeout ist an sich nicht problematisch, sondern kann sogar hilfreich sein, um lange Aufgaben zu vermeiden. Das hängt jedoch davon ab, wann das Zeitlimit eintritt 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 eher wie setInterval funktioniert. Die nächste Iteration sollte jedoch erst geplant werden, wenn die vorherige abgeschlossen ist. Das bedeutet, dass die Schleife jedes Mal, wenn setTimeout aufgerufen wird, den Hauptthread unterbricht. Sie sollten jedoch darauf achten, dass der Callback nicht zu viel Arbeit verrichtet.

setInterval führt einen Callback in einem Intervall aus und beeinträchtigt daher viel wahrscheinlicher Interaktionen. Im Gegensatz zu einem einzelnen setTimeout-Aufruf, der ein einmaliger Callback ist und eine Nutzerinteraktion möglicherweise behindert, ist es bei setInterval aufgrund der wiederkehrenden Natur viel wahrscheinlicher, dass eine Interaktion behindert wird. 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, erfolgt kurz bevor ein Nutzer eine Klickinteraktion startet. 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 Leistungsbereich der Chrome-Entwicklertools dargestellt. Die zusätzliche Eingabeverzögerung führt dazu, dass die Event-Callbacks für die Interaktion später als sonst ausgeführt werden.

Wenn Timer in Ihrem eigenen Code auftreten, haben Sie die Kontrolle darüber. Prüfen Sie, ob Sie sie benötigen, oder versuchen Sie, den Arbeitsaufwand so weit wie möglich zu reduzieren. Bei Timern in Drittanbieterskripten 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 häufig mit Stakeholdern zusammenarbeiten, um festzustellen, ob ein bestimmtes Drittanbieter-Script erforderlich ist. Wenn ja, müssen Sie sich an einen Drittanbieter-Script-Anbieter wenden, um herauszufinden, was getan werden kann, um Leistungsprobleme zu beheben, die durch das Script auf Ihrer Website verursacht werden.

Lange Aufgaben vermeiden

Eine Möglichkeit, lange Eingabeverzögerungen zu vermeiden, besteht darin, lange Aufgaben zu vermeiden. Wenn Sie zu viele Aufgaben im Hauptthread haben, die den Hauptthread während der Interaktionen blockieren, wird die Eingabeverzögerung erhöht, bevor die langen Aufgaben abgeschlossen sind.

Eine Visualisierung, wie lange Aufgaben die Eingabeverzögerung verlängern. Oben: Kurz nach dem Ausführen einer einzelnen langen Aufgabe kommt es zu einer Interaktion, die zu einer erheblichen Eingabeverzögerung führt. Dadurch werden Event-Callbacks viel später als vorgesehen ausgeführt. Im Grunde findet eine Interaktion ungefähr zur gleichen Zeit statt, aber die lange Aufgabe wird durch Yielding in mehrere kleinere Aufgaben aufgeteilt, sodass die Event-Callbacks der Interaktion viel früher ausgeführt werden können.
Eine Visualisierung der Auswirkungen von zu langen Aufgaben auf Interaktionen, wenn der Browser nicht schnell genug auf Interaktionen reagieren kann, im Vergleich dazu, wenn längere Aufgaben in kleinere Aufgaben unterteilt werden.

Neben der Minimierung des Arbeitsaufwands in einer Aufgabe – 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.

Überschneidungen bei Interaktionen berücksichtigen

Eine besonders schwierige Aufgabe bei der Optimierung von INP kann es sein, wenn sich Interaktionen überschneiden. Bei einer Interaktionsüberschneidung führen Sie eine weitere Interaktion mit der Seite aus, nachdem Sie mit einem Element interagiert haben, bevor der nächste Frame der ursprünglichen 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 „keydown“-Interaktion, wodurch die Eingabeverzögerung für die „keydown“-Interaktion erhöht wird.
Visualisierung von zwei gleichzeitigen Interaktionen im Leistungsprofiler in den Chrome-Entwicklertools. Die Rendering-Arbeit bei der ersten Klickinteraktion führt zu einer Eingabeverzögerung bei der nachfolgenden Tastatureingabe.

Die Ursachen für Überschneidungen bei Interaktionen können ganz einfach sein, z. B. wenn Nutzer viele Interaktionen in kurzer Zeit ausführen. Das kann passieren, wenn Nutzer Formularfelder ausfüllen, da hier viele Tastaturinteraktionen in sehr kurzer Zeit stattfinden können. Wenn die Arbeit an einem Schlüsselereignis besonders kostspielig ist, z. B. im häufigen Fall von Autocomplete-Feldern, in denen Netzwerkanfragen an ein Backend gesendet werden, haben Sie mehrere Möglichkeiten:

  • Sie sollten Eingaben entprellen, um die Anzahl der Ausführungen eines Ereignis-Callbacks in einem bestimmten Zeitraum zu begrenzen.
  • 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 Quelle für eine erhöhte Eingabeverzögerung aufgrund von sich überschneidenden Interaktionen können aufwendige Animationen sein. Insbesondere bei Animationen in JavaScript kann es zu vielen requestAnimationFrame-Aufrufen kommen, die Nutzerinteraktionen behindern. Um dieses Problem zu umgehen, sollten Sie nach Möglichkeit CSS-Animationen verwenden, um das Einreihen potenziell aufwendiger Animationsframes in die Warteschlange zu vermeiden. Achten Sie dabei jedoch darauf, Animationen ohne Compositing 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 lange Eingabeverzögerungen feststellen, können Sie diese reduzieren. Wenn Sie wiederkehrende Timer-Callbacks vermeiden, lange Aufgaben aufteilen und auf potenzielle Überschneidungen bei Interaktionen achten, können Sie die Eingabeverzögerung verringern und die Interaktivität für die Nutzer Ihrer Website beschleunigen.

Hero-Image von Unsplash, von Erik Mclean.