Interaktion bis zum nächsten Bild: Optimierung der Benutzererfahrung durch schnelle Reaktionszeiten auf Webseiten

In der digitalen Welt von heute ist die Nutzererfahrung (User Experience, UX) entscheidend für den Erfolg einer Website. Eine Komponente, die zunehmend an Bedeutung gewinnt, ist die Reaktionsfähigkeit einer Website auf Benutzerinteraktionen, bekannt als Interaction to Next Paint (INP). Diese Metrik ist Teil der Core Web Vitals-Initiative von Google und zielt darauf ab, Entwicklern und Website-Betreibern ein besseres Verständnis der Leistung ihrer Seiten zu vermitteln. Im Folgenden wird ein umfassender Leitfaden vorgestellt, wie Sie INP messen, identifizieren und verbessern können. INP misst, wie schnell eine Website auf Benutzeraktionen reagiert, zum Beispiel auf einen Klick auf einen Button. Konkret misst INP die Zeit in Millisekunden zwischen der Benutzereingabe und dem Zeitpunkt, an dem der Browser die Verarbeitung der Interaktion abgeschlossen hat und bereit ist, visuelle Aktualisierungen auf der Seite anzuzeigen. Um ein "Gutes" INP-Ergebnis zu erzielen, muss dieser Prozess in weniger als 200 Millisekunden abgeschlossen sein. Werte über eine halbe Sekunde werden als "Schlecht" eingestuft. Ein schlechtes Ergebnis bei den Core Web Vitals kann sich negativ auf das Ranking Ihrer Website in Suchmaschinen auswirken. Google sammelt INP-Daten von echten Besuchern Ihrer Website im Rahmen des Chrome User Experience Reports (CrUX). Diese CrUX-Daten sind es letztendlich, die das Ranking beeinflussen. Um langsame INP-Zeiten zu identifizieren und zu beheben, können unterschiedliche Seiten Ihrer Website verschiedene Core Web Vitals-Scores aufweisen. Daher müssen Sie eine langsame Seite identifizieren und dann untersuchen, was sie langsam macht. Die Verwendung des Core Web Vitals-Bereichs in der Google Search Console ist eine einfache Möglichkeit, Ihre INP-Werte zu überprüfen. Diese Daten basieren auf den bereits diskutierten CrUX-Daten von Google. Achten Sie darauf, dass nicht alle Seiten das Problem haben müssen, das Google meldet. Stattdessen sollten Sie auf jede URL-Gruppe klicken, um zu sehen, ob URL-spezifische Daten für einige Seiten verfügbar sind, und sich dann auf diese konzentrieren. Ein Real-User Monitoring (RUM)-Dienst, wie DebugBear, kann ebenfalls verwendet werden, da Google nicht für jede Seite auf Ihrer Website Core Web Vitals-Daten meldet und nur die Rohdaten ohne Details zur Verfügung stellt, die Ihnen helfen, die Probleme zu verstehen und zu beheben. RUM arbeitet, indem ein Analyse-Snippet auf Ihrer Website installiert wird, das misst, wie schnell Ihre Website für Ihre Besucher ist. Nach der Einrichtung haben Sie Zugriff auf ein Interaction to Next Paint-Dashboard, auf dem Sie Seiten identifizieren können, die Sie optimieren möchten. Die Ursachen für schlechte INP können oft komplex und schwer zu ermitteln sein. Verschiedene Besucher auf derselben Seite haben unterschiedliche Erfahrungen, abhängig davon, wie sie mit der Seite interagieren. RUM-Daten bieten eine Aufschlüsselung darüber, mit welchen Seitenelementen Benutzer interagiert haben und wie groß die Verzögerungen bei der Interaktion waren. INP-Verzögerungen können in drei verschiedene Komponenten unterteilt werden: Input Delay, Processing Time und Presentation Delay. Sie sollten sich darauf konzentrieren, welche INP-Komponente am meisten zu den langsamen INP-Zeiten beiträgt, und dies während Ihrer Untersuchung im Hinterkopf behalten. Manchmal melden Browser spezifische Skripte, die zu einer langsamen Interaktion beitragen. Ihre Website enthält wahrscheinlich sowohl First-Party- als auch Third-Party-Skripte, die beide zu langsamen INP-Zeiten beitragen können. Ein RUM-Tool wie DebugBear kann diese Daten sammeln und anzeigen. Das Hauptaugenmerk sollte darauf liegen, ob Sie hauptsächlich Ihren eigenen Website-Code oder Code von Drittanbietern sehen. Zu diesem Zeitpunkt haben Sie wahrscheinlich einen starken Verdacht, dass die meisten INP-Verzögerungen, zumindest auf den Seiten und Elementen, die Sie betrachten, aufgrund von Skripten von Drittanbietern auftreten. Aber wie können Sie feststellen, ob es sich um allgemeine Tracking-Skripte handelt oder ob sie tatsächlich eine Rolle bei der Verarbeitung der Interaktion spielen? DebugBear bietet eine Aufschlüsselung, die zeigt, warum der Code ausgeführt wird - die sogenannte INP Primary Script Invoker-Aufschlüsselung. Mehrere verschiedene Skripte können an einer Verlangsamung der Interaktion beteiligt sein, und hier sehen Sie nur den größten Beitragenden. Der "Invoker" ist lediglich ein Wert, den der Browser über die Ursache der Codeausführung meldet. Eine Menge der Daten, die Sie bisher gesehen haben, sind aggregiert. Es ist nun an der Zeit, sich die einzelnen INP-Ereignisse anzusehen, um eine endgültige Schlussfolgerung darüber zu treffen, was in diesem Beispiel zu langsamen INP führt. RUM-Tools wie DebugBear bieten in der Regel die Möglichkeit, bestimmte Benutzererfahrungen zu überprüfen. Sie können beispielsweise sehen, welchen Browser sie verwendet haben, wie groß ihr Bildschirm war und welches Element zur langsamsten Interaktion geführt hat. Wie bereits erwähnt, können mehrere Skripte zu insgesamt langsamen INP beitragen. Der INP Scripts-Abschnitt zeigt Ihnen die Skripte, die während der INP-Interaktion ausgeführt wurden. Jedes dieser Skripte können Sie genauer überprüfen, um zu verstehen, warum sie ausgeführt werden und was dazu führt, dass sie länger brauchen, um abgeschlossen zu werden. RUM-Tools haben Zugriff auf viele Daten, aber aus Leistungs- und Sicherheitsgründen können sie bei weitem nicht alle verfügbaren Daten abrufen. Daher ist es eine gute Idee, auch die Chrome DevTools zu verwenden, um die Leistung Ihrer Seite zu messen. Um INP in den DevTools zu debuggen, können Sie messen, wie der Browser eine der langsamen Interaktionen verarbeitet, die Sie zuvor identifiziert haben. DevTools zeigen Ihnen dann genau, wie der Browser seine Zeit verbringt, um die Interaktion zu verarbeiten. In diesem Beispiel könnte Ihr Entwicklerteam dieses Problem lösen, indem es mit dem Anbieter des Drittanbieter-Skripts zusammenarbeitet, um deren Skript zu optimieren. Sie könnten das Skript entfernen, wenn es nicht wesentlich für die Website ist, oder einen alternativen Anbieter finden. Sie könnten auch anpassen, wie Ihr eigener Code mit dem Skript interagiert. In der vorherigen Diskussion wurde die meiste INP-Zeit für das Ausführen von Code in Reaktion auf die Interaktion aufgewendet. Oft ist der Browser jedoch bereits mit der Ausführung anderer Codes beschäftigt, wenn eine Benutzerinteraktion stattfindet. Wenn Sie die INP-Komponenten untersuchen, werden Sie dann einen hohen Input Delay-Wert sehen. Dies kann aus verschiedenen Gründen geschehen, zum Beispiel: - Der Benutzer hat mit der Website interagiert, während sie noch geladen wurde. - Eine geplante Aufgabe wird auf der Seite ausgeführt, zum Beispiel eine laufende Animation. - Die Seite lädt und rendert neue Inhalte. Um die INP-Leistung zu verbessern, sollten Sie folgende Schritte in Betracht ziehen: - Optimieren Sie, wie JavaScript funktioniert, minimieren Sie unnötige Aufgaben und priorisieren Sie wichtige Aktionen. - Verwenden Sie Funktionen wie `requestIdleCallback`, um sicherzustellen, dass Benutzerinteraktionen schnelle und reibungslose Antworten für ein angenehmes Surferlebnis erhalten. - Vermeiden Sie große, komplexe Layouts und Layout-Thrashing. - Reduzieren Sie den Umfang und die Komplexität von Stilberechnungen. - Verwenden Sie Web Workers, um JavaScript außerhalb des Hauptthreads des Browsers auszuführen. - Stellen Sie sicher, dass Ihr DOM nur die notwendigen Elemente enthält und nicht zu groß ist. - Berücksichtigen Sie die Vor- und Nachteile von serverseitigem vs. clientseitigem Rendering in Bezug auf Interaktivität. Das Verständnis und die Optimierung der INP-Leistung sind komplexe Aufgaben, die jedoch zu einer besseren Benutzererfahrung führen können. Mit den richtigen Werkzeugen und Techniken können Entwickler und Website-Betreiber sicherstellen, dass ihre Seiten schnell und reaktionsfähig bleiben, was letztendlich zu einem höheren Engagement und besseren SEO-Ergebnissen führen kann.