Interaction to Next Paint - Präsentationsverzögerung (Presentation Delay)

Interaction to Next Paint (INP) Probleme verursacht durch Präsentationsverzögerung

In unserer vorherigen Artikelserie haben wir über den Interaction to Next Paint gesprochen und wie man Interaction to Next Paint Probleme identifiziert. Wenn Sie die Grundlagen nachlesen möchten, ist dies ein großartiger Ort, um zu beginnen!

In diesem Artikel werde ich mich auf 'Präsentationsverzögerung' konzentrieren. Wie dies den Interaction To Next Paint beeinflusst und dann erklären, wie man die Präsentationsverzögerung optimieren kann, um den Interaction to Next Paint zu verbessern!

Kurz gesagt: Der Interaction to Next Paint (INP) misst, wie lange es dauert, bis eine visuelle Änderung auf einer Seite zu sehen ist, nachdem ein Benutzer mit der Seite interagiert hat. Dieser INP kann in 3 Komponenten unterteilt werden: 'Input Delay', 'Processing Time' und 'Presentation Delay'. Präsentationsverzögerung ist der größte Beitrag zum gesamten INP und macht im Durchschnitt etwa 42% der Verzögerung aus.  Das bedeutet, dass die Optimierung Ihrer Präsentation und die Vereinfachung von HTML einen signifikanten Einfluss auf den INP-Score Ihrer Website haben kann.

Präsentationsverzögerung: Haben Sie jemals auf eine Schaltfläche geklickt und sich gefragt, warum es den Bruchteil einer Sekunde zu lange gedauert hat, bis das Ergebnis zu sehen war? Das ist Interaction To Next Paint (INP) in Aktion. Präsentationsverzögerung ist der letzte Schritt im Interaktionsprozess, der einsetzt, nachdem Ihr Klick verarbeitet wurde, aber bevor Sie visuelle Änderungen sehen. 

Präsentationsverzögerung verstehen

Die Präsentation ist die letzte Phase einer Interaktion, Präsentationsverzögerung stellt die Zeit dar, die der Browser benötigt, um visuelle Updates zu rendern, die auf die Interaktion folgen. Die Präsentationsverzögerung beginnt, wenn die Event-Handler für die Interaktion beendet sind, und endet, wenn der nächste Frame (mit den visuellen Änderungen) gemalt wird. Die Präsentationsverzögerung kann durch verschiedene Faktoren beeinflusst werden, einschließlich der Komplexität des Layouts, der Größe des DOM und der Menge der erforderlichen Rendering-Arbeit.

Der Interaction to Newt Paint (INP) kann in 3 Unterteile zerlegt werden: 'Input Delay', 'Processing Time' und 'Presentation Delay'

Präsentationsverzögerung und der INP

Präsentation ist die letzte Phase des INP. Im Durchschnitt macht die Präsentationsverzögerung etwa 42% der gesamten INP-Zeit aus.

Bei CoreDash sammeln wir jede Stunde Millionen von Core Web Vitals Datenpunkten. Basierend auf diesen Daten macht die Präsentationsverzögerung 42% des Interaction to Next Paint aus. 

Präsentationsverzögerung: Stellen Sie sich vor, Sie surfen auf Ihrem Telefon auf einer E-Commerce-Website nach einem neuen Paar Schuhe. Sie tippen auf ein Produktbild, um weitere Details zu sehen. Ihr Telefon ist jedoch etwas älter und hat Mühe, mitzuhalten. In dieser Situation könnten Sie eine schlechte Interaction to Next Paint (INP) Metrik erleben. Hier ist, was passiert: Sie tippen auf das Bild (Interaktion). Das Telefon benötigt etwas Zeit, um die Anfrage zu verarbeiten und das Display zu aktualisieren (Verarbeitungszeit). Die Website muss die zusätzlichen Produktinformationen abrufen und die neue Seite mit dem größeren Bild und den Details rendern (Dies kann aufgrund von Faktoren wie langsamer Internetverbindung oder einer komplexen Produktseite mit vielen Elementen langsamer sein). Schließlich dauert es eine spürbare Zeit, bis die neuen Produktdetails und das Bild auf Ihrem Bildschirm erscheinen (Präsentationsverzögerung). Diese Verzögerung im INP kann für Benutzer frustrierend sein, und deshalb ist es wichtig, sie zu beheben.

Präsentationsverzögerung reduzieren

Das Minimieren der Präsentationsverzögerung ist oft notwendig, um die Interaction to NExt Paint (INP) Metrik zu bestehen und Ihre Seite reaktionsfähig zu halten. Eine effektive Strategie ist es, die Größe des Document Object Model (DOM) zu minimieren. Ein kleineres DOM führt im Allgemeinen zu schnelleren Rendering-Zeiten, da der Browser weniger Inhalt zu verarbeiten und zu aktualisieren hat. Entwickler sollten bestrebt sein, das DOM klein und einfach zu halten, indem sie Techniken wie Lazy Loading von Off-Screen-Inhalten mit der content-visibility Eigenschaft verwenden. Zusätzlich ist es wichtig, auf die Menge der Layout-Arbeit zu achten, die durch eine Interaktion ausgelöst wird. Übermäßige Layout-Arbeit kann die Präsentationsverzögerung erheblich erhöhen, was zu einer weniger reaktionsschnellen Benutzer- erfahrung führt.

Client-Side Rendering von HTML kann auch die Präsentationsverzögerung beeinflussen, insbesondere in Single Page Applications (SPAs). Wenn HTML dynamisch auf der Client-Seite mit JavaScript erstellt wird, kann dies zu langen Aufgaben führen, die den Hauptthread blockieren, was möglicherweise die Präsentation des nächsten Frames verzögert. Entwickler sollten die Auswirkungen auf die Leistung von Client-Side Rendering sorgfältig abwägen und bestrebt sein, die Menge des dynamisch generierten HTML zu minimieren.

Lange Präsentationsverzögerungen identifizieren

Um lange Präsentationsverzögerungen zu identifizieren, können Sie den Chrome Performance Profiler verwenden. Öffnen Sie die DevTools (Strg-Umschalt-I), navigieren Sie zum Performance-Tab, drücken Sie auf Aufnahme und interagieren Sie mit der Seite.,

Sie können jetzt die Zeitleiste einer Interaktion analysieren und die verschiedenen Phasen visualisieren, einschließlich der Präsentationsverzögerung. Durch die Untersuchung der Rendering-Updates, die auftreten, nachdem die Event-Handler abgeschlossen sind, können Sie alle Engpässe identifizieren, die zu einer langen Präsentations- verzögerung beitragen. 

Präsentationsverzögerung mit RUM-Daten identifizieren

Mehr Einblicke in Ursachen für Präsentationsverzögerung mit Long Animation Frames

Die Long Animation Frames (LoAF) API bietet detaillierte Einblicke in die Ursachen von Rendering-Verzögerungen, einschließlich solcher, die während Benutzer- interaktionen auftreten. Diese API zeigt Timings und andere Daten an, die Entwicklern helfen können, spezifische Ursachen für langsame Interaktionen zu lokalisieren und ihren Code entsprechend zu optimieren. RUM-Tools wie CoreDash bieten Unterstützung für LoAF und bieten zusätzliche Einblicke in lange Animationsframes, wie Script Attribution Data. Diese Tools können Entwicklern helfen zu verstehen, welche Skripte zu Rendering-Verzögerungen beitragen, und ihre Codebase für eine bessere Reaktionsfähigkeit zu optimieren.