Core Web Vitals e conversioni: come la velocità impatta le vendite del tuo e-commerce

Nel 2010, Amazon calcolò che ogni 100ms di latenza aggiuntiva costava l'1% delle vendite. Nel 2023, uno studio di Portent indica che i siti che caricano in 1 secondo convertono 3 volte meglio di quelli che caricano in 5 secondi. La correlazione tra velocità e conversioni non è un'ipotesi teorica: è un fatto documentato con dati reali.

I Core Web Vitals sono il modo in cui Google misura la velocità percepita da un utente reale. Capire cosa misurano, come interpretarli e dove intervenire è la prima competenza tecnica che chi gestisce un e-commerce dovrebbe sviluppare.

Le tre metriche che contano

LCP, Largest Contentful Paint

Misura il tempo necessario per renderizzare l'elemento più grande visibile nella viewport iniziale. Tipicamente è l'immagine hero, un video, o un blocco di testo grande.

Soglie Google:

• Buono: < 2,5 secondi
• Da migliorare: 2,5 – 4 secondi
• Scarso: > 4 secondi

L'LCP è la metrica che gli utenti percepiscono come "il sito sta caricando". Un LCP alto significa che l'utente fissa uno schermo bianco o parzialmente caricato per secondi preziosi.

INP, Interaction to Next Paint

Ha sostituito FID (First Input Delay) come metrica ufficiale nel marzo 2024. Misura la reattività del sito alle interazioni dell'utente: quanto tempo passa tra il click su un pulsante e la risposta visiva del browser.

Soglie Google:

• Buono: < 200ms
• Da migliorare: 200 – 500ms
• Scarso: > 500ms

In un e-commerce, un INP alto si manifesta come click sul pulsante "Aggiungi al carrello" che sembrano non rispondere, o filtri di ricerca che impiegano secondi a reagire.

CLS, Cumulative Layout Shift

Misura la stabilità visiva della pagina: quanto gli elementi si spostano durante il caricamento. Il CLS alto è quell'esperienza frustrante in cui stai per cliccare un pulsante e la pagina si sposta all'ultimo momento.

Soglie Google:

• Buono: < 0,1
• Da migliorare: 0,1 – 0,25
• Scarso: > 0,25

In un e-commerce può causare click accidentali su prodotti sbagliati, tap su "Acquista" quando si voleva tornare indietro, frustrazione che porta all'abbandono.

L'impatto sulle conversioni: i numeri

• +1 secondo di LCP: correlato a una riduzione del 7% delle conversioni (Google/Deloitte study, 2020)
• Da 1s a 3s: la probabilità di rimbalzo aumenta del 32% (Google data)
• Da 1s a 6s: la probabilità di rimbalzo aumenta del 106%
• Siti con LCP "buono" hanno un tasso di conversione 24% più alto di quelli con LCP "scarso" (Web Almanac 2023)

Questi dati sono correlazioni, non causalità diretta. Ma la direzione è chiara e consistente attraverso fonti diverse: la velocità conta, specialmente su mobile dove le connessioni sono variabili e gli utenti meno pazienti.

Come misurare

PageSpeed Insights (pagespeed.web.dev) è il punto di partenza. Inserisci l'URL di una pagina prodotto e della homepage. Mostra sia i dati di campo (come si comporta realmente per gli utenti Google Chrome) sia i dati di laboratorio (simulazione controllata) con suggerimenti specifici.

Google Search Console, sezione "Esperienza della pagina", mostra lo stato dei Core Web Vitals per tutte le pagine del sito aggregate. È l'unica fonte che mostra i dati reali dei tuoi utenti su larga scala.

Chrome DevTools, tab Performance, permette di registrare e analizzare il comportamento della pagina in dettaglio. Utile per diagnosi approfondite.

I problemi più comuni negli e-commerce

Immagini non ottimizzate. Immagini prodotto in PNG da 2-5MB invece di WebP o AVIF ottimizzati sono la causa principale di LCP alto. Ogni immagine dovrebbe essere nelle dimensioni reali di visualizzazione, compressa, e in formato moderno.

JavaScript eccessivo. App di terze parti (chat, tracking, recensioni, upsell), script di marketing, widget: ogni script aggiuntivo pesa sul thread principale del browser e peggiora l'INP. Audit regolari del JavaScript caricato sono essenziali.

Font blocking. Google Fonts o font custom caricati in modo bloccante ritardano il rendering. La soluzione è il preloading dei font critici e l'uso di font-display: swap.

Layout shift da immagini. Immagini senza dimensioni esplicite (width e height nell'HTML) causano CLS perché il browser non sa quanto spazio riservare. La correzione è semplice ma richiede revisione sistematica dei template.

Caricamento laziness mal configurato. Il lazy loading delle immagini è utile per quelle sotto la fold, ma applicarlo anche all'immagine hero degrada l'LCP. L'immagine principale deve avere loading="eager" e idealmente un <link rel="preload">.

Checklist di ottimizzazione

• Convertire tutte le immagini in WebP o AVIF
• Aggiungere width/height espliciti a ogni tag <img>
• Preloadare l'immagine LCP critica
• Lazy loading solo per immagini sotto la fold
• Audit degli script di terze parti: rimuovere quelli non usati, differire quelli non critici
• Font critici preloaded, con font-display: swap
• CSS critico inline (above the fold), CSS non critico caricato in modo asincrono
• Verificare che nessun elemento si sposti durante il caricamento (banner, cookie banner, ads)
• Testare su connessione simulata 4G mobile, non solo desktop fibra

Migliorare i Core Web Vitals non è un progetto una tantum: è una pratica continuativa. Ogni nuova funzionalità, ogni app aggiuntiva, ogni immagine caricata nel CMS senza ottimizzazione può degradare le metriche. Integrare il monitoraggio delle performance nel flusso di sviluppo è l'unico modo per mantenerle stabili nel tempo.