Siamo felici di annunciare la prima serie di strumenti che supportano la nuova metrica di adattabilità in attesa, Interaction to Next Paint (INP). Per scoprire di più sulla metrica, consulta la guida ufficiale alla metrica INP.
Misurazione suggerita
L'obiettivo della misurazione dell'INP è capire la velocità con cui la pagina risponde all'input dell'utente. L'unico modo per ottenere dati realistici è misurare la risposta della pagina per gli utenti reali che visitano il tuo sito utilizzando i dati sul campo.
La misurazione dell'INP in laboratorio aiuta a comprendere meglio i tempi degli eventi e dove è necessario apportare ottimizzazioni. Gli strumenti di laboratorio non interagiscono automaticamente con la pagina, quindi richiedono l'input manuale durante la misurazione o devono essere scritti con uno strumento di automazione come Puppeteer. Quando vengono identificate le interazioni chiave dai percorsi utente tipici, è possibile provarle per identificare i problemi o scriverle e inserirle nei test CI per evitare regressioni.
Scopri l'esperienza dei tuoi utenti reali (dati sul campo)
Visita PageSpeed Insights
PageSpeed Insights estrae i dati sul campo dall'API del Report sull'esperienza utente di Chrome (CrUX) e fornisce un'istantanea delle prestazioni della pagina e dell'origine negli ultimi 28 giorni. Questi dati ora includono l'INP:
Provalo su PageSpeed Insights.
Raccogli i tuoi valori INP sul campo
Se vuoi raccogliere autonomamente i dati INP per un sito, il modo più semplice è utilizzare la web-vitals libreria, che ora supporta completamente l'INP nella release beta.
import {onINP} from 'web-vitals';
onINP(({value}) => {
// Log the value to the console, or send it to your analytics provider.
console.log(value);
});
Scopri di più su web-vitals e su come misurare nella console DevTools.
Estensione Web Vitals di Chrome
L'estensione Web Vitals fornisce una panoramica dell'esperienza sulle pagine dei tuoi utenti (dall'API CrUX) e i valori in tempo reale dei Segnali web essenziali e delle metriche chiave della visita corrente alla pagina.
Installa l'estensione Web Vitals per Chrome.
Diagnostica i problemi di prestazioni (dati di laboratorio)
Utilizza i flussi utente di Lighthouse
La nuova modalità di periodo di tempo nel riquadro Lighthouse in DevTools ti consente di avviare Lighthouse, interagire con la pagina di test come preferisci e poi ottenere un report di ciò che è accaduto durante quel periodo. Questo report ora include l'INP e un audit per aiutarti a diagnosticare eventuali problemi di adattabilità.
La stessa serie di interazioni può essere automatizzata utilizzando i flussi utente di Lighthouse. L'INP è disponibile nei flussi utente a partire da Lighthouse 9.6.
Dettagli sulla disponibilità degli strumenti
- Report sull'esperienza utente di Chrome (CrUX)
- BigQuery: INP disponibile come
interaction_to_next_paint - API CrUX: INP disponibile come
interaction_to_next_paint - Dashboard CrUX: include i dati INP
- BigQuery: INP disponibile come
- PageSpeed Insights
- pagespeed.web.dev: dati sul campo INP a livello di pagina e di origine dall'API CrUX visualizzati come 'Interaction to Next Paint'
- API PSI: INP disponibile come
INTERACTION_TO_NEXT_PAINT_MS
web-vitalsLibreria JSweb-vitalsinclude il supporto INP
- Estensione Web Vitals di Chrome
- Include la misurazione INP locale e i dati sul campo INP quando disponibili dall'API CrUX
- Lighthouse
- Riquadro Lighthouse in DevTools: misurazione INP disponibile in modalità "periodo di tempo" in Chrome Canary (104)
- Modulo npm Lighthouse: misurazione INP disponibile negli intervalli di tempo (utilizza Puppeteer per l'input sintetico)
Lavori futuri e richiesta di feedback
In futuro, i team degli strumenti di Chrome continueranno a investire nelle funzionalità di debug e nei consigli di ottimizzazione per l'INP.
Se hai feedback su qualsiasi aspetto, dall'utilità della metrica alla facilità di misurazione, inviali al gruppo Google web-vitals-feedback.