Analisi dei Core Web Vitals

Come funziona questo controllo

Scanaris non inventa numeri di prestazioni: chiede a PageSpeed Insights, il servizio di Google che esegue Lighthouse, di misurare la tua pagina in modalità mobile e legge il risultato. Da lì prende il punteggio da 0 a 100 e tre metriche: LCP (Largest Contentful Paint, quanto ci mette a disegnarsi l'elemento visibile più grande), CLS (Cumulative Layout Shift, quanto la pagina "salta" mentre carica) e TBT (Total Blocking Time, quanto tempo il JavaScript blocca il thread principale). Il punteggio viene salvato in un rilievo informativo che non toglie nulla e che alimenta il voto del pilastro prestazioni. Apre rilievi con gravità solo quando una metrica cade nell'intervallo che Google chiama "scarso": LCP sopra i 4 secondi (media), CLS sopra 0,25 (bassa) o TBT sopra i 600 millisecondi (bassa). Se Lighthouse non restituisce punteggio (pagina non misurabile, errore dello strumento), non c'è rilievo.

Perché è importante

Le prestazioni sono esperienza utente e sono SEO. Google usa le Core Web Vitals come segnale di ranking dal 2021, e misura quelle dei tuoi utenti reali in Chrome, non solo quelle di laboratorio. Ma l'effetto più diretto è sul business: ogni secondo in più di caricamento su mobile riduce le conversioni in modo misurabile, e un LCP di 5 secondi significa che buona parte dei tuoi visitatori vede uno schermo bianco abbastanza a lungo da andarsene. Le metriche si misurano su mobile perché è dove la maggior parte dei siti rende peggio e dove Google indicizza per primo.

Come risolvere

LCP alto

• L'immagine principale di solito è l'elemento LCP. Servila in WebP o AVIF, nella dimensione in cui viene mostrata e non in quella originale, con fetchpriority="high" e senza loading="lazy". In Nuxt e Next.js, i componenti immagine (NuxtImg, next/image) lo fanno per te.
• Il tempo di risposta del server si somma a tutto il resto. Cache di pagina, CDN davanti e, su WordPress, un plugin di cache ben configurato.
• CSS e JavaScript che bloccano il rendering: carica il CSS critico inline e il resto dopo; gli script di terzi con defer o async.
• Font web: font-display: swap, precaricamento del font principale e, se puoi, ospitali tu invece di caricarli da Google Fonts.

CLS alto

Quasi sempre sono immagini senza width e height, pubblicità o embed che compaiono all'improvviso, e font che cambiano dimensione al caricamento. Dichiara le dimensioni di ogni immagine e iframe, riserva lo spazio dei blocchi dinamici con min-height e non inserire mai contenuto sopra quello che l'utente sta già leggendo.

TBT alto

Troppo JavaScript in esecuzione all'avvio. Dividi il bundle per rotte, carica i componenti pesanti solo quando servono, rimanda gli script di analitica e chat a dopo l'interazione, e controlla il peso delle librerie: librerie obsolete e una copia completa di jQuery per un menu sono i casi tipici.

Verifica che sia risolto

npx lighthouse https://tuodominio.it --only-categories=performance --preset=perf --form-factor=mobile --screenEmulation.mobile --view

Oppure incolla l'URL in PageSpeed Insights, che oltre alla misurazione di laboratorio mostra i dati degli utenti reali degli ultimi 28 giorni. Obiettivo: LCP sotto 2,5 s, CLS sotto 0,1 e TBT sotto 200 ms. Misura più volte: i risultati di laboratorio variano un po' tra un'esecuzione e l'altra.

Domande frequenti

Il mio sito carica veloce sul mio computer. Perché il punteggio è basso?

Perché la misurazione simula un telefono di fascia media con connessione 4G lenta, che è ciò che usa una parte grande dei tuoi visitatori. Il tuo portatile in fibra non è il caso rappresentativo.

Un 100 di prestazioni aiuta il SEO più di un 90?

Non in modo apprezzabile. Google distingue tra "buono", "da migliorare" e "scarso" per metrica; una volta in "buono", il resto è esperienza utente, non ranking. Concentrati sull'uscire dal rosso, non sull'inseguire il 100.

Questo controllo misura tutte le mie pagine?

Solo l'URL scansionato. Se la tua pagina prodotto o il tuo blog hanno problemi diversi, scansionali a parte. Gli altri controlli di questo pilastro, come accessibilità, lavorano anch'essi sulla pagina specifica.