We zijn erg blij met de eerste ronde van toolingondersteuning voor de nieuwe, in behandeling zijnde responsiviteitsmetriek , Interaction to Next Paint (INP). Raadpleeg de officiële INP-statistiekgids voor meer informatie over de statistiek zelf.
Voorgestelde meting
Het doel van het meten van INP is om te begrijpen hoe snel uw pagina reageert op gebruikersinvoer. De enige manier om realistische gegevens te verkrijgen is door met behulp van gegevens uit het veld te meten hoe uw pagina reageert op echte gebruikers die uw site bezoeken.
Het meten van INP in het laboratorium helpt vervolgens om de timing van gebeurtenissen beter te begrijpen en waar optimalisaties moeten plaatsvinden. Lab-tools hebben niet automatisch interactie met de pagina, dus hebben ze handmatige invoer nodig terwijl ze meten, of moeten ze worden gescript met een automatiseringstool zoals Puppeteer. Wanneer belangrijke interacties uit typische gebruikerstrajecten worden geïdentificeerd, kunnen deze worden uitgeprobeerd om problemen te identificeren of kunnen scripts worden opgesteld en in CI-tests worden geplaatst om regressies te voorkomen.
Ontdek wat uw echte gebruikers ervaren (veldgegevens)
Bezoek PageSpeed Insights
PageSpeed Insights haalt veldgegevens uit de Chrome User Experience (CrUX) Report API en geeft een momentopname van uw pagina en de prestaties van uw pagina in de afgelopen 28 dagen. Deze gegevens bevatten nu INP:
Probeer het eens bij PageSpeed Insights .
Verzamel uw eigen INP-waarden uit het veld
Als u zelf INP-gegevens voor een site wilt verzamelen, is de web-vitals -bibliotheek de eenvoudigste manier, die nu volledige INP-ondersteuning heeft 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);
});
Lees meer over web-vitals en hoe u kunt meten in de DevTools-console .
Web Vitals Chrome-extensie
De Web Vitals-extensie geeft zowel een overzicht van de pagina-ervaring van uw gebruikers (vanuit 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 .
Prestatieproblemen diagnosticeren (labgegevens)
Gebruik Lighthouse-gebruikersstromen
Met de nieuwe tijdspannemodus in het Lighthouse-paneel in DevTools kunt u Lighthouse starten, met uw testpagina communiceren zoals u dat wilt, en vervolgens een rapport krijgen van wat er gedurende die tijd is gebeurd. Dit rapport bevat nu INP en een audit om eventuele problemen met het reactievermogen te helpen diagnosticeren.
Dezelfde reeks interacties kan worden geautomatiseerd door gebruik te maken van Lighthouse-gebruikersstromen . INP is beschikbaar in gebruikersstromen vanaf Lighthouse 9.6.
Informatie over beschikbaarheid van gereedschap
- Chrome-gebruikerservaringrapport (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-inzichten
- pagespeed.web.dev : INP-veldgegevens op paginaniveau en oorsprongsniveau van de CrUX API verschenen als 'Interaction to Next Paint'
- PSI API : INP beschikbaar als
INTERACTION_TO_NEXT_PAINT_MS
-
web-vitalsJS-bibliotheek-
web-vitalsbevat INP-ondersteuning
-
- Web Vitals Chrome-extensie
- Omvat lokale INP-metingen en INP-veldgegevens indien beschikbaar via de CrUX API
- Vuurtoren
- Lighthouse-paneel in DevTools : INP-meting beschikbaar in 'timespan'-modus in Chrome Canary (104)
- Lighthouse npm-module : INP-meting beschikbaar in tijdspannes (gebruik poppenspeler voor synthetische invoer)
Toekomstig werk en verzoek om feedback
In de toekomst zullen Chrome-toolingteams blijven investeren in foutopsporingsmogelijkheden en optimalisatie-aanbevelingen voor INP.
Als u feedback heeft over iets, van het nut van de statistiek tot het meetgemak, kunt u dit naar de web-vitals-feedback Google-groep brengen.