Hier erfahren Sie, was Eingabeverzögerung ist und wie Sie sie reduzieren können, um die Interaktivität zu beschleunigen.
Interaktionen im Web sind kompliziert und alle Arten von Aktivitäten werden im Browser ausgeführt, um sie voranzutreiben. Alle haben jedoch gemeinsam, dass es bei ihnen zu einer gewissen Eingabeverzögerung kommt, 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 Input Delay?
Die Eingabeverzögerung ist der Zeitraum von der ersten Interaktion des Nutzers mit einer Seite bis zum Beginn der Ereignis-Callbacks für die Interaktion, z. B. Tippen auf einen Bildschirm, Klicken mit der Maus oder Drücken einer Taste. Jede Interaktion beginnt mit einer gewissen Eingabeverzögerung.
Ein Teil der Eingabeverzögerung ist unvermeidbar: Es dauert immer etwas Zeit, bis das Betriebssystem ein Eingabeereignis erkennt und an den Browser übergibt. Dieser Teil der Eingabeverzögerung ist jedoch oft nicht einmal spürbar, und es gibt andere Dinge, die auf der Seite selbst auftreten, die die Eingabeverzögerungen so lange dauern können, dass sie Probleme verursachen können.
Was ist die Eingabeverzögerung?
Grundsätzlich 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 für „gute“ Werte für den INP-Messwert (Interaction to Next Paint) zu erreichen. Die Eingabeverzögerung unter Kontrolle zu halten, ist nur ein Teil davon, diesen Grenzwert zu erreichen.
Daher sollten Sie eine möglichst kürzeste Eingabeverzögerung anstreben, um den Grenzwert für „gut“ von INP zu erreichen. Eingabeverzögerungen werden jedoch nicht vollständig ausgeschlossen. Solange Sie eine übermäßige Eingabe des Hauptthreads vermeiden, während Nutzer mit Ihrer Seite 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 ist eine solche Eingangsverzögerung vermeidbar. Hier sind einige Dinge, die Sie beachten sollten, wenn Sie Probleme mit langen Eingabeverzögerungen haben.
Vermeide wiederkehrende Timer, die übermäßige Arbeit des Hauptthreads auslösen
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
einen Callback so plant, dass er nach einer bestimmten Zeit ausgeführt wird. setInterval
hingegen plant einen Callback so, dass er alle n Millisekunden oder bis zum Beenden des Timers mit clearInterval
ausgeführt wird.
setTimeout
ist an sich kein Problem. Oft hilft es sogar dabei, lange 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überschreitungsrückruf ausgeführt wird.
Außerdem kann setTimeout
in einer Schleife oder rekursiv ausgeführt werden, wobei es sich eher wie setInterval
verhält, wobei die nächste Iteration vorzugsweise erst geplant wird, wenn die vorherige abgeschlossen ist. Das bedeutet, dass die Schleife bei jedem Aufruf von setTimeout
eine Ausgabe an den Hauptthread liefert. Du solltest aber darauf achten, dass der Callback nicht übermäßig viel Arbeit verrichtet.
setInterval
führt einen Callback in einem Intervall aus und ist daher Interaktionen viel wahrscheinlicher. Das liegt daran, dass – im Gegensatz zu einer einzelnen Instanz eines setTimeout
-Aufrufs, bei der es sich um einen einmaligen Callback handelt, der einer Nutzerinteraktion im Weg stehen kann – setInterval
aufgrund des wiederkehrenden Charakters einer Interaktion viel wahrscheinlicher stört, wodurch sich die Eingabeverzögerung der Interaktion erhöht.
Wenn Timer im eigenen Code ausgeführt werden, können Sie sie steuern. Bewerten Sie, ob Sie sie benötigen, oder tun Sie Ihr Bestes, um die Arbeit darin so weit wie möglich zu reduzieren. Bei Timern in Drittanbieter-Skripten sieht das jedoch anders aus. Häufig haben Sie keine Kontrolle darüber, was ein Drittanbieter-Script tut. Um Leistungsprobleme im Drittanbietercode zu beheben, müssen Sie häufig mit den Beteiligten herausfinden, ob ein bestimmtes Drittanbieter-Skript erforderlich ist. Wenn ja, nehmen Sie Kontakt mit einem Drittanbieter-Skriptanbieter auf, 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 zu viele Arbeiten im Hauptthread während Interaktionen blockiert werden, erhöht dies die Eingabeverzögerung, bevor die langen Aufgaben abgeschlossen werden konnten.
Sie sollten nicht nur den Arbeitsaufwand, den Sie in einer Aufgabe ausführen, auf ein Minimum beschränken und sich immer bemühen, so wenig Arbeit im Hauptthread wie möglich zu erledigen. Sie können 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. Interaktionsüberschneidung bedeutet, dass Sie nach der Interaktion mit einem Element eine weitere Interaktion mit der Seite vornehmen, bevor die erste Interaktion den nächsten Frame rendern konnte.
Die Ursachen für Interaktionsüberschneidungen können so einfach sein, dass die Nutzer viele Interaktionen innerhalb kurzer Zeit ausführen. Das kann vorkommen, wenn Nutzer etwas in Formularfelder eingeben. Dann können viele Tastaturinteraktionen innerhalb sehr kurzer Zeit erfolgen. Wenn die Arbeit an einem Schlüsselereignis besonders teuer ist, wie es beispielsweise bei automatisch vervollständigten Feldern der Fall ist, bei denen Netzwerkanfragen an ein Backend gestellt werden, haben Sie zwei Möglichkeiten:
- Sie können Eingaben entfernen, um zu begrenzen, wie oft ein Ereignisrückruf in einem bestimmten Zeitraum ausgeführt wird.
- Verwenden Sie
AbortController
, um ausgehendefetch
-Anfragen abzubrechen, damit der Hauptthread bei der Verarbeitung vonfetch
-Callbacks nicht überlastet wird. Hinweis: Die Eigenschaftsignal
einerAbortController
-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önnen. Sie können dies umgehen, indem 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 auf GPU- und Compositor-Threads und nicht auf dem Hauptthread ausgeführt werden.
Fazit
Auch wenn die Eingabeverzögerungen nicht den größten Teil der Zeit für die Ausführung von Interaktionen ausmachen, 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 diese reduzieren. Indem Sie wiederkehrende Timer-Callbacks vermeiden, lange Aufgaben aufteilen und sich über potenzielle Interaktionsüberschneidungen im Klaren sind, können Sie Eingabeverzögerungen reduzieren und so die Interaktivität für die Nutzer Ihrer Website steigern.
Hero-Image aus Unsplash von Erik Mclean