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

Brendan Kenny

Elizabeth Sweeny

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.

Hinweis:Weitere Informationen dazu, wie Sie sowohl Lab- als auch Felddaten nutzen können, finden Sie unter Warum sich Lab- und Felddaten unterscheiden können (und was Sie dagegen tun können).

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_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 werden als „Interaction to Next Paint“ angezeigt.
  • PSI API: INP verfügbar als INTERACTION_TO_NEXT_PAINT_MS
• web-vitals JS-Bibliothek
  • web-vitals unterstü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.