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 diese getestet werden, um Probleme zu erkennen oder zu skripten, und in CI-Tests einbezogen 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 jetzt in der Betaversion 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 „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-Aufrufabfolgen verwenden
Mit dem neuen Zeitspanne-Modus im Lighthouse-Steuerfeld in den DevTools können Sie Lighthouse starten, nach Belieben mit Ihrer Testseite interagieren und dann einen Bericht zu den Ereignissen in dieser Zeit abrufen. Dieser Bericht enthält jetzt INP und eine Prüfung, um Probleme mit der Reaktionsfähigkeit zu diagnostizieren.
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 (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 als
INTERACTION_TO_NEXT_PAINT_MSverfügbar
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
- Lighthouse
- Lighthouse-Bereich in den DevTools: INP-Messung im Modus „Zeitraum“ in Chrome Canary (104) verfügbar
- Lighthouse-NPM-Modul: INP-Messung in Zeiträumen verfügbar (verwenden Sie Puppeteer für synthetische Eingaben)
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.