Ora i tuoi strumenti per sviluppatori preferiti possono misurare i Segnali web essenziali.
L'iniziativa Web Vitals recentemente annunciata fornisce una guida unificata sugli indicatori di qualità essenziali per tutti i siti per offrire un'esperienza utente ottimale sul web. Siamo lieti di annunciare che tutti gli strumenti più utilizzati di Google per gli sviluppatori web ora supportano la misurazione dei Segnali web essenziali, per consentirti di diagnosticare e risolvere più facilmente i problemi relativi all'esperienza utente. Sono inclusi Lighthouse, PageSpeed Insights, Chrome DevTools, Search Console, lo strumento di misurazione di web.dev, l'estensione di Chrome Web Vitals e una nuova (!) API Chrome UX Report.
Ora che la Ricerca Google include i Segnali web essenziali come base per valutare l'esperienza sulle pagine, è importante che queste metriche siano il più disponibili e utilizzabili.
Per iniziare a ottimizzare l'esperienza utente con i Segnali web essenziali, prova il seguente flusso di lavoro:
- Utilizza il nuovo report Segnali web essenziali di Search Console per identificare i gruppi di pagine che richiedono attenzione (in base ai dati sul campo).
- Una volta identificate le pagine che richiedono interventi, utilizza PageSpeed Insights (basato su Lighthouse e Report UX di Chrome) per diagnosticare i problemi sul campo e di laboratorio su una pagina. PageSpeed Insights (PSI) è disponibile tramite Search Console oppure puoi inserire un URL direttamente su PSI.
- Vuoi ottimizzare il tuo sito localmente nel lab? Utilizza Lighthouse e Chrome DevTools per misurare i Segnali web essenziali e ricevere indicazioni utili su cosa correggere esattamente. L'estensione Web Vitals di Chrome può offrirti una visualizzazione in tempo reale delle metriche su computer.
- Ti serve una dashboard personalizzata di Segnali web essenziali? Usa la dashboard CrUX aggiornata o la nuova API Chrome UX Report per i dati sul campo oppure l'API PageSpeed Insights per i dati di laboratorio.
- Cerchi una guida? web.dev/measure può misurare la tua pagina e mostrarti una serie prioritaria di guide e codelab per l'ottimizzazione, utilizzando i dati di PSI.
- Infine, utilizza Lighthouse CI sulle richieste di pull per assicurarti che non esistano regressioni in Core Web Vitals prima di eseguire il deployment di una modifica in produzione.
Con questa introduzione, analizziamo gli aggiornamenti specifici di ogni strumento.
Faro
Lighthouse è uno strumento automatico di controllo dei siti web che consente agli sviluppatori di diagnosticare i problemi e identificare opportunità per migliorare l'esperienza utente dei loro siti. Misura diversi aspetti della qualità dell'esperienza utente in un ambiente controllato, tra cui prestazioni e accessibilità. L'ultima versione di Lighthouse (6.0, rilasciata a metà maggio 2020) include controlli aggiuntivi, nuove metriche e un punteggio delle prestazioni appena composto.
Lighthouse 6.0 introduce tre nuove metriche nel report. Due di queste nuove metriche, Largest Contentful Paint (LCP) e Cumulative Layout Shift (CLS), ovvero implementazioni di laboratorio di Core Web Vitals e forniscono importanti informazioni diagnostiche per ottimizzare l'esperienza utente. Data la loro importanza per la valutazione dell'esperienza utente, le nuove metriche non solo vengono misurate e incluse nel report, ma vengono anche prese in considerazione nel calcolo del punteggio del rendimento.
La terza nuova metrica inclusa in Lighthouse, Tempo di blocco totale (TBT), è correlata bene alla metrica di campo First Input Delay (FID), un'altra metrica di Core Web Vitals. Seguendo i consigli forniti nel report Lighthouse e effettuando l'ottimizzazione in base ai tuoi punteggi, potrai offrire la migliore esperienza possibile agli utenti.
Tutti i prodotti con Lighthouse aggiornati per riflettere la versione più recente, tra cui Lighthouse CI, che consente di misurare facilmente i Segnali web essenziali sulle richieste di pull prima che vengano uniti e distribuiti.
Per scoprire di più sugli ultimi aggiornamenti di Lighthouse, consulta il nostro post del blog Novità di Lighthouse 6.0.
PageSpeed Insights
PageSpeed Insights (PSI) genera report sulle prestazioni di prova in laboratorio e sul campo di una pagina su dispositivi mobili e desktop. Lo strumento offre una panoramica dell'esperienza con la pagina da parte degli utenti reali (basati sul report UX di Chrome) e una serie di consigli pratici su come il proprietario di un sito può migliorare l'esperienza sulle pagine (fornito da Lighthouse).
Anche PageSpeed Insights e l'API PageSpeed Insights sono stati aggiornati in modo da utilizzare Lighthouse 6.0 in background e ora supportano la misurazione dei Segnali web essenziali in entrambe le sezioni del lab e sul campo del report. I Segnali web essenziali sono annotati da una barra blu come mostrato di seguito.
Mentre Search Console offre ai proprietari di siti un'ottima panoramica dei gruppi di pagine che richiedono attenzione, PSI aiuta a identificare le opportunità per pagina per migliorare l'esperienza sulle pagine. In PSI, nella parte superiore del report puoi vedere chiaramente se la tua pagina soddisfa o meno le soglie per un'esperienza positiva in tutti i Segnali web essenziali, se supera il test Segnali web essenziali o non supera il relativo test.
CrUX
Il Report sull'esperienza utente di Chrome (CrUX) è un set di dati pubblico contenente dati reali sull'esperienza utente su milioni di siti web. Misura le versioni sul campo di tutti i Segnali web essenziali. A differenza dei dati di laboratorio, i dati CrUX provengono da utenti che hanno attivato l'opzione sul campo. Utilizzando questi dati, gli sviluppatori sono in grado di comprendere la distribuzione di esperienze utente reali sui propri siti web o persino di quelli della concorrenza. Anche se non hai il RUM sul tuo sito, CrUX può fornire un modo rapido e semplice per valutare i tuoi Segnali web essenziali. Il set di dati CrUX su BigQuery include dati granulari sulle prestazioni per tutti i Segnali web essenziali ed è disponibile negli snapshot mensili a livello di origine.
L'unico modo per conoscere realmente le prestazioni del tuo sito per gli utenti è misurarne effettivamente le prestazioni sul campo mentre questi utenti caricano e interagiscono con il sito. Questo tipo di misurazione è comunemente indicato come monitoraggio degli utenti reali o RUM in breve. Anche se non hai il RUM sul tuo sito, CrUX può fornire un modo rapido e semplice per valutare i tuoi Segnali web essenziali.
Presentazione dell'API CrUX
Oggi siamo lieti di annunciare l'API di CrUX, un modo rapido e senza costi per integrare facilmente i flussi di lavoro di sviluppo con la misurazione della qualità a livello di origine e URL per le seguenti metriche sul campo:
- visualizzazione elemento più grande
- variazione layout cumulativa
- First Input Delay
- Prima visualizzazione con contenuti
Gli sviluppatori possono interrogare un'origine o un URL e segmentare i risultati in base a diversi fattori di forma. L'API si aggiorna quotidianamente e riassume i dati dei 28 giorni precedenti (a differenza del set di dati BigQuery, che viene aggregato mensilmente). Inoltre, l'API ha le stesse quote API pubbliche informali che posizioniamo sull'altra API,l'API PageSpeed Insights (25.000 richieste al giorno).
Di seguito è riportata una demo che utilizza l'API CrUX per visualizzare le metriche di Segnali web essenziali con distribuzioni per buona, da migliorare e scarsa:
Nelle versioni future, prevediamo di espandere l'API per consentire l'accesso ad altre dimensioni e metriche del set di dati CrUX.
Dashboard CrUX rinnovata
La dashboard di CrUX, appena riprogettata, ti consente di monitorare facilmente le prestazioni di un'origine nel tempo e ora puoi utilizzarla per monitorare le distribuzioni di tutte le metriche di Segnali web essenziali. Per iniziare a utilizzare la dashboard, guarda il nostro tutorial su web.dev.
Abbiamo introdotto una nuova pagina di destinazione di Segnali web essenziali per consentirti di controllare a colpo d'occhio le prestazioni del tuo sito in modo ancora più semplice. Siamo lieti di ricevere il tuo feedback su tutti gli strumenti CrUX. Per condividere le tue opinioni e domande, contattaci tramite l'account Twitter @ChromeUXReport o il gruppo Google.
Riquadro delle prestazioni di Chrome DevTools
Debug degli eventi di variazione del layout nella sezione Esperienza
Nel riquadro Prestazioni di Chrome DevTools è stata aggiunta una nuova sezione Esperienza che può aiutarti a rilevare variazioni impreviste del layout. Ciò è utile per individuare e risolvere i problemi di instabilità visiva nella pagina che contribuiscono al Cumulative Layout Shift.
Seleziona una Variazione del layout per visualizzarne i dettagli nella scheda Riepilogo. Per visualizzare dove si è verificato il adattamento, passa il mouse sopra i campi Spostato da e Spostato in.
Debug dell'idoneità dell'interazione con il tempo totale di blocco nel piè di pagina
La metrica Tempo di blocco totale (TBT) può essere misurata negli strumenti di laboratorio ed è un eccellente proxy per il First Input Delay. TBT misura la quantità totale di tempo tra First Contentful Paint (FCP) e Time to Interactive (TTI) in cui il thread principale è stato bloccato per un tempo sufficiente a impedire la reattività all'input. Le ottimizzazioni delle prestazioni che migliorano il TBT nel lab dovrebbero migliorare il FID sul campo.
Quando misuri le prestazioni delle pagine, TBT viene ora visualizzato nel piè di pagina del riquadro Prestazioni di Chrome DevTools:
- Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Rendimento.
- Fai clic su Record (Registra).
- Ricarica manualmente la pagina.
- Attendi il caricamento della pagina, quindi interrompi la registrazione.
Per ulteriori informazioni, consulta Novità di DevTools (Chrome 84).
Search Console
Il nuovo report Segnali web essenziali in Search Console ti aiuta a identificare i gruppi di pagine del tuo sito che richiedono attenzione, in base a dati reali (sul campo) provenienti da CrUX. Le prestazioni degli URL vengono raggruppate per stato, tipo di metrica e gruppo di URL (gruppi di pagine web simili).
Il report si basa sulle tre metriche di Core Web Vitals: LCP, FID e CLS. Se un URL non dispone di una quantità minima di dati dei report per queste metriche, viene omesso dal report. Prova il nuovo report per avere una visione olistica del rendimento per la tua origine.
Dopo aver identificato un tipo di pagina con problemi relativi a Segnali web essenziali, puoi utilizzare PageSpeed Insights per scoprire suggerimenti di ottimizzazione specifici per le pagine rappresentative.
web.dev
https://pagespeed.web.dev/ ti consente di misurare le prestazioni della tua pagina nel tempo, fornendo un elenco prioritario di guide e codelab su come migliorare. La misurazione si basa su PageSpeed Insights. Lo strumento di misurazione ora supporta anche le metriche di Segnali web essenziali, come mostrato di seguito:
Estensione Web Vitals
L'estensione Web Vitals misura le tre metriche Core Web Vitals in tempo reale per Google Chrome (desktop). Questa funzionalità è utile per individuare i problemi nelle prime fasi del flusso di lavoro di sviluppo e come strumento di diagnostica per valutare le prestazioni dei Segnali web essenziali durante la navigazione sul web.
L'estensione è ora disponibile per l'installazione dal Chrome Web Store. Ci auguriamo che ti sia utile. Siamo lieti di poter contribuire a migliorarla e ricevere feedback sul repository GitHub del progetto.
Momenti salienti
Ecco fatto! Ulteriori azioni possibili
- Utilizza Lighthouse in DevTools per ottimizzare l'esperienza utente e assicurarti di ottenere risultati ottimali con i Segnali web essenziali sul campo.
- Utilizza PageSpeed Insights per confrontare il rendimento dei tuoi Segnali web essenziali in lab e sul campo.
- Prova la nuova API Chrome User Experience Report per accedere facilmente al rendimento della tua origine e del tuo URL rispetto ai Segnali web essenziali negli ultimi 28 giorni.
- Utilizza la sezione Esperienza e il piè di pagina nel riquadro Prestazioni di DevTools per approfondire ed eseguire il debug in base a Segnali web essenziali specifici.
- Utilizza il report Segnali web essenziali di Search Console per un riepilogo delle prestazioni delle tue origini sul campo.
- Utilizza l'estensione Web Vitals per monitorare le prestazioni di una pagina in base a Segnali web essenziali in tempo reale.
Parleremo di più sui nostri strumenti di Segnali web essenziali all'indirizzo web.dev Live a giugno. Iscriviti per ricevere aggiornamenti sull'evento.
~ di Elizabeth e Addy, WebPerf Janitors