Core Web Vitals spiegati: LCP, CLS e INP

Capisci i Core Web Vitals: LCP misura la velocità, CLS la stabilità, INP la reattività. Tutti e tre contano per l'esperienza utente.

Bozza

I Core Web Vitals sono tre metriche che Google usa per misurare l'esperienza della pagina. LCP misura la velocità di caricamento. CLS misura la stabilità visiva. INP misura la reattività.

Ogni metrica misura un aspetto diverso delle prestazioni. Insieme danno un quadro dell'esperienza utente.

Largest Contentful Paint (LCP)

LCP misura il tempo fino al caricamento del contenuto principale. Il contenuto principale è l'immagine o il blocco di testo più grande della pagina. Per la home page, l'LCP è l'immagine principale. Per un articolo, l'LCP è il titolo dell'articolo e l'immagine principale.

L'LCP si misura da quando l'utente clicca il link a quando il contenuto principale compare sullo schermo. Se l'LCP è di un secondo, l'utente vede il contenuto principale un secondo dopo il clic. Se l'LCP è di tre secondi, l'utente aspetta tre secondi.

Obiettivo: un LCP sotto i due virgola cinque secondi è buono. Un LCP tra i due virgola cinque e i quattro secondi va migliorato. Un LCP sopra i quattro secondi è scarso.

Esempio: l'immagine principale della home pesa cinque megabyte. Ci vogliono tre secondi per scaricarla. L'LCP è di tre secondi. L'obiettivo è due virgola cinque secondi. Le prestazioni vanno migliorate.

Cumulative Layout Shift (CLS)

CLS misura la stabilità visiva. Uno spostamento del layout avviene quando il contenuto si muove dopo il caricamento della pagina. Esempio: l'utente inizia a leggere un articolo. Si carica un annuncio. L'articolo scende. L'utente perde il segno. Fastidioso.

CLS quantifica lo spostamento totale del layout. Se il contenuto scende di duecento pixel, il CLS aumenta. Se il contenuto si sposta più volte, il CLS si accumula.

Obiettivo: un CLS sotto zero virgola uno è buono. Un CLS tra zero virgola uno e zero virgola due cinque va migliorato. Un CLS sopra zero virgola due cinque è scarso.

Esempio: un annuncio si carica dopo la pagina. L'annuncio occupa trecento pixel di altezza. Il contenuto sotto l'annuncio scende. Il CLS è zero virgola quindici. Va migliorato.

Interaction to Next Paint (INP)

INP misura la reattività. L'utente clicca un pulsante. Il sistema elabora il clic. Aggiorna la pagina. Mostra la modifica sullo schermo. L'INP è il tempo dal clic all'aggiornamento visivo.

L'INP è importante per le pagine interattive (moduli, pulsanti, menu). Conta meno per le pagine statiche (articoli, blog).

Obiettivo: un INP sotto i duecento millisecondi è buono. Un INP tra i duecento e i cinquecento millisecondi va migliorato. Un INP sopra i cinquecento millisecondi è scarso.

Esempio: l'utente clicca il pulsante Aggiungi al carrello. Il sistema elabora la richiesta. Aggiorna il contatore del carrello. L'INP è di trecento millisecondi. Va migliorato.

Perché tre metriche e non una

Una sola metrica non basta a descrivere l'esperienza utente. Conta la velocità di caricamento (LCP). Conta la stabilità visiva (CLS). Conta la reattività (INP). Una pagina può caricarsi in fretta ma essere instabile (CLS alto). Oppure essere veloce e stabile ma poco reattiva (INP alto). Le tre metriche insieme misurano la qualità dell'esperienza utente.

Esempio reale: i Core Web Vitals di un negozio online

Situazione di partenza

Situazione di partenza di una pagina prodotto di un negozio online:

LCP: due virgola otto secondi (sopra l'obiettivo di due virgola cinque). CLS: zero virgola dodici (sopra l'obiettivo di zero virgola uno). INP: duecentoventi millisecondi (sopra l'obiettivo di duecento).

Tutte e tre le metriche vanno migliorate.

Ottimizzazione

LCP: ottimizza l'immagine principale, carica in modo differito (lazy load) il contenuto sotto la piega. Risultato: uno virgola otto secondi.

CLS: riserva lo spazio per gli annunci, carica in modo differito il contenuto non critico. Risultato: zero virgola zero cinque.

INP: riduci al minimo il JavaScript, ottimizza i gestori di eventi. Risultato: centottanta millisecondi.

Ora tutte e tre le metriche rispettano gli standard di Google.

Come i Core Web Vitals si collegano all'esperienza utente

LCP buono: l'utente vede subito il contenuto. Il sito sembra reattivo.

LCP scarso: l'utente aspetta il contenuto. Il sito sembra lento.

CLS buono: il layout è stabile. L'utente legge senza che il contenuto salti. Comodo.

CLS scarso: il layout si sposta. L'utente perde il segno. Fastidioso.

INP buono: l'utente clicca un pulsante e vede subito la risposta. Il sito sembra interattivo.

INP scarso: l'utente clicca un pulsante e aspetta la risposta. Il sito sembra poco reattivo.

Buoni Core Web Vitals creano una buona esperienza utente. Core Web Vitals scarsi creano una cattiva esperienza utente.

Come misurare i Core Web Vitals

Google misura i Core Web Vitals sugli utenti reali (monitoraggio degli utenti reali). Gli strumenti di test in laboratorio come Lighthouse stimano i Core Web Vitals, ma possono non corrispondere all'esperienza degli utenti reali (le condizioni di rete cambiano).

Controlla i Core Web Vitals in Google Search Console. Google raccoglie i dati degli utenti reali e mostra se il sito rispetta gli standard (buono, da migliorare, scarso).

Controlla anche in PageSpeed Insights. Punteggi di Lighthouse più i dati degli utenti reali dal database di Google.

Domande frequenti

Qual è il Core Web Vital più importante?

Contano tutti e tre. Ma di solito LCP e CLS hanno più impatto. Se la pagina si carica in fretta ma il layout si sposta di continuo, l'esperienza è pessima. Se la pagina è stabile ma poco reattiva, la frustrazione è minore. LCP e CLS sono di solito la priorità uno e due. INP è importante per le pagine interattive ma meno critico per i contenuti statici. Con il creatore di siti di WEMASY puoi impostarlo direttamente sul tuo sito.

In cosa i Core Web Vitals sono diversi dalle altre metriche di prestazioni?

I Core Web Vitals sono metriche centrate sull'esperienza utente. Misurano ciò che gli utenti percepiscono. Le altre metriche (TTFB, FCP) sono metriche tecniche, un prerequisito per buoni Core Web Vitals, ma non misurano direttamente l'esperienza utente. Migliora le altre metriche come base, ma i Core Web Vitals dicono se la base si traduce in una buona esperienza.

Possiamo avere buone metriche di prestazioni ma Core Web Vitals scarsi?

Sì. Una pagina può avere un TTFB veloce ma un LCP scarso. Può avere un FCP veloce ma un CLS scarso. Le metriche tecniche sono necessarie ma non bastano per avere buoni Core Web Vitals.

Dobbiamo ottimizzare tutti e tre i Core Web Vitals allo stesso modo?

No. Dai la priorità in base all'impatto. Misura la situazione attuale. Se l'LCP è di quattro secondi ma il CLS è zero virgola uno, migliora prima l'LCP. I divari più grandi hanno l'impatto maggiore sugli utenti.

I Core Web Vitals sono le uniche metriche che interessano a Google?

No. Google misura anche l'adattamento ai dispositivi mobili, HTTPS, la navigazione sicura, gli interstitial. I Core Web Vitals sono i più visibili e i più modificabili. Ma l'esperienza completa della pagina include altri fattori. Ottimizza i Core Web Vitals, ma non ignorare gli altri fattori di posizionamento.

Ogni quanto si aggiornano in Google Search Console i Core Web Vitals degli utenti reali?

Ogni giorno. Google raccoglie i dati degli utenti reali di continuo. I Core Web Vitals in Search Console si aggiornano ogni giorno. Gli strumenti di test in laboratorio mostrano una misura puntuale. Monitora in Search Console i dati degli utenti reali per le prestazioni nel tempo.

Mettilo in pratica
sul tuo sito web.

Inizia gratis con WEMASY e crea il tuo sito in pochi minuti.