Siamo entusiasti di avere la prima fase di supporto degli strumenti per la nuova metrica di reattività in attesa, Interaction to Next Paint (INP). Per informazioni sulla metrica stessa, consulta la guida ufficiale alle metriche INP.
Misurazione suggerita
L'obiettivo di misurare l'INP è comprendere la velocità con cui la tua pagina risponde all'input utente. L'unico modo per ottenere dati realistici è misurare il modo in cui la pagina risponde per gli utenti reali che visitano il sito utilizzando i dati sul campo.
Misurare l'INP in laboratorio aiuta quindi a capire meglio la tempistica degli eventi e dove devono essere eseguite le ottimizzazioni. Gli strumenti dei lab non interagiscono automaticamente con la pagina, pertanto necessitano di un input manuale durante la misurazione oppure devono essere creati mediante script con uno strumento di automazione come Puppeteer. Quando le interazioni chiave vengono identificate da percorsi degli utenti tipici, possono essere provate per identificare problemi o basate su script e inserite nei test CI per evitare regressioni.
Scoprire cosa stanno vivendo i tuoi utenti reali (dati sul campo)
Visita PageSpeed Insights
PageSpeed Insights estrae dati sul campo dall'API Report sull'esperienza utente di Chrome (CrUX) e fornisce un'istantanea delle prestazioni della tua pagina e dell'origine nei 28 giorni precedenti. Questi dati ora includono l'INP:
Provala su PageSpeed Insights.
Raccogliere i valori INP dal campo
Se vuoi raccogliere autonomamente i dati INP per un sito, il modo più semplice per farlo è tramite la libreria web-vitals, che ora dispone di supporto INP completo nella versione 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 eseguire misurazioni nella console DevTools.
Estensione Web Vitals
L'estensione Web Vitals offre una panoramica dell'esperienza sulle pagine dei tuoi utenti (dall'API CrUX), dei valori in tempo reale del CWV e delle metriche chiave della visita corrente alla pagina.
Installa l'estensione Web Vitals per Chrome.
Diagnosi dei problemi di prestazioni (dati del lab)
Utilizza i flussi utente di Lighthouse
La nuova modalità intervallo di tempo nel riquadro Lighthouse in DevTools ti consente di avviare Lighthouse, interagire con la pagina di test come preferisci e quindi ottenere un report di ciò che è successo durante quel periodo. Questo report ora include l'INP e una funzionalità di controllo per facilitare la diagnosi di eventuali problemi di reattività.
La stessa serie di interazioni può essere automatizzata utilizzando i flussi utente di Lighthouse. INP è disponibile nei flussi utente a partire da Lighthouse 9.6.
Dettagli sulla disponibilità dello strumento
- 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 dati INP
- BigQuery: INP disponibile come
- PageSpeed Insights
- pagespeed.web.dev: dati dei campi INP a livello di pagina e di origine provenienti dall'API CrUX e visualizzati come "Interaction to Next Paint"
- API PSI: INP disponibile come
INTERACTION_TO_NEXT_PAINT_MS
web-vitalslibreria JSweb-vitalsinclude l'assistenza INP
- Estensione di Chrome Web Vitals
- Include dati di misurazione INP locali e dati dei campi INP, se disponibili dall'API CrUX
- Faro
- Pannello Lighthouse in DevTools: misurazione INP disponibile in modalità "intervallo di tempo" in Chrome Canary (104)
- Modulo npm di Lighthouse: misurazione INP disponibile in intervalli di tempo (utilizza puppeteer per l'input sintetico)
Lavoro futuro e richiesta di feedback
In futuro, i team degli strumenti di Chrome continueranno a investire nelle funzionalità di debug e nei consigli per l'ottimizzazione per INP.
Se hai un feedback su qualsiasi cosa, dall'utilità della metrica alla facilità di misurazione, inviala al gruppo Google dedicato ai feedback degli eventi web.