Cos'è Core Web Vitals e perché è importante?
Le aspettative degli utenti verso un sito web crescono ogni giorno. I visitatori non chiedono solo contenuti di qualità: vogliono pagine che si aprano all'istante, che rispondano ai clic senza ritardi e che non si spostino visivamente. Per basare l'esperienza utente su dati concreti, Google ha lanciato l'iniziativa Core Web Vitals (Importanti dati web). Queste metriche misurano come i visitatori reali interagiscono con le vostre pagine (Real User Monitoring - RUM) e sono indicatori di prestazioni fondamentali.
Per quanto riguarda la SEO, Core Web Vitals è uno dei pilastri dei segnali di posizionamento di Google legati all'esperienza di pagina. Un'infrastruttura di velocità ben ottimizzata fa sì che i visitatori restino più a lungo sul sito, riduce la frequenza di abbandono e aumenta direttamente il tasso di conversione. Se usate un sistema di gestione dei contenuti dinamico come WordPress, query al database, script esterni ed elementi multimediali possono far perdere prestazioni nel tempo. Per questo è necessario conoscere bene queste metriche e applicare le giuste ottimizzazioni.
Metriche principali: cosa significano LCP, CLS e INP?
Nel misurare l'esperienza utente, Google si concentra su tre aspetti fondamentali: velocità di caricamento, stabilità visiva e reattività alle interazioni. Questi tre pilastri oggi vengono monitorati con le metriche LCP, CLS e INP.
1. Largest Contentful Paint (LCP) - Velocità di caricamento percepita
L'LCP misura in quanto tempo il contenuto principale della pagina (di solito un'immagine grande, la copertina di un video o un ampio blocco di titolo) viene visualizzato sullo schermo. Rappresenta il momento in cui il visitatore percepisce la pagina come «caricata». Per una buona esperienza utente, l'LCP dovrebbe essere pari o inferiore a 2,5 secondi. I principali fattori di un punteggio LCP scarso sono i tempi di risposta lenti del server (TTFB), i file JavaScript e CSS che bloccano il rendering e le immagini enormi non ottimizzate.
2. Cumulative Layout Shift (CLS) - Stabilità visiva
Vi è mai capitato di leggere una pagina e, proprio mentre stavate per cliccare un pulsante, il contenuto è scivolato in basso facendovi premere un link indesiderato? Questo fastidioso fenomeno viene misurato dal CLS. Il CLS calcola gli spostamenti imprevisti degli elementi durante il caricamento della pagina. Un buon punteggio CLS deve essere inferiore a 0,1. Le immagini senza dimensioni predefinite, gli spazi pubblicitari caricati in un secondo momento e i widget esterni iniettati dinamicamente sono le cause principali degli spostamenti visivi.
3. Interaction to Next Paint (INP) - Reattività alle interazioni
L'INP sostituisce la metrica FID (First Input Delay) e valuta quanto rapidamente la pagina risponde visivamente a ogni clic, tocco o pressione di tasto dell'utente. Non considera solo la prima interazione, ma il ritardo complessivo di tutte le azioni che l'utente compie durante la visita. Per un buon punteggio INP, il ritardo di interazione deve restare sotto i 200 millisecondi. Le elaborazioni JavaScript pesanti e i comandi che bloccano il thread principale (main thread) peggiorano direttamente il valore INP.
| Metrica | Valore consigliato (buono) | Da migliorare | Scarso |
|---|---|---|---|
| LCP | ≤ 2,5 secondi | 2,5 - 4,0 secondi | > 4,0 secondi |
| CLS | ≤ 0,1 | 0,1 - 0,25 | > 0,25 |
| INP | ≤ 200 ms | 200 - 500 ms | > 500 ms |
Come migliorare Core Web Vitals sui siti WordPress
Sui siti basati su WordPress, per eliminare i debiti tecnici e portare i punteggi di velocità al verde occorre procedere un passo alla volta. Con una cache configurata correttamente e una struttura del codice leggera, i risultati si vedono in tempi brevi.
1. Tattiche per migliorare il punteggio LCP
Nell'ottimizzazione dell'LCP la priorità è far caricare rapidamente l'immagine principale in cima alla pagina (Hero image). Su questo elemento non va assolutamente applicato il «lazy load» (caricamento differito); al contrario, conviene chiederne il caricamento prioritario al browser con l'attributo fetchpriority="high". Inoltre:
- Preferite formati immagine di nuova generazione come WebP o AVIF.
- Inserite in linea (inline) i file CSS critici, così da ridurre le richieste bloccanti all'inizio della pagina.
- Usate un buon plugin di cache e una cache a oggetti come Redis o Memcached, per ridurre al minimo il tempo di risposta del server.
- Attivate una rete di distribuzione dei contenuti (CDN) per servire i file dal server più vicino agli utenti.
2. Metodi per portare il CLS vicino a zero
Evitare spostamenti improvvisi del layout richiede un codice estremamente ordinato. Potete applicare queste buone pratiche:
- Definite sempre i valori
widtheheightsu tutti i tag<img>e<video>. In questo modo il browser riserva lo spazio della pagina prima ancora di scaricare l'elemento. - Per gli spazi pubblicitari o i banner dinamici, definite in anticipo con il CSS un'altezza minima (min-height).
- Per evitare che il testo scompaia o cambi dimensione durante il caricamento dei web font, usate la regola CSS
font-display: swap;.
3. Ottimizzazione di JavaScript per ridurre l'INP
Sui siti WordPress, il miglioramento dell'INP è la sfida più impegnativa, perché temi e plugin eseguono spesso file JavaScript pesanti. Per rendere fluida l'interazione con la pagina:
- Rimuovete i file JavaScript inutilizzati o fate in modo che vengano caricati solo nelle pagine che ne hanno bisogno.
- Ritardate i contatori, le animazioni e i codici di tracciamento esterni non necessari (delay JS).
- Verificate che il tema sia scritto in modo moderno e pulito. Scegliere soluzioni di plugin e temi WordPress con prestazioni comprovate vi permette di mantenere gli standard di sviluppo e di liberare il sito da un carico eccessivo di plugin.
Strumenti per misurare e monitorare Core Web Vitals
Quando ottimizzate, è fondamentale basarsi su dati reali. I test istantanei nel browser possono differire dai dati reali degli utenti. Per il monitoraggio potete usare questi strumenti:
Google PageSpeed Insights: esegue una simulazione di laboratorio e mostra anche i dati reali degli utenti dal Chrome User Experience Report (CrUX) degli ultimi 28 giorni.
Google Search Console: nella scheda «Importanti dati web» del menu a sinistra elenca in blocco quali pagine sono scarse e quali sono in buone condizioni.
Estensione Chrome Web Vitals: mentre navigate nella pagina, mostra in tempo reale i valori di LCP, CLS e INP.
Domande frequenti
Core Web Vitals è un vero fattore di posizionamento di Google?
Sì, le metriche Core Web Vitals fanno parte ufficialmente dell'algoritmo di esperienza di pagina di Google. Tra due contenuti di qualità molto simile, Google tende a posizionare più in alto la pagina che funziona meglio dal punto di vista tecnico e non fa attendere l'utente.
Cosa misura esattamente l'INP che ha sostituito il FID?
La vecchia metrica FID si concentrava solo sul ritardo del primo clic nella pagina. L'INP, diventato definitivo da marzo 2024, misura il ritardo medio delle interazioni dell'utente per tutta la durata della visita (clic, apertura di menu, filtri).
Perché i punteggi Core Web Vitals su mobile e desktop sono diversi?
I dispositivi mobili hanno in genere una potenza di elaborazione più limitata, e le connessioni cellulari presentano una latenza (latency) più alta rispetto alla connessione via cavo o in fibra. Per questo i tempi di elaborazione di JavaScript sono più lunghi sui dispositivi mobili e i punteggi mobili risultano di solito più bassi di quelli desktop.
