Siamo lieti di annunciare il primo ciclo di supporto degli strumenti per la nuova metrica di adattabilità in attesa, Interaction to Next Paint (INP). Per informazioni sulla metrica stessa, consulta la guida ufficiale alle metriche INP.
Misurazione suggerita
Lo scopo della misurazione dell'INP è capire quanto velocemente la pagina risponde all'input dell'utente. L'unico modo per ottenere dati realistici è misurare la risposta della tua pagina per gli utenti reali che visitano il tuo sito utilizzando i dati sul campo.
La misurazione dell'INP in laboratorio consente quindi di comprendere meglio i tempi degli eventi e dove devono essere eseguite le ottimizzazioni. Gli strumenti di laboratorio non interagiscono automaticamente con la pagina, quindi richiedono un input manuale durante la misurazione o devono essere eseguiti con script con uno strumento di automazione come Puppeteer. Quando vengono identificate le interazioni chiave dai percorsi utente tipici, possono essere provate per identificare i problemi o essere sottoposte a scripting e inserite nei test di CI per evitare le regressioni.
Scopri com'è l'esperienza dei tuoi utenti reali (dati sul campo)
Visita PageSpeed Insights
PageSpeed Insights estrae i dati sul campo dall'API Report sull'esperienza utente di Chrome (CrUX) e fornisce uno snapshot delle prestazioni della tua pagina e della tua origine negli ultimi 28 giorni. Questi dati ora includono INP:
Provale su PageSpeed Insights.
Raccogliere i tuoi valori INP dal campo
Se vuoi raccogliere personalmente i dati INP per un sito, il modo più semplice per farlo è utilizzare la libreria web-vitals, che ora nella sua versione beta supporta il supporto INP completo.
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 per Chrome
L'estensione Web Vitals fornisce sia una panoramica dell'esperienza sulle pagine degli utenti (dall'API CrUX) sia i valori in tempo reale dei CWV e le metriche chiave della visita corrente alla pagina.
Installa l'estensione Web Vitals per Chrome.
Diagnostica dei problemi di prestazioni (dati di laboratorio)
Utilizzare le procedure utente di Lighthouse
La nuova modalità Periodo di tempo nel riquadro Lighthouse in DevTools ti consente di avviare Lighthouse, interagire con la pagina di test come preferisci e ricevere un report su ciò che è successo durante il periodo di tempo selezionato. Questo report ora include l'INP e un controllo per aiutarti a diagnosticare 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 i dati INP
- BigQuery: INP disponibile come
- PageSpeed Insights
- pagespeed.web.dev: i dati a livello di pagina e di origine dell'INP dell'API CrUX sono stati visualizzati come "Interaction to Next Paint"
- API PSI: INP disponibile come
INTERACTION_TO_NEXT_PAINT_MS
web-vitalsLibreria JSweb-vitalsinclude il supporto INP
- Estensione di Chrome Web Vitals
- Include la misurazione INP locale e i dati di campo INP, se disponibili dall'API CrUX
- Lighthouse
- Riquadro Lighthouse in DevTools: misurazione INP disponibile in modalità "intervallo di tempo" in Chrome Canary (104)
- Modulo npm Lighthouse: misurazione INP disponibile in intervalli di tempo (utilizza Puppeteer per l'input sintetico)
Lavoro futuro e richiesta di feedback
In futuro, i team di strumenti di Chrome continueranno a investire in funzionalità di debug e consigli di ottimizzazione per gli annunci in-feed.
Se hai feedback su qualsiasi aspetto, dall'utilità della metrica alla facilità di misurazione, inviali al gruppo Google web-vitals-feedback.