Core Web Vitals: La guida completa.

Welcome to WordPress. This is your first post. Edit or delet

Core Web Vitals: I Segnali Web Essenziali

I Core Web Vitals sono metriche di alto livello progettate da Google per catturare l’esperienza dell’utente. Vengono misurate tre metriche di base di Web Vitals: Pittura con contenuto più grande, Ritardo primo input e Spostamento cumulativo del layout. 

A ciascuna di queste metriche viene automaticamente assegnata una valutazione di Buono, Necessita di miglioramento o Scarso in base alla metodologia e ai test standard del settore progettati da Google. 

Le statistiche sul tempo di caricamento della pagina sono integrate da First Paint e First Contentful Paint.Core Web Vitals è attualmente supportato solo nei browser Chromium, con Safari e Firefox in arrivo.

Le metriche dei Core Web Vitals

• Il contenuto visivo più grande sulla pagina (LCP): misura la velocità di carico percepita dall’utente. Restituisce il tempo necessario per caricare il contenuto principale della pagina.
• Tempo di ritardo al primo accesso (FID): misura la velocità con cui un sito Web risponde al primo input dell’utente.
• Spostamento del layout (CLS): misura la stabilità visiva, cioè se ci sono cambiamenti nel layout della pagina mentre i vari elementi vengono caricati in vista.

Ciascuna di queste metriche rappresenta un impatto sull’esperienza dell’utente, che viene quantificato e classificato da Web Analytics.

Ciascuna tabella — LCP, FID e CLS — mostra a colpo d’occhio anche le prestazioni di questi elementi nel 75° percentile (P75). Facendo clic su ciascuna riga della tabella è possibile espandere l’elemento e accedere a ulteriori informazioni, comprese le metriche P50, P90 e P99.

Questi numeri si riferiscono al modo in cui un elemento si comporta rispetto ad altri nella tua pagina. Ad esempio, se un elemento impiega 3.900 ms per essere caricato ed è nel 75 percentile, significa che è più lento da caricare rispetto al 75% degli elementi nella tua pagina.

​​Dati comuni raccolti per tutte le metriche di Core Web Vitals

• Elemento : un selettore CSS che rappresenta il nodo DOM. Con questa stringa, puoi utilizzare document.querySelector(<element_name>)nella console di sviluppo del tuo browser per scoprire quale nodo DOM ha un impatto negativo sui tuoi punteggi/valori.
• Percorso : il percorso dell’URL nel momento in cui vengono acquisiti i Core Web Vitals.
• Valore : il valore della metricaper ogni Core Web Vital. Questo valore è in millisecondi per LCP o FID e un punteggio per CLS.

​​Dati aggiuntivi raccolti per Largest Contentful Paint

• URL : l’URL di origine (come immagine, testo, caratteri Web).
• Dimensione : la dimensione dell’oggetto di origine in byte.

​​Dati aggiuntivi raccolti per First Input Delay

• Nome : il tipo di evento acquisito (come mousedown, keydown, pointerdown).

​​Dati aggiuntivi raccolti per lo spostamento cumulativo del layout

Le informazioni sul layout sono un valore JSON che include larghezza, altezza, posizione dell’asse x, posizione dell’asse y, sinistra, destra, in alto e in basso. Questi valori rappresentano i cambiamenti di layout che si verificano nella pagina.

• CurrentRect : acquisisce le informazioni di layout dell’elemento DOM con l’area più grande, dopo che si è verificato lo spostamento nella pagina. Questo valore JSON viene mostrato come Corrente nella sezione Visualizzazione debug . Per accedervi, scorrere fino all’elemento grafico CLS (Cumulative Layout Shifts) > Visualizzazione debug . Fare clic su qualsiasi elemento di quella tabella per accedere alla sezione Spostamenti layout , dove viene presentato Attuale .
• PreviousRect : acquisisce le informazioni sul layout dell’elemento DOM con l’area più grande, prima che si verifichi lo spostamento nella pagina. Questo valore JSON viene mostrato come Precedente nella sezione Visualizzazione debug . Per accedervi, scorrere fino all’elemento grafico CLS (Cumulative Layout Shifts) > Visualizzazione debug . Fare clic su qualsiasi elemento di quella tabella per accedere alla sezione Spostamenti layout , dove viene presentato Precedente .