Interaction to Next Paint (INP) optimieren: Konkrete Maßnahmen für eine bessere Nutzererfahrung

Die ursprünglich angefragte URL

developer.chrome.com/docs/web-platform/optimize-inp

Die drei Komponenten von INP

• Eingabeverzögerung (Input Delay): Sie „beginnt, wenn der Nutzer eine Interaktion mit der Seite initiiert, und endet, wenn die Event-Callbacks für die Interaktion zu laufen beginnen.“
• Verarbeitungsdauer (Processing Duration): Sie „umfasst die Zeit, die die Event-Callbacks benötigen, um vollständig ausgeführt zu werden.“
• Darstellungsverzögerung (Presentation Delay): Die verfügbaren Quellen bestätigen diese dritte Komponente, enthalten aber keine vollständige Definition. Interaktionen bestehen aus „der Eingabeverzögerung, der Verarbeitungsdauer und der Darstellungsverzögerung.“

Konkrete Handlungsempfehlungen

• Halte jede Komponente einer Interaktion „so kurz wie möglich“, anstatt nur die Eingabeverzögerung zu optimieren.
• Bei hoher Eingabeverzögerung: Untersuche andere Arbeiten, die den Hauptthread blockieren, bevor die Callbacks der Interaktion starten können. Die Interaktion selbst „war möglicherweise nicht die direkte Ursache für einen langsamen INP.“
• Bei hoher Verarbeitungsdauer: Reduziere oder verschiebe die Arbeit, die von Event-Handlern ausgeführt wird, denn „die Event-Handler der Interaktion waren die direkte Ursache für den langsamen INP.“
• Prüfe alle Event-Listener – eigene, Framework-, Bibliotheks- und Drittanbieter-Listener: „Jeder Code, der in einem Event-Listener ausgeführt wird, verzögert die Interaktion.“
• Bei hoher Darstellungsverzögerung: Untersuche die Rendering-Arbeit des Browsers nach den Callbacks. Die genaue Empfehlung von Chrome ist im vorliegenden Ausschnitt nicht vollständig enthalten.

Hinweis: Es liegen nicht genügend Belege vor, um die vollständige Definition der Darstellungsverzögerung oder die umfassende Anleitung zu ihrer Behebung wörtlich wiederzugeben.