Wir freuen uns, dass die ersten Tools für den neuen anstehenden Messwert für die Reaktionsfähigkeit, Interaction to Next Paint (INP), verfügbar sind. Weitere Informationen zum Messwert selbst finden Sie im offiziellen Leitfaden zu INP-Messwerten.
Empfohlene Analyse
Mit dem Messwert „Interaction to Next Paint“ lässt sich ermitteln, wie schnell Ihre Seite auf Nutzereingaben reagiert. Die einzige Möglichkeit, realistische Daten zu erhalten, besteht darin, mithilfe von Daten aus der Praxis zu messen, wie Ihre Seite auf echte Nutzer reagiert, die Ihre Website besuchen.
Wenn Sie die INP im Lab messen, können Sie die Ereigniszeiträume besser nachvollziehen und erkennen, wo Optimierungen erforderlich sind. Lab-Tools interagieren nicht automatisch mit der Seite. Sie erfordern daher entweder manuelle Eingaben während der Messung oder sie müssen mit einem Automatisierungstool wie Puppeteer gescriptet werden. Wenn aus typischen User Journeys wichtige Interaktionen identifiziert werden, können sie ausprobiert werden, um Probleme zu erkennen oder zu skripten, und in CI-Tests eingefügt werden, um Regressionen zu verhindern.
So sieht die Leistung auf der Nutzerseite aus (Felddaten)
PageSpeed Insights aufrufen
PageSpeed Insights ruft Felddaten aus der Chrome User Experience Report API ab und bietet einen Snapshot der Leistung Ihrer Seite und des Ursprungs in den letzten 28 Tagen. Diese Daten umfassen jetzt INP:
Testen Sie es unter PageSpeed Insights.
Eigene INP-Werte aus dem Feld erfassen
Wenn Sie INP-Daten für eine Website selbst erfassen möchten, ist die web-vitals-Bibliothek die einfachste Möglichkeit. Sie unterstützt in der Betaversion jetzt die vollständige INP-Funktion.
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 DevTools-Konsole
Chrome-Erweiterung für Web Vitals
Die Web Vitals-Erweiterung bietet sowohl einen Überblick über die Nutzerfreundlichkeit Ihrer Seiten (über die CrUX API) als auch die Echtzeitwerte der CWV und wichtige Messwerte des aktuellen Seitenbesuchs.
Installieren Sie die Web Vitals-Erweiterung für Chrome.
Leistungsprobleme diagnostizieren (Lab-Daten)
Lighthouse-Nutzerabläufe verwenden
Mit dem neuen Zeitraummodus im Lighthouse-Steuerfeld in den Entwicklertools können Sie Lighthouse starten, beliebig mit Ihrer Testseite interagieren und dann einen Bericht darüber abrufen, was in dieser Zeit passiert ist. Dieser Bericht enthält jetzt INP und eine Prüfung zur Diagnose der Reaktionsfähigkeit.
Mithilfe von Lighthouse-Nutzerflüssen können dieselben Interaktionen automatisiert werden. INP ist seit Lighthouse 9.6 in Aufrufabfolgen verfügbar.
Details zur Verfügbarkeit von Tools
- Bericht zur Nutzererfahrung in Chrome (Chrome User Experience, CrUX)
- BigQuery: INP als
interaction_to_next_paintverfügbar - CrUX API: INP als
interaction_to_next_paintverfügbar - CrUX-Dashboard: Enthält INP-Daten
- BigQuery: INP als
- PageSpeed Insights
- pagespeed.web.dev: INP-Felddaten auf Seiten- und Ursprungsebene aus der CrUX API werden als „Interaction to Next Paint“ angezeigt.
- PSI API: INP verfügbar als
INTERACTION_TO_NEXT_PAINT_MS
web-vitalsJS-Bibliothekweb-vitalsunterstützt INP
- Chrome-Erweiterung für Web Vitals
- Enthält lokale INP-Messungen und INP-Felddaten, sofern diese in der CrUX API verfügbar sind
- Leuchtturm
- Lighthouse-Steuerfeld in den DevTools: INP-Messung im Modus „Zeitraum“ in Chrome Canary (104) verfügbar
- Lighthouse-npm-Modul: INP-Messung in Zeiträumen verfügbar (puppeteer für synthetische Eingabe verwenden)
Zukünftige Arbeit und Feedbackanfrage
Die Chrome-Tool-Teams werden auch in Zukunft in Funktionen zur Fehlerbehebung und Optimierungsempfehlungen für INP investieren.
Wenn Sie Feedback zur Nützlichkeit oder zur einfachen Messung des Messwerts haben, teilen Sie uns dies bitte in der Google-Gruppe „web-vitals-feedback“ mit.