Hier erfahren Sie, wie sich der neue INP-Messwert auf die Nutzerfreundlichkeit von Websites auswirkt, die mit JavaScript-Frameworks und -Bibliotheken erstellt wurden.
Chrome hat vor Kurzem einen neuen experimentellen Messwert für die Reaktionsfähigkeit im Bericht Chrome UX Report eingeführt. Dieser Messwert, den wir jetzt als Interaction to Next Paint (INP) kennen, misst die allgemeine Reaktionsfähigkeit auf Nutzerinteraktionen auf der Seite. Heute möchten wir Ihnen zeigen, wie Websites, die mit modernen JavaScript-Frameworks erstellt wurden, in Bezug auf diesen Messwert stehen. Wir möchten erläutern, warum INP für Frameworks relevant ist und wie Aurora und Frameworks daran arbeiten, die Reaktionsfähigkeit zu optimieren.
Hintergrund
Chrome verwendet First Input Delay (FID) als Teil der Core Web Vitals (CWV) zur Messung der Ladegeschwindigkeit von Websites. Mit FID wird die Wartezeit von der ersten Nutzerinteraktion bis zu dem Moment gemessen, in dem der Browser die mit der Interaktion verbundenen Event-Handler verarbeiten kann. Die Zeit für die Verarbeitung der Ereignis-Handler, die Verarbeitung nachfolgender Interaktionen auf derselben Seite oder die Darstellung des nächsten Frames nach der Ausführung der Ereignis-Callbacks ist nicht enthalten. Die Reaktionsfähigkeit ist jedoch entscheidend für die Nutzererfahrung während des gesamten Lebenszyklus der Seite, da die Nutzer nach dem Laden etwa 90% der Zeit auf einer Seite verbringen.
INP misst die Zeit, die eine Webseite benötigt, um auf Nutzerinteraktionen zu reagieren – vom Beginn der Interaktion durch den Nutzer bis zur Anzeige des nächsten Frames auf dem Bildschirm. Mit INP möchten wir eine zusammengefasste Messung der wahrgenommenen Latenz aller Interaktionen im Lebenszyklus einer Seite ermöglichen. Wir glauben, dass INP eine genauere Schätzung der Anzahl der Webseiten Lade- und Laufzeitreaktionsfähigkeit.
Da bei FID nur die Eingabeverzögerung der ersten Interaktion gemessen wird, ist es wahrscheinlich, dass Webentwickler die nachfolgenden Interaktionen im Rahmen ihres CWV-Verbesserungsprozesses nicht proaktiv optimiert haben. Für Websites, vor allem solche mit einem hohen Maß an Interaktivität, müssten also Maßnahmen ergriffen werden, um diese Kennzahl gut zu nutzen.
Die Rolle von Frameworks
Da viele Websites auf JavaScript angewiesen sind, um Interaktivität zu ermöglichen, wird der INP-Wert in erster Linie von der Menge an JavaScript beeinflusst, die im Hauptthread verarbeitet wird. JavaScript-Frameworks sind ein wesentlicher Bestandteil der modernen Frontend-Webentwicklung. Sie bieten Entwicklern wertvolle Abstraktionen für das Routing, die Ereignisverarbeitung und die Aufgliederung von JavaScript-Code. Daher spielen sie eine zentrale Rolle bei der Optimierung der Reaktionsschnelligkeit und Nutzerfreundlichkeit von Websites, auf denen sie verwendet werden.
Möglicherweise haben Frameworks bereits Maßnahmen zur Verbesserung der Reaktionsfähigkeit ergriffen, indem sie bereits FID für Websites verbessert hat. Jetzt müsste es jedoch die verfügbaren Messwertdaten für die Reaktionsfähigkeit analysieren und auf erkannte Lücken hinarbeiten. Im Allgemeinen weist INP tendenziell niedrigere Erfolgsraten auf und der Unterschied im Messprozess erfordert eine zusätzliche Codeoptimierung. In der folgenden Tabelle wird der Grund dafür zusammengefasst.
Das Aurora-Team in Chrome arbeitet mit Open-Source-Web-Frameworks, um Entwickler bei der Verbesserung verschiedener Aspekte der Nutzererfahrung zu unterstützen, darunter Leistung und CWV-Messwerte. Mit der Einführung von INP wollen wir auf die veränderten CWV-Messwerte für Framework-basierte Websites vorbereitet sein. Die Daten basieren auf dem experimentellen Messwert für die Reaktionsfähigkeit in CrUX-Berichten. Wir werden Ihnen Einblicke und Maßnahmen geben, um die Umstellung auf den INP-Messwert für Framework-basierte Websites zu erleichtern.
Daten zu experimentellen Reaktionsmetriken
Ein INP-Wert unter oder gleich 200 Millisekunden deutet auf eine gute Reaktionsfähigkeit hin. Die Daten aus dem Bericht zur Nutzererfahrung in Chrome und der CWV-Technologiebericht für Juni 2023 enthalten die folgenden Informationen zur Reaktionsfähigkeit in gängigen JavaScript-Frameworks.
Die Tabelle zeigt den Prozentsatz der Ursprünge in jedem Framework mit einem guten Sensibilitätswert. Die Zahlen sind ermutigend, sagen uns aber, dass es noch viel Raum für Verbesserungen gibt.
Wie wirkt sich JavaScript auf INP aus?
Die INP-Werte im Feld korrelieren gut mit der im Labor beobachteten Gesamtblockierungszeit (Total Blocking Time, TBT). Dies könnte bedeuten, dass jedes Script, das den Hauptthread für einen längeren Zeitraum blockiert, für INP nicht geeignet wäre. Eine umfangreiche JavaScript-Ausführung nach jeder Interaktion könnte den Haupt-Thread für einen längeren Zeitraum blockieren und die Antwort auf diese Interaktion verzögern. Hier einige der häufigsten Ursachen für das Blockieren von Skripts:
Nicht optimiertes JavaScript:Überflüssiger Code oder schlechte Codeaufteilungs- und Ladestrategien können dazu führen, dass JavaScript aufgebläht und den Hauptthread für lange Zeit blockiert wird. Codeaufteilung, progressives Laden und Aufteilen langer Aufgaben können die Antwortzeiten erheblich verkürzen.
Drittanbieter-Skripts:Drittanbieter-Skripts (z. B. Anzeigenskripts) können den Hauptthread blockieren und unnötige Verzögerungen verursachen. Sie sind manchmal nicht für die Verarbeitung einer Interaktion erforderlich. Durch die Priorisierung wichtiger Skripts können negative Auswirkungen von Drittanbieter-Skripts verringert werden.
Mehrere Event-Handler:Mehrere Event-Handler, die mit jeder Interaktion verknüpft sind und jeweils ein anderes Skript ausführen, können sich gegenseitig beeinträchtigen und zu langen Verzögerungen führen. Einige dieser Aufgaben sind möglicherweise nicht unbedingt erforderlich und können auf einem Web Worker oder bei Inaktivität des Browsers geplant werden.
Framework-Aufwand bei der Ereignisverarbeitung: Frameworks können zusätzliche Funktionen und Syntax für die Ereignisverarbeitung haben. Vue verwendet beispielsweise v-on, um Ereignis-Listener an Elemente anzuhängen, während Angular die Nutzerereignis-Handler umschließt. Für die Implementierung dieser Funktionen ist zusätzlicher Framework-Code über dem einfachen JavaScript erforderlich.
Hydration:Bei Verwendung eines JavaScript-Frameworks generiert ein Server häufig den ersten HTML-Code für eine Seite, die dann mit Event-Handlern und Anwendungsstatus erweitert werden muss, damit die Seite in einem Webbrowser interaktiv sein kann. Diesen Vorgang bezeichnen wir als Hydration. Je nachdem, wie lange das Laden von JavaScript dauert und bis die Flüssigkeitszufuhr erreicht ist, kann dies ein aufwendiger Vorgang sein. Außerdem kann dies dazu führen, dass Seiten den Anschein erwecken, als wären sie interaktiv, obwohl dies nicht der Fall ist. Häufig erfolgt eine Flüssigkeitszufuhr automatisch beim Seitenaufbau oder verzögert (z. B. bei der Nutzerinteraktion) und kann sich aufgrund der Aufgabenplanung auf INP oder die Verarbeitungszeit auswirken. In Bibliotheken wie React kannst du
useTransitionnutzen, damit ein Teil einer Komponente im nächsten Frame gerendert wird und kostspielige Nebeneffekte zukünftigen Frames überlassen werden. Daher können Aktualisierungen während einer Umstellung, die zu dringenderen Aktualisierungen wie Klicks führen, ein Muster sein, das für INP von Vorteil sein kann.Vorabruf:Ein aggressives Vorabrufen der Ressourcen, die für nachfolgende Navigationen erforderlich sind, kann bei richtiger Ausführung zu einem Leistungsgewinn führen. Wenn Sie SPA-Routen jedoch synchron vorab abrufen und rendern, kann sich das negativ auf INP auswirken, da all diese kostspieligen Renderingversuche in einem einzigen Frame abgeschlossen werden. Im Gegensatz dazu wird Ihre Route nicht vorab abgerufen, sondern Sie starten mit den erforderlichen Schritten (z. B.
fetch()) und heben die Blockierung von Farbe auf. Wir empfehlen, noch einmal zu prüfen, ob der Ansatz Ihres Frameworks für den Prefetch die optimale Nutzererfahrung bietet und wie sich dies (falls überhaupt) auf INP auswirken kann.
Ab jetzt müssen sich Entwickler darauf konzentrieren, den Code zu überprüfen, der nach jeder Interaktion auf der Seite ausgeführt wird, und ihre Aufteilungs-, Rehydration- und Ladestrategien sowie die Größe jedes render()-Updates sowohl für eigene als auch für Drittanbieter-Scripts optimieren.
Wie gehen Aurora und Frameworks INP-Probleme an?
Aurora nutzt Frameworks und Best Practices, um integrierte Lösungen für häufige Probleme zu bieten. Wir haben gemeinsam mit Next.js, Nuxt.js, Gatsby und Angular Lösungen entwickelt, die starke Standardwerte innerhalb des Frameworks zur Leistungsoptimierung bieten. Im Folgenden finden Sie die Highlights unserer Arbeit in diesem Kontext:
React und Next.js:Mit der Script-Komponente Next.js lassen sich Probleme beheben, die durch ineffizientes Laden von Drittanbieterskripts entstehen. In Next.js wurde eine detaillierte Chunking-Funktion eingeführt, um kleinere Blöcke für gemeinsam genutzten Code zu ermöglichen. Dies trägt dazu bei, die Menge von ungenutztem allgemeinen Code zu reduzieren, der auf alle Seiten heruntergeladen wird. Wir arbeiten außerdem mit Next.js zusammen, um INP-Daten im Rahmen des Analytics-Dienstes des Unternehmens verfügbar zu machen.
Angular:Aurora arbeitet mit dem Angular-Team zusammen, um das serverseitige Rendering und die Flüssigkeitszufuhr zu verbessern. Außerdem planen wir, Verbesserungen bei der Ereignisverarbeitung und Änderungserkennung zu untersuchen, um INP zu verbessern.
Vue und Nuxt.js:Wir erforschen Möglichkeiten der Zusammenarbeit, hauptsächlich im Zusammenhang mit dem Laden und Rendern von Skripts.
Wie denken die Frameworks bei der Verbesserung von INP?
React und Next.js
Das Zeit-Slicing von React.js, das über startTransition und Suspense implementiert wird, ermöglicht dir, die selektive oder progressive Flüssigkeitszufuhr zu aktivieren. Die Flüssigkeitszufuhr ist also kein synchroner Block. Das Ganze geschieht in kleinen Abschnitten, die sich jederzeit unterbrechen lassen.
Dies sollte dazu beitragen, INP zu verbessern und schneller auf Tastaturanschläge, Mouseover-Effekte während des Übergangs und Klicks zu reagieren. React-Apps bleiben auch bei großen Übergängen wie der automatischen Vervollständigung reaktionsschnell.
Next.js hat ein neues Routing-Framework implementiert, das standardmäßig startTransition für Routenübergänge verwendet. Dies ermöglicht es Websiteinhabern von Next.js, die React-Zeitaufteilung zu verwenden und die Reaktionszeit bei Routenübergängen zu verbessern.
Angular
Das Angular-Team untersucht derzeit mehrere Ideen, die auch für INP hilfreich sein sollten:
- Zonenlos:Die anfängliche Bundle-Größe und der erforderliche Code, der geladen werden muss, bevor eine App etwas rendern kann, werden reduziert.
- Flüssigkeitszufuhr:Flüssigkeitszufuhr im Inselstil, um einzuschränken, wie viel der App für Interaktionen geweckt werden muss.
- Geringerer Aufwand für CD:Reduzieren Sie beispielsweise die Kostenerkennung, um die App zu reduzieren, und nutzen Sie reaktive Signale zu Änderungen.
- Detailliertere Codeaufteilung:Verkleinern Sie das anfängliche Bundle.
- Bessere Unterstützung von Ladeanzeigen: Zum Beispiel beim erneuten SSR-Rendering, bei der Routennavigation und bei Lazy Loading.
- Profilerstellungstools:Bessere Entwicklertools zur Ermittlung der Interaktionskosten, insbesondere im Hinblick auf die Kosten für die Änderungserkennung bei bestimmten Interaktionen.
Durch diese Verbesserungen können wir verschiedene Probleme angehen, die zu einer schlechten Reaktionszeit und einer schlechten Nutzererfahrung führen, und die CWV-Messwerte sowie den neuen INP-Messwert für Framework-basierte Websites verbessern.
Fazit
Wir gehen davon aus, dass der INP-Wert für Websites einen besseren Kompass bieten wird, um die Reaktionsfähigkeit und Leistung in Zukunft zu verbessern. Auf Grundlage unseres bestehenden INP-Leitfadens geben wir 2023 weitere praktische Tipps für Framework-Entwickler. Damit möchten wir dies erreichen:
- Erstellen von Kanälen für den einfachen Zugriff auf Felddaten zu INP für Frameworks und Webentwickler
- Mit Frameworks arbeiten Sie, um Funktionen zu entwickeln, die INP standardmäßig verbessern.
Wir freuen uns über Feedback von Framework-Nutzern bei der INP-Optimierung.