Core Web Vitals: velocità della pagina e segnali UX per SEO

Cosa sono i core web vitals

I core web vitals sono un insieme di metriche specifiche e misurabili che Google utilizza per valutare l’esperienza utente reale sulle pagine web. Introdotti come segnali di ranking nel 2021 e aggiornati da allora (sostituendo il primo ritardo di input con interazione a Next Paint nel 2024), si concentrano su tre aspetti dell’esperienza della pagina che contano di più per gli utenti: quanto velocemente il contenuto principale si carica, quanto rapidamente la pagina risponde all’interazione dell’utente e quanto visivamente stabile la pagina è durante il caricamento.

Queste metriche non sono teoriche: vengono misurate utilizzando dati reali degli utenti dal Chrome User Experience Report (CrUX), che aggrega i dati delle prestazioni anonimizzati dai browser Chrome. Ciò significa che i punteggi di Core Web Vitals riflettono il modo in cui i visitatori reali sperimentano il tuo sito, non solo come si comporta in un test di laboratorio.

La più grande pittura ricca (LCP)

LCP misura quanto tempo ci vuole per il più grande elemento di contenuto visibile (tipicamente un’immagine eroe, un titolo o un blocco di testo) per completare il rendering. È un proxy per la velocità di caricamento percepita: quando l’utente si sente come se la pagina fosse stata caricata? Il bersaglio è inferiore a 2,5 secondi.

Problemi comuni di LCP

Tempi di risposta lenti del server, JavaScript e CSS che bloccano il rendering, immagini non ottimizzate (formato troppo grande e errato) e caricamento lento delle risorse da server di terze parti sono le cause più comuni di LCP scadente.

Come migliorare LCP

Ottimizzare il tempo di risposta del server (considerare l’aggiornamento dell’hosting o l’aggiunta di una CDN). Caricare risorse critiche come immagini e font degli eroi. Utilizzare i formati di immagine moderni (WebP, AVIF) e le immagini di dimensioni in modo appropriato. Minimizzare le risorse di blocco del rendering rimandando CSS e JavaScript non critici. Implementa il caricamento pigro per le immagini sotto la piega in modo che il browser dia priorità al contenuto che gli utenti vedono per primi.

Interazione con la vernice successiva (INP)

INP misura la reattività di una pagina alle interazioni dell’utente (clic, tocchi, tasti) per tutto il tempo in cui la pagina è aperta. Il report riporta la latenza di interazione peggiore osservata, riflettendo la velocità con cui la pagina risponde alle azioni dell’utente. L’obiettivo è sotto i 200 millisecondi.

Problemi INP comuni

Le attività JavaScript di lunga durata che bloccano il thread principale, i gestori di eventi pesanti, le dimensioni eccessive del DOM e i calcoli di layout sincrono durante le interazioni con l’utente contribuiscono a punteggi INP scadenti.

Come migliorare l’INP

Rompere lunghe attività JavaScript in piccoli blocchi utilizzando tecniche come requestIdleCallback oppure setTimeout per restituire il controllo al browser. Minimizzare la complessità degli event handler. Ridurre le dimensioni del DOM. Utilizzare i lavoratori web per calcoli pesanti che non hanno bisogno di accedere al DOM. Ottimizza gli script di terze parti che vengono eseguiti sull’interazione.

Spostamento cumulativo di layout (CLS)

CLS misura la stabilità visiva: quanto il layout della pagina cambia inaspettatamente man mano che il contenuto si carica. Hai mai letto un articolo e il testo salta giù perché un annuncio o un’immagine caricata sopra di esso? Questo è il cambiamento di layout, ed è frustrante per gli utenti. L’obiettivo è sotto 0,1.

Problemi comuni di CLS

Immagini e annunci senza dimensioni specificate, contenuto iniettato dinamicamente sopra il contenuto esistente, font web che causano il riflusso del testo quando vengono caricati (FOUT/FOIT), e widget di terze parti in ritardo di caricamento sono le cause più comuni.

Come migliorare il CLS

Specificare sempre gli attributi di larghezza e altezza su immagini e video (o utilizzare la funzione aspect-ratio CSS) in modo che il browser si riserva spazio prima di caricarli. Riserva spazio per annunci e incorporazioni. Uso font-display: swap con il precaricamento dei caratteri per ridurre al minimo i cambiamenti di layout relativi ai font. Evitare di inserire contenuti al di sopra dei contenuti esistenti a meno che non siano attivati da un’interazione dell’utente.

Misurazione del core web Vitals

Dati di campo vs. dati di laboratorio

I dati di campo provengono da utenti reali (Chrome UX Report, Google Search Console, sezione dati di campo di PageSpeed Insights). I dati di laboratorio provengono da carichi di pagina simulati (Lighthouse, dati di laboratorio di PageSpeed Insights, WebPageTest). Google utilizza i dati di campo per il ranking, ma i dati di laboratorio sono utili per diagnosticare e eseguire il debug di problemi specifici. Dare sempre priorità ai dati di campo quando si valutano le prestazioni effettive.

Strumenti

Il report di Google Search Console Core Web Vitals mostra lo stato del tuo sito. PageSpeed Insights fornisce sia dati di campo che di laboratorio per i singoli URL. Lighthouse (in Chrome DevTools) fornisce misurazioni dettagliate di laboratorio e raccomandazioni specifiche. L’estensione Web Vitals Chrome mostra i punteggi CWV in tempo reale mentre navighi. Strumenti di terze parti come Screaming Frog e SEMrush possono controllare CWV in tutto il tuo sito.

Web Vitals e SEO Rankings

I core web vitals fanno parte del sistema di ranking dell’esperienza di pagina di Google, che include anche la facilità di navigazione, HTTPS e l’assenza di interstiziali intrusivi. L’esperienza della pagina è un segnale tiebreaker: quando due pagine sono simili per qualità e pertinenza dei contenuti, quella con una migliore esperienza della pagina probabilmente si posiziona più in alto. Non è un fattore dominante che sovrascrive la qualità del contenuto, ma può essere la differenza tra la posizione quattro e la posizione sette.

L’implicazione pratica è che i core web vitals sono più importanti per le query competitive in cui le piccole differenze di ranking hanno un impatto significativo sul traffico. Correggere CWV poveri è improbabile che prenda una pagina mediocre dalla pagina cinque alla pagina uno, ma può dare una pagina forte il bordo di cui ha bisogno per superare concorrenti altrettanto forti.

Un approccio pratico

Inizia controllando i tuoi core web vitali in Google Search Console. Identificare pagine o modelli di pagina che non riescono una o più metriche. Concentrati sulla metrica che colpisce prima la maggior parte delle pagine. Implementa correzioni, distribuisci e monitora i dati degli utenti reali nelle settimane successive per verificare il miglioramento. CWV non è una soluzione una tantum, ma una pratica di performance in corso, soprattutto quando si aggiungono nuovi contenuti, funzionalità e integrazioni di terze parti che possono regredire i punteggi.

Gli script di terze parti e il loro impatto

Gli script di terze parti sono spesso i più grandi killer di prestazioni sui siti Web moderni. Strumenti di analisi, tag pubblicitari, widget dei social media, widget di chat, strumenti di test A / B e pixel di tracciamento caricano tutti JavaScript che compete per il thread principale del browser. Ogni script aggiunge peso alla pagina, aumenta il tempo di rendering e può causare cambiamenti di layout e ritardi di interazione.

Verifica dell’impatto di terze parti

Utilizza il pannello di rete di Chrome DevTools e il riepilogo di terze parti di Lighthouse per identificare quali script esterni vengono caricati, quanti dati vengono trasferiti e quanto tempo impiegano per l’esecuzione. Potresti trovare script da strumenti che non usi più, tag di tracciamento duplicati o script che potrebbero essere caricati in modo asincrono invece di bloccare il rendering della pagina.

Strategie di mitigazione

Caricare script di terze parti non critici con l’attributo async o def. in modo che non blocchino il rendering della pagina. Utilizzare un tag manager per controllare quando gli script vengono caricati e su quali pagine. Implementa il caricamento pigro per i widget di chat e le incorporazioni social in modo che vengano caricati solo quando l’utente scorre verso di loro o interagisce con un trigger. Rimuovi tutti gli script che non ti servono più. Per gli script rimanenti, valuta se il valore aziendale che forniscono giustifica il loro costo di prestazioni.

Ottimizzazione delle immagini in profondità

Le immagini sono in genere le risorse più pesanti su una pagina web e la causa più comune di punteggi LCP poveri. Una strategia di ottimizzazione delle immagini completa affronta il comportamento di formato, dimensioni, compressione e caricamento.

Formati moderni

WebP offre dimensioni di file significativamente più piccole rispetto a JPEG e PNG con qualità comparabile. AVIF offre una compressione ancora migliore ma ha meno supporto per il browser. Utilizzare l’elemento immagine o la negoziazione di contenuti per servire i formati moderni ai browser che li supportano mentre si torna a JPEG per i browser più vecchi. La maggior parte dei CDN e dei servizi di ottimizzazione delle immagini gestiscono automaticamente la conversione del formato.

Immagini reattive

Servire immagini di dimensioni adeguate per ogni dispositivo. Un’immagine eroe di 3000 pixel visualizzata su uno schermo mobile di 375 pixel spreca la larghezza di banda su pixel che non vengono mai visti. Utilizzare gli attributi srcset e dimensioni per dire al browser quale file immagine scaricare in base alla larghezza della finestra. Questa singola ottimizzazione può ridurre drasticamente il trasferimento dei dati sui dispositivi mobili.

Carico pigro

Aggiungi il loading="lazy" attributo alle immagini sotto la piega in modo che il browser le scarichi solo mentre l’utente scorre verso di loro. Non caricare pigro immagini nella finestra iniziale (sopra la piega), come questo ritarda LCP. Per l’immagine eroe o l’immagine del contenuto principale, utilizzare loading="eager" (o omettere l’attributo del tutto) e considerare di precaricarlo con un tag rel ? precarica per un rendering più veloce.

Ottimizzazione dei caratteri

I font Web possono causare due problemi di prestazioni: il rendering ritardato del testo (gli utenti vedono uno spazio vuoto in cui il testo dovrebbe essere fino al caricamento del font) e i turni di layout (riflusso del testo quando un font Web sostituisce un font di sistema). Entrambi i problemi riguardano Core Web Vitals.

Uso font-display: swap nelle dichiarazioni del carattere per mostrare immediatamente il testo in un carattere di riserva mentre il carattere web viene caricato. Carica i file di carattere più importanti con link rel ? precaricato per iniziare a scaricarli prima. Sottoimposta i tuoi font per includere solo i caratteri che usi realmente (ad esempio i caratteri latini invece dell’intera gamma Unicode). Host font locali piuttosto che caricarli da Google Font se si desidera il massimo controllo sul comportamento di caching e caricamento.

Vitali Web di base per le applicazioni a pagina singola

Le applicazioni a pagina singola (SPA) create con React, Vue o Angular presentano sfide uniche per il Web Vitals. La navigazione lato client non attiva nuovi carichi di pagina, quindi la misurazione tradizionale CWV cattura solo il carico iniziale della pagina. Tuttavia, le prestazioni percepite dall’utente durante la navigazione in-app sono ancora importanti per l’esperienza utente.

Per il caricamento iniziale della pagina, assicurarsi che il rendering lato server (SSR) o la generazione statica del sito (SSG) in modo che il primo contenuto significativo venga visualizzato rapidamente senza attendere l’esecuzione di JavaScript. Code-split l’applicazione in modo che gli utenti solo scaricare il JavaScript necessario per la visualizzazione iniziale. Pezzi a livello di percorso di carico pigro in modo che le pagine successive carichino su richiesta. Monitora attentamente le metriche degli utenti reali perché gli strumenti di laboratorio spesso sottovalutano l’impatto CWV di grandi applicazioni JavaScript.

Flusso di lavoro di ottimizzazione CWV per i team

Migliorare il core web richiede spesso il coordinamento tra sviluppatori, designer, team di contenuti e marketing. Stabilire un flusso di lavoro chiaro: il marketing identifica le pagine con la priorità più elevata (in base al traffico, alle conversioni e ai punteggi CWV attuali), il team di sviluppo diagnostica i problemi specifici utilizzando strumenti di laboratorio e dati utente reali, i progettisti regolano layout e risorse per soddisfare gli obiettivi di prestazioni e il team di contenuti garantisce l’ottimizzazione delle immagini e il supporto della struttura dei contenuti per il caricamento rapido.

Impostare i budget di prestazioni per ogni modello di pagina: peso massimo totale della pagina, dimensione massima JavaScript, numero massimo di richieste e punteggi CWV di destinazione. Integrate i test delle prestazioni nella pipeline di distribuzione in modo che le regressioni vengano rilevate prima che raggiungano la produzione. Trattare le prestazioni come una caratteristica, non un ripensamento, includendo i target CWV nei requisiti per ogni nuovo modello di pagina o funzionalità.

Il caso aziendale per Core Web Vitals

Oltre alle classifiche SEO, il miglioramento di Core Web Vitals ha un impatto diretto sul business. Le pagine più veloci riducono i tassi di rimbalzo, aumentano le pagine per sessione e migliorano i tassi di conversione. Diversi studi su larga scala condotti da Google e da altre aziende hanno dimostrato correlazioni tra miglioramenti della velocità delle pagine e aumenti dei ricavi. Mentre l’impatto esatto varia a seconda del settore e del modello di business, la direzione è coerente: pagine più veloci, più reattive e visivamente più stabili ottengono risultati migliori in base a ogni metrica aziendale.

Miglioramenti CWV in termini di business quando si sostengono le risorse. Invece di “dobbiamo ridurre il nostro LCP da 4,2 secondi a 2,4 secondi”, diciamo “migliorare la velocità di caricamento della pagina per soddisfare gli standard di Google potrebbe ridurre la nostra frequenza di rimbalzo e migliorare i tassi di conversione, sulla base dei benchmark del settore per migliorare la velocità nella nostra verticale”. La metrica tecnica è importante; il risultato aziendale motiva gli investimenti.