Core Web Vitals: La Guida Pratica per Siti Veloci

Cosa sono i Core Web Vitals

I Core Web Vitals sono un insieme di metriche introdotte da Google per misurare l'esperienza utente reale di un sito web. Dal 2021 sono un fattore di ranking ufficiale: siti con Core Web Vitals buoni hanno un vantaggio nel posizionamento rispetto a quelli con metriche scarse.

Nel 2026, le tre metriche che compongono i Core Web Vitals sono:

• LCP (Largest Contentful Paint): velocita di caricamento.
• INP (Interaction to Next Paint): reattivita alle interazioni.
• CLS (Cumulative Layout Shift): stabilita visiva.

Nota: INP ha sostituito FID (First Input Delay) nel marzo 2024. Se trovi guide che parlano ancora di FID, sono obsolete.

LCP: Largest Contentful Paint

LCP misura quanto tempo impiega il contenuto principale della pagina a diventare visibile. In pratica, e il momento in cui l'utente vede qualcosa di utile sullo schermo.

Le soglie

• Buono: meno di 2.5 secondi
• Da migliorare: tra 2.5 e 4 secondi
• Scarso: oltre 4 secondi

Cosa influenza l'LCP

L'elemento LCP e tipicamente l'immagine principale, un video hero o un blocco di testo grande. I fattori che lo rallentano:

• Server lento: Un Time to First Byte (TTFB) alto ritarda tutto il resto. Scegli un hosting veloce con server in Italia o Europa.
• Immagini non ottimizzate: Un'immagine hero da 3 MB rallenta enormemente. Usa formati moderni (WebP, AVIF) e dimensioni appropriate.
• CSS e JS che bloccano il rendering: Fogli di stile e script caricati nella head bloccano la visualizzazione fino al completamento.
• Font web lenti: Font caricati da server esterni senza preconnect possono ritardare il testo.

Come ottimizzare l'LCP

1. Precarica l'immagine LCP: Aggiungi <link rel="preload" as="image" href="hero.webp"> nella head.
2. Comprimi le immagini: Usa Squoosh, SharpJS o un CDN con ottimizzazione automatica. Target: meno di 200 KB per l'immagine hero.
3. Usa un CDN: Cloudflare (gratuito) o Fastly riducono la latenza servendo i contenuti dal server piu vicino all'utente.
4. Inline il CSS critico: Il CSS necessario per il contenuto above-the-fold va inline nella pagina, il resto caricato in modo asincrono.
5. Font display swap: Usa font-display: swap per mostrare il testo con un font di sistema mentre il web font si carica.

INP: Interaction to Next Paint

INP misura la reattivita del sito alle interazioni dell'utente. Quando un utente clicca un bottone, seleziona un menu o digita in un campo, INP misura il tempo tra l'input e l'aggiornamento visivo successivo.

Le soglie

• Buono: meno di 200 millisecondi
• Da migliorare: tra 200 e 500 millisecondi
• Scarso: oltre 500 millisecondi

Cause comuni di INP alto

• JavaScript pesante: Script che bloccano il main thread impediscono al browser di rispondere agli input.
• Event handler lenti: Funzioni JavaScript eseguite al click che fanno calcoli pesanti o manipolazioni DOM complesse.
• Third-party script: Analytics, chat widget, pixel di tracciamento e social embed possono rallentare significativamente.
• Rendering complesso: Pagine con migliaia di elementi DOM o animazioni CSS complesse.

Come ottimizzare l'INP

1. Riduci il JavaScript: Rimuovi librerie inutilizzate, usa il tree-shaking e il code splitting.
2. Usa requestIdleCallback: Sposta le operazioni non critiche ai momenti in cui il browser e inattivo.
3. Lazy load i third-party: Carica analytics e widget solo dopo l'interazione dell'utente o dopo il caricamento della pagina.
4. Debounce gli event handler: Per eventi frequenti (scroll, resize, input), usa debounce per limitare le esecuzioni.
5. Riduci la complessita DOM: Meno di 1.500 nodi DOM totali, profondita massima 32 livelli.

CLS: Cumulative Layout Shift

CLS misura la stabilita visiva della pagina. Hai presente quando stai per cliccare un link e improvvisamente il layout si sposta e clicchi qualcos'altro? Quello e un layout shift, ed e una delle esperienze utente piu frustranti.

Le soglie

• Buono: meno di 0.1
• Da migliorare: tra 0.1 e 0.25
• Scarso: oltre 0.25

Cause comuni di CLS alto

• Immagini senza dimensioni: Se non specifichi width e height, il browser non sa quanto spazio riservare e il layout si sposta quando l'immagine si carica.
• Banner pubblicitari: Ad che si caricano dopo il contenuto spostano tutto verso il basso.
• Font web: Il passaggio dal font di sistema al web font puo causare un flash di testo che cambia dimensione (FOUT).
• Contenuto iniettato dinamicamente: Notifiche, cookie banner o widget che appaiono spostando il contenuto esistente.

Come ottimizzare il CLS

1. Specifica sempre le dimensioni: Aggiungi attributi width e height a ogni immagine e video, oppure usa aspect-ratio in CSS.
2. Riserva spazio per gli ad: Usa container con dimensioni fisse per gli spazi pubblicitari.
3. Usa font-display optional: Questo evita completamente il FOUT, mostrando il web font solo se gia in cache.
4. Cookie banner overlay: Il cookie banner deve essere un overlay (position fixed), non un elemento che spinge il contenuto.
5. Avoid inserting content above existing content: Se devi aggiungere contenuto dinamico, fallo sotto la viewport visibile o usa animazioni di espansione.

Come misurare i Core Web Vitals

Google offre diversi strumenti, ciascuno con un uso specifico:

• PageSpeed Insights (pagespeed.web.dev): Il punto di partenza. Mostra sia dati di laboratorio che dati reali (dal Chrome User Experience Report). Analizza una pagina alla volta.
• Google Search Console: Report "Core Web Vitals" che mostra lo stato di tutte le pagine del tuo sito, raggruppate per tipologia. Usa dati reali degli utenti (field data).
• Chrome DevTools (tab Performance): Per analisi dettagliate in fase di sviluppo. Permette di identificare esattamente cosa causa problemi.
• Web Vitals Extension: Estensione Chrome che mostra LCP, INP e CLS in tempo reale mentre navighi il tuo sito.
• Lighthouse: Audit completo integrato in Chrome DevTools. Fornisce suggerimenti specifici per ogni problema trovato.

Consiglio pratico: Usa PageSpeed Insights per una panoramica rapida, Google Search Console per monitorare nel tempo, e Chrome DevTools per il debugging dettagliato.

L'impatto reale sul posizionamento

I Core Web Vitals sono un fattore di ranking confermato, ma non sono l'unico. Google li usa come "tiebreaker": a parita di qualita dei contenuti e autorita, il sito con migliori Core Web Vitals vince. Per una strategia SEO completa, i Core Web Vitals sono necessari ma non sufficienti.

L'impatto indiretto, pero, e enorme. Un sito veloce ha:

• Frequenza di rimbalzo piu bassa (gli utenti restano di piu).
• Tasso di conversione piu alto (fino al 70% in piu secondo Deloitte).
• Piu pagine viste per sessione.
• Migliore percezione del brand.

Checklist rapida per Core Web Vitals perfetti

1. Testa il sito su PageSpeed Insights e annota i punteggi attuali.
2. Ottimizza le immagini: formato WebP/AVIF, compressione, lazy loading, dimensioni specificate.
3. Precarica l'elemento LCP (immagine hero o font principale).
4. Riduci e differisci il JavaScript non critico.
5. Lazy load i third-party script (analytics, chat, social embed).
6. Specifica dimensioni per tutti i media e ad slot.
7. Usa un CDN per ridurre la latenza.
8. Monitora settimanalmente in Google Search Console.

Quando realizziamo un sito web professionale, tutte queste ottimizzazioni sono integrate nel processo di sviluppo, garantendo Core Web Vitals eccellenti fin dal lancio.