We zijn blij dat we de eerste ronde van toolondersteuning hebben voor de nieuwe responsiviteitsstatistiek in behandeling, Interaction to Next Paint (INP). Check de officiële gids voor de INP-statistiek voor meer informatie over de statistiek zelf.
Voorgestelde meting
Het doel van het meten van INP is om inzicht te krijgen in hoe snel je pagina reageert op gebruikersinvoer. De enige manier om realistische gegevens te krijgen, is door te meten hoe je pagina reageert voor echte gebruikers die je site bezoeken met gegevens uit het veld.
Als je INP in het lab meet, krijg je meer inzicht in de timing van gebeurtenissen en waar optimalisaties nodig zijn. Labtools werken niet automatisch met de pagina. Daarom hebben ze handmatige invoer nodig terwijl ze meten of moeten ze worden gescript met een automatiseringstool zoals Puppeteer. Als belangrijke interacties worden vastgesteld op basis van typische gebruikerspaden, kunnen ze worden uitgeprobeerd om problemen op te sporen of te worden gescript en in CI-tests worden geplaatst om regressies te voorkomen.
Ontdek wat je echte gebruikers ervaren (veldgegevens)
Naar PageSpeed Insights
PageSpeed Insights haalt veldgegevens op uit de Chrome User Experience (CrUX) Report API en geeft een momentopname van de prestaties van je pagina en oorsprong in de afgelopen 28 dagen. Deze gegevens bevatten nu INP:
Probeer het uit in PageSpeed Insights.
Je eigen INP-waarden verzamelen uit het veld
Als je zelf INP-gegevens voor een site wilt verzamelen, is de makkelijkste manier om dit te doen de web-vitals-bibliotheek. Deze heeft nu volledige INP-ondersteuning in de bètaversie.
import {onINP} from 'web-vitals';
onINP(({value}) => {
// Log the value to the console, or send it to your analytics provider.
console.log(value);
});
Meer informatie overweb-vitals en hoe je metingen uitvoert in de DevTools-console.
Chrome-extensie Web Vitals
De Web Vitals-extensie biedt zowel een overzicht van de paginafunctionaliteit van je gebruikers (via de CrUX API) als de realtime waarden van CWV en belangrijke statistieken van het huidige bezoek aan de pagina.
Installeer de Web Vitals-extensie voor Chrome.
Performanceproblemen diagnosticeren (labgegevens)
Lighthouse-gebruikersstromen gebruiken
Met de nieuwe modus voor tijdsperioden in het Lighthouse-deelvenster in DevTools kun je Lighthouse starten, op de gewenste manier met je testpagina werken en daarna een rapport krijgen van wat er in die periode is gebeurd. Dit rapport bevat nu INP en een controle om eventuele responsiviteitsproblemen te diagnosticeren.
Dezelfde reeks interacties kan worden geautomatiseerd met Lighthouse-gebruikersstromen. INP is beschikbaar in gebruikersstromen vanaf Lighthouse 9.6.
Details over de beschikbaarheid van tools
- Chrome User Experience Report (CrUX)
- BigQuery: INP beschikbaar als
interaction_to_next_paint - CrUX API: INP beschikbaar als
interaction_to_next_paint - _CrUX-dashboard_: bevat INP-gegevens
- BigQuery: INP beschikbaar als
- PageSpeed Insights
- pagespeed.web.dev: INP-veldgegevens op paginaniveau en oorsprongniveau van de CrUX API worden getoond als 'Interaction to Next Paint'
- PSI API: INP beschikbaar als
INTERACTION_TO_NEXT_PAINT_MS
web-vitalsJS-bibliotheekweb-vitalsbevat INP-ondersteuning
- Chrome-extensie Web Vitals
- Bevat lokale INP-meting en INP-veldgegevens als deze beschikbaar zijn via de CrUX API
- Lighthouse
- Lighthouse-deelvenster in DevTools: INP-meting beschikbaar in de modus Tijdsperiode in Chrome Canary (104)
- Lighthouse npm-module: INP-meting beschikbaar in tijdsperioden (gebruik Puppeteer voor synthetische invoer)
Toekomstige werkzaamheden en verzoek om feedback
De teams van Chrome-tools blijven investeren in foutopsporingsmogelijkheden en optimalisatieaanbevelingen voor INP.
Als je feedback hebt over iets, van het nut van de statistiek tot het gebruiksgemak van de meting, kun je dit doorgeven aan de Google-groep web-vitals-feedback.