Diese Seite wurde von der Cloud Translation API übersetzt.

Eingabeverzögerung optimieren

Erfahren Sie, was Eingabeverzögerung ist, und lernen Sie Techniken kennen, um sie für eine schnellere Interaktivität zu reduzieren.

Jeremy Wagner

Interaktionen im Web sind komplizierte Dinge, bei denen im Browser verschiedene Aktivitäten stattfinden. Sie alle haben jedoch alle 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 ablaufen.

Was ist Eingabeverzögerung?

Die Eingabeverzögerung ist die Zeitspanne zwischen 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 Zeitpunkt, an dem die Ereignis-Callbacks für die Interaktion ausgeführt werden. Jede Interaktion beginnt mit einer gewissen Eingabeverzögerung.

Ein Teil der Eingabeverzögerung ist unvermeidbar: Das Betriebssystem benötigt immer etwas Zeit, um ein Eingabeereignis zu erkennen und an den Browser zu übergeben. Dieser Teil der Eingabeverzögerung ist jedoch oft nicht spürbar. Auf der Seite selbst können auch andere Dinge passieren, die dazu führen können, dass Eingabeverzögerungen lang genug sind, um Probleme zu verursachen.

Eingabeverzögerung

Im Allgemeinen sollten Sie jeden Teil einer Interaktion so kurz wie möglich halten, damit Ihre Website die besten Chancen hat, den INP-Messwert (Interaction to Next Paint) mit dem Wert „Gut“ zu erreichen. Grenzwert, unabhängig vom Gerät des Nutzers. Die Eingabeverzögerung im Blick zu behalten, ist nur ein Teil davon, diesen Grenzwert zu erreichen.

Daher sollten Sie versuchen, die kürzestmögliche Eingabeverzögerung anstreben, um die „guten“ INP-Anforderungen zu erfüllen. Grenzwert. Beachten Sie jedoch, dass Sie Eingabeverzögerungen nicht vollständig eliminieren 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, sind einige Eingabeverzögerungen unvermeidbar, andererseits aber . Hier sind einige Dinge, die Sie bei langen Eingabeverzögerungen beachten sollten.

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

Es gibt zwei häufig verwendete Timer-Funktionen in JavaScript, die zur Eingabeverzögerung beitragen können: setTimeout und setInterval. Der Unterschied zwischen den beiden besteht darin, dass setTimeout eine Callback-Funktion plant, die nach einer bestimmten Zeit ausgeführt wird. setInterval plant hingegen einen Callback, der alle n Millisekunden dauerhaft ausgeführt wird oder bis der Timer mit clearInterval gestoppt wird.

setTimeout ist an sich kein Problem, sondern kann sogar dazu beitragen, lange Aufgaben zu vermeiden. Dies 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 eher wie setInterval verhält, vorzugsweise aber die nächste Iteration erst planen, wenn die vorherige abgeschlossen ist. Dies bedeutet, dass die Schleife bei jedem Aufruf von setTimeout in den Hauptthread übergeht. Sie sollten jedoch darauf achten, dass der Callback nicht zu viel Arbeit verursacht.

setInterval führt einen Callback in einem Intervall aus und ist daher deutlich wahrscheinlicher, als er Interaktionen beeinträchtigt. Das liegt daran, dass es – anders als bei einer einzelnen Instanz eines setTimeout-Aufrufs, der ein einmaliger Callback ist, der eine Nutzerinteraktion unter Umständen beeinträchtigen kann, aufgrund der wiederkehrenden Beschaffenheit einer Interaktion sehr viel wahrscheinlicher wird. Dadurch erhöht sich auch die Eingabeverzögerung der Interaktion.setInterval

Screenshot des Performance Profilers in den Chrome-Entwicklertools, der die Eingabeverzögerung veranschaulicht Eine durch eine Timer-Funktion ausgelöste Aufgabe erfolgt, kurz bevor der Nutzer eine Klickinteraktion einleitet. Der Timer verlängert jedoch die Eingabeverzögerung, sodass die Ereignis-Callbacks der Interaktion später ausgeführt werden als sonst. — </ph> Ein Timer, der durch einen vorherigen `setInterval`-Aufruf registriert wurde und zur Eingabeverzögerung beiträgt, wie im Leistungsbereich der Chrome-Entwicklertools dargestellt. Durch die zusätzliche Eingabeverzögerung werden die Ereignis-Callbacks für die Interaktion später ausgeführt, als sie sonst möglich wären.

Wenn Timer im eigenen Code ausgelöst werden, können Sie sie steuern. Bewerten Sie, ob Sie diese benötigen, oder tun Sie Ihr Bestes, um den Arbeitsaufwand darin so weit wie möglich zu reduzieren. Timer in Drittanbieter-Skripts sind jedoch anders. Häufig haben Sie keine Kontrolle darüber, was ein Drittanbieter-Skript tut. Um Leistungsprobleme im Code von Drittanbietern zu beheben, müssen Sie oft mit Stakeholdern zusammenarbeiten, um festzustellen, ob ein bestimmtes Drittanbieter-Skript erforderlich ist. Falls ja, nehmen Sie Kontakt mit einem Drittanbieter-Skriptanbieter auf, um herauszufinden, wie sich Leistungsprobleme beheben lassen, die diese auf Ihrer Website verursachen können.

Lange Aufgaben vermeiden

Eine Möglichkeit, lange Eingabeverzögerungen zu mindern, besteht darin, lange Aufgaben zu vermeiden. Wenn überflüssige Arbeiten am 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 erfolgt eine Interaktion kurz nach der Ausführung einer einzelnen langen Aufgabe. Dies führt zu einer erheblichen Eingabeverzögerung, durch die Ereignis-Callbacks viel später ausgeführt werden, als sie eigentlich sollten. Im unteren Bereich findet eine Interaktion ungefähr zur gleichen Zeit statt. Die lange Aufgabe wird jedoch durch Nachgeben in mehrere kleinere Aufgaben aufgeteilt, sodass die Ereignis-Callbacks der Interaktion viel früher ausgeführt werden können. — </ph> Eine Visualisierung dessen, was mit Interaktionen geschieht, wenn Aufgaben zu lang sind und der Browser nicht schnell genug auf Interaktionen reagieren kann, oder was mit längeren Aufgaben in kleinere Aufgaben aufgeteilt wird.

Neben dem Minimieren des Arbeitsaufwands für eine Aufgabe – und Sie sollten sich immer bemühen, so wenig Arbeit wie möglich im 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 Optimierung von INP 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 Aufgaben sich ü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 diese Keydown-Interaktion zu erhöhen. — </ph> Eine Visualisierung zweier gleichzeitiger Interaktionen im Performance-Profiler in den Entwicklertools von Chrome. 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 Nutzende in kurzer Zeit viele Interaktionen durchführen. Dies kann vorkommen, wenn Nutzer Text in Formularfelder eingeben, wo viele Tastaturinteraktionen innerhalb kurzer Zeit stattfinden können. Wenn die Arbeit an einem Schlüsselereignis besonders kostspielig ist, z. B. bei Feldern mit automatischer Vervollständigung, bei denen Netzwerkanfragen an ein Back-End gestellt werden, haben Sie mehrere Möglichkeiten:

Sie können Eingaben entkoppeln, 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 bei der Verarbeitung von fetch-Callbacks nicht ü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 überlappender Interaktionen können teure Animationen sein. Insbesondere können Animationen in JavaScript viele requestAnimationFrame-Aufrufe auslösen, was Nutzerinteraktionen beeinträchtigen kann. Um dies zu vermeiden, sollten Sie nach Möglichkeit CSS-Animationen verwenden, um potenziell teure Animationsframes nicht in die Warteschlange zu stellen. Dabei sollten Sie jedoch keine zusammengesetzten Animationen verwenden, damit die Animationen hauptsächlich auf den GPU- und Compositor-Threads und nicht im Hauptthread ausgeführt werden.

Fazit

Obwohl Eingabeverzögerungen möglicherweise nicht den Großteil der Ausführungsdauer Ihrer Interaktionen ausmachen, ist es wichtig zu verstehen, dass jeder Teil einer Interaktion eine Zeit in Anspruch nimmt, die Sie reduzieren können. Wenn Sie lange Eingabeverzögerungen beobachten, haben Sie Möglichkeiten, sie zu reduzieren. Wenn Sie wiederkehrende Timer-Callbacks vermeiden, lange Aufgaben aufteilen und sich mögliche Interaktionsüberschneidungen bewusst sind, können Sie Eingabeverzögerungen reduzieren, was zu einer schnelleren Interaktivität für die Nutzer Ihrer Website führt.

Hero-Image von Unsplash von Erik Mclean