Unterstützung für das Tool „Interaction to Next Paint“ (INP)

Brendan Kenny

Elizabeth Sweeny

Wir freuen uns, die erste Runde der Toolunterstützung für den neuen ausstehenden Messwert für die Reaktionsschnelligkeit, Interaction to Next Paint (INP), anbieten zu können. Weitere Informationen zum Messwert selbst finden Sie in dem offiziellen Leitfaden zum INP-Messwert.

Vorgeschlagene Messung

Ziel der Messung von INP ist es, zu verstehen, wie schnell Ihre Seite auf Nutzereingaben reagiert. Realistische Daten erhalten Sie nur, wenn Sie anhand von Felddaten messen, wie Ihre Seite für echte Nutzer reagiert, die Ihre Website besuchen.

Die Messung von INP im Labor hilft dann, die Zeitpunkte von Ereignissen besser zu verstehen und zu erkennen, wo Optimierungen erforderlich sind. Labortools interagieren nicht automatisch mit der Seite. Daher sind entweder manuelle Eingaben während der Messung erforderlich oder sie müssen mit einem Automatisierungstool wie Puppeteer geskriptet werden. Wenn wichtige Interaktionen aus typischen User Journeys identifiziert werden, können sie getestet werden, um Probleme zu erkennen, oder geskriptet und in CI-Tests aufgenommen werden, um Regressionen zu verhindern.

Erfahren Sie, was Ihre echten Nutzer erleben (Felddaten)

PageSpeed Insights

PageSpeed Insights ruft Felddaten aus der Chrome User Experience (CrUX) Report API ab und bietet eine Momentaufnahme der Leistung Ihrer Seite und Ihres Ursprungs in den letzten 28 Tagen. Diese Daten enthalten jetzt INP:

Testen Sie es unter PageSpeed Insights.

Eigene INP-Werte aus der Praxis erheben

Wenn Sie INP-Daten für eine Website selbst erheben möchten, ist die web-vitals-Bibliothek die einfachste Möglichkeit. Sie bietet jetzt in der Betaversion vollständige INP-Unterstützung.

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 Erweiterung „Web Vitals“ bietet sowohl eine Übersicht über die Nutzerfreundlichkeit von Seiten Ihrer Nutzer (aus der CrUX API) als auch die Echtzeitwerte von CWV und wichtigen Messwerten des aktuellen Besuchs auf der Seite.

Erweiterung „Web Vitals“ für Chrome installieren

Leistungsprobleme diagnostizieren (Labordaten)

Lighthouse-User-Flows verwenden

Mit dem neuen Zeitraumanalyse-Modus im Lighthouse-Bereich in den Entwicklertools können Sie Lighthouse starten, mit Ihrer Testseite interagieren und dann einen Bericht über die Ereignisse in diesem Zeitraum erhalten. Dieser Bericht enthält jetzt INP und eine Prüfung, mit der Sie Probleme mit der Reaktionsschnelligkeit diagnostizieren können.

Dieselbe Reihe von Interaktionen kann mit Lighthouse-User-Flows automatisiert werden. INP ist in Nutzerpfaden ab Lighthouse 9.6 verfügbar.

Details zur Toolverfügbarkeit

• UX-Bericht für Chrome (CrUX)
  • BigQuery: INP als interaction_to_next_paint verfügbar
  • CrUX API: INP als interaction_to_next_paint verfügbar
  • CrUX-Dashboard: Enthält INP-Daten
• PageSpeed Insights
  • pagespeed.web.dev: INP-Felddaten auf Seiten- und Ursprungsebene aus der CrUX API als „Interaction to Next Paint“
  • PSI API: INP als INTERACTION_TO_NEXT_PAINT_MS verfügbar
• web-vitals JS-Bibliothek
  • web-vitals bietet INP-Unterstützung
• Chrome-Erweiterung „Web Vitals“
  • Enthält lokale INP-Messungen und INP-Felddaten, sofern sie über die CrUX API verfügbar sind
• Lighthouse
  • Lighthouse-Bereich in den Entwicklertools: INP-Messung im Modus „Zeitraumanalyse“ in Chrome Canary (104) verfügbar
  • _Lighthouse npm-Modul_: INP-Messung in Zeiträumen verfügbar (Puppeteer für synthetische Eingaben verwenden)

Zukünftige Arbeiten und Feedbackanfrage

Die Chrome-Toolteams werden weiterhin in Debugging-Funktionen und Optimierungsempfehlungen für INP investieren.

Wenn Sie Feedback zur Nützlichkeit des Messwerts oder zur Messung haben, teilen Sie es uns bitte in der Google-Gruppe web-vitals-feedback mit.