Wir freuen uns sehr, dass in der ersten Runde Tools für den neuen ausstehenden Messwert für die Reaktionsfähigkeit, Interaction to Next Paint (INP) unterstützt werden. Weitere Informationen zum Messwert selbst finden Sie im offiziellen INP-Messwert.
Empfohlene Messung
Das Ziel der Messung des INP besteht darin, zu verstehen, wie schnell Ihre Seite auf Nutzereingaben reagiert. Die einzige Möglichkeit, realistische Daten zu erhalten, besteht darin, zu messen, wie Ihre Seite auf echte Besucher Ihrer Website reagiert. Dazu verwenden Sie Daten aus der Praxis.
Die Messung des INP im Lab hilft dabei, den zeitlichen Ablauf von Ereignissen besser zu verstehen und herauszufinden, wo Optimierungen erforderlich sind. Lab-Tools interagieren nicht automatisch mit der Seite. Daher müssen während der Messung entweder manuelle Eingaben vorgenommen oder Skripts mit einem Automatisierungstool wie Puppeteer erstellt werden. Wenn wichtige Interaktionen anhand typischer User Journeys identifiziert werden, können sie ausprobiert werden, um Probleme zu identifizieren, oder Skripte erstellen und CI-Tests durchführen, um Regressionen zu verhindern.
Herausfinden, was Ihre Nutzenden erleben (Felddaten)
PageSpeed Insights aufrufen
PageSpeed Insights ruft Felddaten aus der Chrome User Experience (CrUX) Report API ab und liefert einen Überblick über die Leistung Ihrer Seite und des Ursprungs in den letzten 28 Tagen. Diese Daten enthalten jetzt INP:
Probieren Sie es unter PageSpeed Insights aus.
Eigene INP-Werte aus dem Feld erfassen
Wenn Sie INP-Daten für eine Website selbst erfassen möchten, ist dies die einfachste Möglichkeit, die web-vitals-Bibliothek zu nutzen, die jetzt in der Betaversion vollständige INP-Unterstützung bietet.
import {onINP} from 'web-vitals';
onINP(({value}) => {
// Log the value to the console, or send it to your analytics provider.
console.log(value);
});
Weitere Informationen zu web-vitals und zur Messung in der Entwicklertools-Konsole
Chrome-Erweiterung „Web Vitals“
Die Web Vitals-Erweiterung bietet sowohl einen Überblick über die Nutzerfreundlichkeit von Seiten (über die CrUX API) als auch die Echtzeitwerte des CWV und wichtige Messwerte des aktuellen Besuchs auf der Seite.
Installieren Sie die Web Vitals-Erweiterung für Chrome.
Leistungsprobleme diagnostizieren (Labdaten)
Lighthouse-Nutzerabläufe verwenden
Mit dem neuen Zeitspannenmodus im Lighthouse-Steuerfeld in den Entwicklertools können Sie Lighthouse starten, mit Ihrer Testseite beliebig interagieren und dann einen Bericht dazu erhalten, was während dieser Zeit passiert ist. Dieser Bericht enthält jetzt INP und ein Audit zur Diagnose von Reaktionsproblemen.
Mithilfe von Lighthouse-Nutzerabläufen lässt sich die gleiche Reihe von Interaktionen automatisieren. INP ist ab Lighthouse 9.6 in Nutzerflüssen verfügbar.
Details zur Verfügbarkeit des Tools
- Bericht zur Nutzererfahrung in Chrome (CrUX)
- BigQuery INP verfügbar als
interaction_to_next_paint - CrUX API: INP verfügbar als
interaction_to_next_paint - CrUX-Dashboard: Enthält INP-Daten
- BigQuery INP verfügbar als
- PageSpeed Insights
- pagespeed.web.dev: INP-Felddaten auf Seiten- und Ursprungsebene aus der CrUX API, die als "Interaction to Next Paint" angezeigt werden
- PSI API: INP verfügbar als
INTERACTION_TO_NEXT_PAINT_MS
web-vitals-JS-Bibliothekweb-vitalsmit INP-Unterstützung
- Web Vitals-Chrome-Erweiterung
- Umfasst lokale INP-Messungen und INP-Felddaten, sofern über die CrUX API verfügbar
- Lighthouse
- Lighthouse-Bereich in den Entwicklertools: Die INP-Messung ist in Chrome Canary im Modus „Zeitspanne“ verfügbar (104)
- Lighthouse-npm-Modul: INP-Messung in Zeiträumen verfügbar (verwenden Sie Puppeteer für synthetische Eingabe)
Zukünftige Arbeiten und Bitte um Feedback
In Zukunft werden die Chrome-Tooling-Teams weiterhin in Debugging-Funktionen und Optimierungsempfehlungen für INP investieren.
Wenn du Feedback zur Nützlichkeit des Messwerts oder zur einfachen Messung hast, leite es bitte an die Google-Gruppe „web-vitals-feedback“ weiter.