Core Web Vitals · LCP, INP, CLS

Le tre metriche

I Core Web Vitals misurano tre momenti diversi dell'esperienza: quanto ci mette la pagina a mostrare qualcosa di utile, quanto è reattiva quando ci si interagisce, e quanto sta ferma mentre carica.

LCP · Largest Contentful Paint

Il tempo che impiega a comparire l'elemento più grande nell'area visibile: di solito l'immagine principale o il blocco di testo del titolo. È la metrica che più corrisponde alla percezione di "il sito è lento".

INP · Interaction to Next Paint

Quanto tempo passa fra un'interazione dell'utente e l'aggiornamento visivo che ne consegue, considerando tutte le interazioni della visita. Ha sostituito FID a marzo 2024 ed è nettamente più severa: molti siti che passavano FID non passano INP.

CLS · Cumulative Layout Shift

Quanto il layout si sposta durante il caricamento. È il difetto che fa cliccare il pulsante sbagliato perché nel frattempo è comparso un banner. Nasce quasi sempre da immagini e iframe senza dimensioni dichiarate, o da font che si sostituiscono a caricamento avvenuto.

Il malinteso più comune: laboratorio contro campo

Il punteggio grande in cima a PageSpeed Insights è un test di laboratorio: una simulazione su una macchina standard, con una connessione standard. È utile per il debug, ma non è quello che Google usa.

Quello che conta sono i dati di campo CrUX, raccolti dalle visite reali degli utenti Chrome negli ultimi 28 giorni. Li trovi nella sezione "Scopri l'esperienza dei tuoi utenti reali" della stessa pagina di PageSpeed, e nel rapporto Segnali web essenziali di Search Console.

Un sito con 98 in laboratorio e Core Web Vitals rossi in campo non ha un problema di misurazione: ha un problema di utenti veri, su dispositivi veri.

La valutazione si supera quando almeno il 75% delle visite rientra nella soglia buona, calcolato separatamente per desktop e mobile. Basta che il mobile non passi perché l'insieme risulti insufficiente.

Gli interventi che spostano i numeri

Per l'LCP

• Individua l'elemento LCP reale (PageSpeed lo indica) prima di ottimizzare a caso.
• Se è un'immagine: formato moderno, dimensioni corrette, fetchpriority="high", niente lazy loading sopra la piega.
• Elimina le risorse che bloccano il rendering: CSS critico inline, il resto differito.
• Precarica i font usati nell'area visibile e usa font-display: swap.
• Riduci il tempo di risposta del server: cache, compressione, CDN.

Per l'INP

• Spezza le attività JavaScript lunghe: sopra i 50 ms bloccano il thread principale.
• Togli il JavaScript di terze parti che non serve. È la causa più frequente, e la più facile da negare.
• Rimanda il lavoro non urgente dopo il primo aggiornamento visivo.
• Usa la delega degli eventi invece di centinaia di listener separati.

Per il CLS

• Dichiara sempre width e height su immagini, video e iframe.
• Riserva lo spazio per banner, cookie bar e contenuti che arrivano dopo.
• Precarica i font e scegli un fallback con metriche simili per evitare lo scatto alla sostituzione.
• Non inserire elementi sopra a contenuto già visibile.

Quanto contano davvero

Come fattore di ranking pesano poco rispetto alla pertinenza: nessuna pagina va in prima posizione perché è veloce. Diventano decisivi a parità di qualità, ed è una condizione più frequente di quanto sembri nei mercati locali.

La ragione più solida per occuparsene però è un'altra: incidono direttamente sul tasso di conversione. Un LCP che scende da quattro secondi a due si vede nei numeri commerciali prima che nel posizionamento.

Domande frequenti

Continua da qui