Guida ai Core Web Vitals 2026 - Tutto ciò che devi sapere

Correggi LCP sotto i 2,5 secondi oggi. Per Core Web Vitals 2025, inizia con un audit preciso che individua gli elementi contentuali più grandi e mappa il loro percorso di caricamento dal server al rendering. Attualmente, misura LCP, CLS e INP utilizzando il monitoraggio degli utenti reali in parallelo con test sintetici per catturare sia le velocità reali che i casi limite, il che mantiene il tuo piano di ottimizzazione radicato nella realtà.

Adotta un piano olistico che copre l'ottimizzazione immagine, il caricamento degli script, la consegna CSS e le prestazioni del server. Questo approccio è ottimizzato per ridurre il blocco del rendering e annullare i ritardi con impatto negativo, aiutandoti a raggiungere gli obiettivi più velocemente e migliorare la soddisfazione dell'utente.

Per mantenere la stabilità e metriche prevedibili, usa asset con licenze aperte per semplificare la cache e il routing CDN attraverso le regioni. Questo approccio mantiene la consegna veloce sotto traffico burst e riduce l'attrito di approvvigionamento che rallenta i rilasci, supportando la stabilità attraverso gli ambienti.

Concentrati su cambiamenti basati sui dati: usa formati responsive, come i formati immagine AVIF/WebP, suggerimenti di dimensioni appropriate e lazy-loading per il contenuto off-screen. Questo riduce CLS e preserva il layout, rafforzando la relazione tra prestazioni e conversioni, che conta per la retention e i ricavi.

Nei compiti, specifically target il percorso di rendering critico: preload i font chiave, inline il CSS critico, deferisci il JavaScript non critico e monitora l'impatto con uno script di analisi leggero. Questo approccio, che mantiene i team allineati con il piano, produce miglioramenti misurabili.

Apri il tuo processo a un ciclo trasparente e guidato dai dati: imposta un obiettivo, monitora i progressi e itera. Inizia con uno sprint di 30 giorni e documenta i cambiamenti, poi pianifica un rollout graduale in produzione con un percorso di rollback in caso di regressioni.

Cosa misura CLS nel 2025 e come viene calcolato il punteggio attraverso i dispositivi

Riserva spazio per le immagini e gli embed per prevenire CLS. Usa aspect-ratio o altezza/larghezza esplicita per le immagini hero e i banner. Evita di iniettare nuovo contenuto sopra il contenuto esistente dopo il paint iniziale; se devi, usa un placeholder stabile. Quando gli aggiornamenti di contenuto dinamico, sostituiscilo sul posto invece di spostare il layout. Deferisci gli script non critici, specialmente i widget di terze parti, per ridurre il footprint sul thread principale. Per i siti saas, correggi l'area più visibile della pagina per mantenerla stabile mentre il contenuto si carica. I passaggi specifici includono riservare slot per annunci con dimensioni fisse, usare schermi skeleton, impostare frame poster per i video e abilitare il lazy loading per le immagini offscreen. Questo riduce l'overflow, preserva lo spazio e migliora la reattività per gli utenti attraverso i dispositivi.

Cosa misura CLS nel 2025

La metrica CLS traccia la stabilità visiva osservando spostamenti di layout imprevisti che si verificano durante il caricamento della pagina e l'interazione. Ogni spostamento ha una frazione di impatto (la porzione del viewport interessata) e una frazione di distanza (quanto si è spostato l'elemento). Gli spostamenti sono raggruppati in cluster; all'interno di un cluster, il punteggio dello spostamento più grande è contato verso il CLS, e il CLS finale è la somma di questi valori più grandi attraverso i cluster. Le soglie standard rimangono: buono ≤ 0.1, necessita miglioramento 0.1–0.25, scarso > 0.25. Nel 2025, il calcolo rimane lo stesso, ma i valori osservati variano per dispositivo: i viewport mobile sono più piccoli e le interazioni più guidate dal tocco, mentre i desktop offrono più spazio per il contenuto da spostare prima che diventi evidente. La cosa da ottimizzare è la stabilità visiva per hero, banner e contenuto embeddato, con spazio fisso e ordine di caricamento prevedibile. Se un banner o un video viene sostituito dopo il paint, quello spostamento singolo può snowball in un CLS più alto, quindi i placeholder contano.

Come viene calcolato il punteggio attraverso i dispositivi

Attraverso i dispositivi, il punteggio CLS usa lo stesso motore, ma i risultati riflettono il footprint del dispositivo, la densità di visualizzazione e le condizioni di rete. Sul mobile, CLS può aumentare quando il contenuto si sposta durante gli swap di font, il caricamento delle immagini o le iniezioni di annunci; sul desktop, gli spostamenti spesso riguardano banner grandi o widget dinamici che overflowano i loro container. Per ottenere risultati comparabili, testa attraverso larghezze rappresentative, da telefoni piccoli a desktop grandi, e raccogli dati di campo da utenti reali. Includi spazio per video e iframe, limita i container per evitare overflow e deferisci gli asset a caricamento lento. Per script di terze parti e dashboard saas, isola e deferisci il loro caricamento, o caricali dopo il contenuto critico per minimizzare l'instabilità del layout. Il risultato è un'esperienza più reattiva e stabile che corrisponde alle aspettative degli utenti attraverso i dispositivi e si allinea con la misurazione standard di Core Web Vitals, senza aggiungere footprint inutile al tuo motore. Questo non significa ignorare gli altri vitals; significa che CLS viene affrontato con correzioni precise e consapevoli del dispositivo che rimangono visibili agli utenti e ai motori di ricerca.

Individua i hotspot CLS con controlli rapidi e attuabili su qualsiasi pagina

Identifica il hotspot CLS principale sulla pagina web e avvia un test di 1-trial per verificare l'impatto di una correzione mirata; usa la dashboard per mostrare i contributi per elemento e concentrati sui migliori 2–4 colpevoli.

Fai clic destro sull'elemento sospetto e ispeziona il suo box model, poi confronta la sua dimensione prima e dopo il caricamento per vedere se uno spostamento di layout è guidato da un'immagine, iframe o iniezione dinamica. Se la dimensione cambia, sai che stai toccando la cosa che causa il picco CLS.

Per controlli specifici, guarda le immagini senza larghezza/altezza esplicita, annunci o embed senza spazio riservato, webfont a caricamento tardivo e contenuto iniettato sopra il contenuto esistente; ciascuno di questi può attivare problemi che influenzano negativamente i tassi CLS.

Sfrutta i tuoi strumenti per mostrare i contributi CLS per elemento, poi mappali al loro comportamento sulla pagina; questa tecnica ti aiuta a concentrarti oltre la congettura e adattare le correzioni che si adattano ai loro pattern. Usa il grafico per confrontare pagine diverse e identificare pattern comuni alle esperienze scarse attraverso le sezioni del sito.

Implementa correzioni pratiche prima: assegna dimensioni esplicite o aspect-ratio ai media, riserva spazio per slot annunci, preload i font chiave e deferisci gli script non critici; minifica CSS e JavaScript per prevenire task lunghi che ritardano il painting. Questo mantiene il codice snello e riduce il tempo di attesa per la stabilità del layout.

Sperimenta con un workflow chiaro: esegui un trial dopo ogni cambiamento, attendi una lettura CLS stabile e valida che il miglioramento resista sotto diverse condizioni di rete e dispositivi; documenta i risultati in una tabella semplice in modo che il loro team possa replicare i guadagni.

Scansiona per rischi malware che potrebbero iniettare contenuto spostante da widget di terze parti; valida le fonti e elimina qualsiasi script rischioso che gonfia gli spostamenti di layout, poi verifica i miglioramenti nella dashboard.

Durante la ricerca, usa segnali mirati per individuare hotspot rapidamente e valida le correzioni in un ambiente controllato; questo approccio disciplinato ti aiuta a sapere esattamente cosa regolare e cosa mantenere, mantenendo la tua pagina web veloce e prevedibile.

Hotspot	Cosa controllare	Impatto	Azione	Note
Immagini senza dimensioni	Cambiamenti di dimensione mentre le immagini si caricano	Alto CLS	Imposta larghezza/altezza o usa aspect-ratio; fornisci dimensione intrinseca	Migliore inline con attributi HTML
Annunci e embed	Nessuno spazio riservato per contenuto dinamico	Grandi spostamenti above fold	Riserva spazio con min-height o CSS; carica con async	Testa attraverso layout
Caricamento font	Swap di font tardivo altera le metriche	CLS moderato	Usa font-display: swap; preconnect ai host font	Sfrutta rendering testo più veloce
Contenuto dinamico above fold	Nuovo contenuto spinge il layout esistente	Impatto negativo	Pre-alloca spazio; inserisci sotto i percorsi critici	Prova un DOM iniziale più piccolo
Widget/iframe di terze parti	Contenuto esterno sposta il layout	Alto CLS	Isola con dimensione fissa; lazy-load quando possibile	Monitora per fonte
Animazioni CSS che influenzano il layout	Animazione di proprietà di layout	Picchi in CLS	Anima transform invece di proprietà di layout; semplifica	Controlla con tool perf

Correzioni pratiche: caricamento immagini, embed video e dimensionamento risorse

Preload l'immagine più prominente visivamente e il poster del video, poi lazy-load il resto per ridurre la banda sprecata e migliorare il caricamento percepito per i visitatori.

Queste modifiche contano per gli elementi che guidano la percezione dell'utente.

1. Immagini

   • Fornisci formati moderni (WebP/AVIF) e converti in base al supporto del dispositivo per ridurre le dimensioni dei file senza perdita di qualità.
   • Consegna fonti responsive con srcset e sizes; fornisci dimensioni di visualizzazione esplicite (larghezza/altezza) o aspect-ratio in modo che lo spazio sia riservato e CLS sia minimizzato.
   • Applica lazy loading per immagini offscreen (loading="lazy") e usa placeholder leggeri per mantenere la pagina visivamente stabile mentre gli asset si caricano.
   • Comprime e cache: abilita gzip sugli asset testuali e affidati a un CDN per accorciare gli url e la latenza edge, che accelera i fetch attraverso le location.

   Questo di solito produce payload più piccoli e tempi di caricamento più veloci per i visitatori.

   Monitora con devtools: ispeziona le richieste immagine, time-to-first-byte e waterfall di rete per imparare dove si accumulano chunk di tempo e byte, poi adatta budget e formati.

2. Embed video

   • Preferisci embed che streammano in chunk (HLS/DASH) e hosta su un CDN per servire solo ciò che è necessario per il dispositivo e la connessione corrente.
   • Fornisci un'immagine poster e dimensioni esplicite per posizionare l'embed senza reflow; disabilita l'autoplay e imposta playsinline e muted per rispettare l'esperienza utente.
   • Abilita lazy loading sugli iframe e evita l'auto-playing del suono; mantieni l'embed iniziale leggero e carica contenuto aggiuntivo sull'interazione dell'utente.
   • Offri un'opzione di fallback più semplice per dispositivi con banda limitata e confronta le prestazioni attraverso gli embed per imparare quale fonte consegna la migliore esperienza per la maggior parte dei visitatori.

3. Dimensionamento e consegna risorse

   • Code-split JavaScript e carica chunk non critici su richiesta per ridurre la contesa del thread e migliorare il paint iniziale.
   • Minifica CSS/JS e abilita gzip; considera brotli per una compressione ancora migliore su server supportati per restringere url e payload.
   • Limita il numero di script di terze parti e spostali fuori dal percorso critico; caricali dopo il contenuto principale per prevenire il blocco dei timer.
   • Preconnect alle origini e preload url font o API chiave per accelerare i fetch e ridurre i lookup DNS.
   • Imposta un budget di performance per byte totali JS/CSS e conteggio totale richieste; usa devtools e Lighthouse per tracciare le metriche e adattare di conseguenza.
   • Testa su diverse classi di dispositivi; misura LCP, CLS e TTI con timer per vedere come l'ottimizzazione influenza l'esperienza utente effettiva e punta a una reattività migliorata.
   • Questa ottimizzazione riduce i payload e migliora la reattività. Inoltre, condividi i risultati con gli sviluppatori per mantenere i miglioramenti basati su dati reali e trend.

Caricamento font, contenuto dinamico e strategie di stabilità del layout

Preload i primi due file font usati per il primo schermo e imposta font-display: swap per prevenire il blocco. Questo rende il testo visibile prima e migliora il tempo di rendering effettivo sulla mobile-friendliness. Usa uno strumento per verificare l'impatto nella tua dashboard e misurando la metrica che conta per la percezione dell'utente: LCP, CLS e il comportamento post-caricamento. Limita i font a certi pesi essenziali; questo riduce il loro footprint di dimensione e il numero di chunk, che aiuta i ranking e l'esperienza utente finale su schermi grandi. La comprensione di come il caricamento font interagisce con il layout è critica per entrambe le esperienze desktop e mobile.

Migliori pratiche per il caricamento font

Seleziona famiglie di font in modo conservativo: 1–2 famiglie, 2–3 pesi max, e preferisci woff2. Usa un font variabile quando possibile per ottimizzare il numero di chunk e la dimensione. Preload solo i font critici e affidati ai fallback di sistema per il contenuto non critico per evitare il blocco. Testa attraverso i dispositivi e usa la tua dashboard per confrontare le misurazioni e assicurare che la metrica rimanga favorevole; Google valuta la mobile-friendliness e il rendering stabile nei ranking. Considera il caricamento font come un percorso senza blocco che migliora la leggibilità e l'UX finale, poi seleziona ottimizzazioni che si adattano al profilo del tuo sito.

Contenuto dinamico e stabilità del layout

Riserva spazio fisso per contenuto dinamico come annunci o raccomandazioni usando attributi larghezza/altezza o aspect-ratio CSS per prevenire spostamenti di layout. Usa skeleton o placeholder shimmer per guidare gli utenti mentre il contenuto si carica post-paint, e inietta widget non critici dopo il rendering iniziale. Applica containment (contain: layout) per limitare i reflow e mantenere il footprint piccolo. Quando il contenuto appare, distribuiscilo in chunk invece di tutto in una volta e testa con variazioni casuali per assicurare la stabilità. Traccia CLS come metrica dashboard e confronta contro gli obiettivi per proteggere i ranking e il comportamento utente su dispositivi mobile. Questo approccio migliora la comodità e la mobile-friendliness complessiva mantenendo il layout finale stabile e prevedibile.

Tracciamento CLS: budget, dashboard e audit di routine del sito

Definisci un budget CLS: target 0.1 per pagine web individuali e 0.25 per un gruppo di pagine, e imponilo attraverso gli sprint. Assegna un proprietario per ogni elemento e integra alert nelle dashboard in modo che i rilasci mostrino numeri migliorati rapidamente.

Dove misurare: scheda Performance di devtools del browser, il report core web vitals di Lighthouse e dati di campo dal Chrome User Experience Report. Esegui anche test sintetici per riempire i gap nei segnali real-user, dandoti una vista olistica di una pagina web core attraverso dispositivi e reti.

Il design della dashboard si concentra su visibilità e azione: traccia CLS per URL, per sezione e per dispositivo; emergi il numero di spostamenti di layout, CLS medio e un grafico di distribuzione. Aggiungi linee di trend e flag per picchi, e includi esempi: immagini senza dimensioni, caricamento font tardivo e contenuto dinamico, per guidare le correzioni. Un layout olistico connette CLS con caricamento e interattività per mostrare come l'UX migliora quando gli spostamenti calano.

Gli audit di routine del sito stabiliscono disciplina: ispeziona quotidianamente i cambiamenti di layout durante il caricamento e i momenti di interazione con devtools, verifica gli asset che arrivano tardi e logga i risultati. Audit settimanali target pagine sopra il budget e assegna proprietari; revisioni mensili approfondiscono asset, slot annunci e swap font per prevenire futuri spostamenti.

I suggerimenti di implementazione guidano guadagni duraturi: riserva spazio per immagini, video e banner usando attributi larghezza/altezza o aspect-ratio; preload font e limita lo swapping font; preferisci animazioni che si basano su transform e opacità piuttosto che proprietà che influenzano il layout; mantieni gli stili critici all'inizio dell'ordine di caricamento e lint stili per evitare spostamenti imprevisti. Abbiamo visto esperienze migliorate quando i team adottano un approccio responsabile e ripetibile al tracciamento CLS attraverso dev, staging e produzione.