I Core Web Vitals non sono solo un argomento da nerd. Dal 2024, Google li usa come segnale di ranking reale sulle query commerciali, e l’impatto sulla conversione è misurabile: un sito che passa da 4 secondi a 2 secondi di LCP guadagna tipicamente tra il 10 e il 25% di conversione mobile. Questa guida spiega precisamente le tre metriche attuali, come misurarle e come ottimizzarle su PrestaShop e WordPress nel 2026.
I tre Core Web Vitals da conoscere
LCP — Largest Contentful Paint
L’LCP misura il tempo tra l’inizio del caricamento della pagina e la comparsa dell’elemento visibile più grande nella finestra. Su un negozio e-commerce, questo elemento è quasi sempre un’immagine: la foto principale del prodotto su una scheda, l’hero della homepage, l’immagine banner della categoria.
Target ufficiali Google:
- Buono: meno di 2,5 secondi
- Da migliorare: tra 2,5 e 4 secondi
- Cattivo: oltre 4 secondi
CLS — Cumulative Layout Shift
Il CLS misura la stabilità visiva della pagina durante il suo caricamento. Concretamente: un pulsante che si sposta dopo che l’utente ha iniziato a cliccare, un’immagine che spinge il contenuto verso il basso arrivando tardivamente, un banner cookie che sposta tutto. Più il punteggio è basso, meglio è.
- Buono: meno di 0,1
- Da migliorare: tra 0,1 e 0,25
- Cattivo: oltre 0,25
INP — Interaction to Next Paint
L’INP ha sostituito il FID (First Input Delay) nel marzo 2024. Misura il ritardo tra l’interazione dell’utente (clic, tap, digitazione) e la risposta visibile del browser, sull’insieme delle interazioni della sessione — non solo la prima.
- Buono: meno di 200 ms
- Da migliorare: tra 200 e 500 ms
- Cattivo: oltre 500 ms
L’INP è più esigente del FID perché include tutte le interazioni, non solo la prima. I siti che superavano a malapena il FID falliscono spesso l’INP, soprattutto WooCommerce con i suoi script di variazione e aggiunta al carrello in AJAX.
Come misurare i propri Core Web Vitals
Quattro strumenti complementari:
- PageSpeed Insights (gratuito, di Google) — fornisce un punteggio sintetico con raccomandazioni specifiche. Distingue dati «lab» (test simulato) e «field» (reali, basati su Chrome User Experience Report)
- Lighthouse (integrato in Chrome DevTools) — audit completo in locale, utile per identificare i colli di bottiglia
- Google Search Console → Esperienza → Core Web Vitals — vista aggregata del tuo sito basata sui dati reali degli utenti Chrome
- WebPageTest — test dettagliato con waterfall e scelta della connessione
Importante: i dati «lab» di un test isolato non riflettono ciò che vivono i tuoi utenti. I dati «field» in Search Console sono più rappresentativi. Sono questi che contano per Google.
Ottimizzare l’LCP
Identificare l’elemento LCP
In Lighthouse, la sezione Largest Contentful Paint element indica precisamente quale elemento della tua pagina è l’LCP. Su una scheda prodotto PrestaShop o WooCommerce, è quasi sempre la foto principale.
Ottimizzare le immagini
Tre azioni essenziali:
- Convertire in WebP o AVIF — riduce la dimensione del file del 30-60% senza perdita visibile. Su PrestaShop, moduli dedicati eseguono la conversione automatica. Su WordPress, plugin come ShortPixel, Imagify o Smush.
- Servire le dimensioni corrette — non inviare un’immagine di 2000 × 2000 per uno spazio di 400 × 400. Usa
srcsetesizesper servire l’immagine adatta a ogni viewport. - Precaricare l’immagine LCP — aggiungi
<link rel="preload" as="image">nel<head>per l’immagine principale. Il browser la scarica con priorità assoluta.
Attivare una cache HTTP
Su PrestaShop: cache Smarty + cache full-page tramite un modulo o un reverse-proxy come Varnish. Su WordPress: un plugin di cache (LiteSpeed Cache se il tuo server gira su LiteSpeed Web Server, altrimenti WP Rocket). Il guadagno di LCP con una cache HTTP correttamente configurata è tipicamente di 1-2 secondi.
Usare una CDN
Cloudflare, BunnyCDN, o una CDN integrata al tuo hosting. Per le tue immagini, video e asset statici. Riduce l’LCP degli utenti geograficamente lontani dal tuo server.
Ottimizzare il CLS
Il CLS è spesso il più semplice da correggere. Tre azioni principali:
Specificare sempre width e height sulle immagini
Il browser ha bisogno di riservare lo spazio dell’immagine prima che venga caricata. Senza dimensioni, lo spazio riservato è nullo e il contenuto sottostante si sposta quando l’immagine arriva.
<img src="prodotto.webp" width="800" height="600" alt="..." />Il rapporto delle dimensioni è ciò che conta. Il browser userà CSS per adattarsi alla dimensione reale di visualizzazione, ma riserverà uno spazio con il ratio corretto.
Riservare lo spazio di banner e popup
Le striscie cookie, popup newsletter, banner di urgenza in cima alla pagina creano CLS se si iniettano dopo il caricamento. Soluzioni: renderizzarli lato server (HTML già presente al caricamento, solo reso visibile da CSS), o riservare l’altezza in CSS fin dall’inizio.
Caricare i font web correttamente
I FOUT (Flash of Unstyled Text) e FOIT (Flash of Invisible Text) provocano CLS quando il font di sostituzione e il font finale hanno dimensioni diverse. Soluzioni: font-display: swap con un fallback ben scelto (dimensione vicina), precaricamento dei font critici con <link rel="preload">, o uso di font-size-adjust per allineare le metriche.
Ottimizzare l’INP
L’INP è il più difficile dei tre. Dipende dalla qualità del JavaScript eseguito quando l’utente interagisce con la pagina.
Ridurre il JavaScript bloccante
Audita i tuoi script di terze parti: analytics, chat, A/B test, retargeting, popup. Ognuno aggiunge tempo di esecuzione sul thread principale. Sii spietato: se uno script non genera ricavi misurabili, eliminalo.
Per gli script mantenuti: caricali in defer o async quando possibile. I tag di tracking possono quasi sempre essere differiti.
Suddividere il JavaScript in pezzi
Sui siti con molto JS, il code splitting (caricare solo il codice necessario per la pagina corrente) riduce l’INP. Su PrestaShop 8 con i suoi bundle, è limitato — su WordPress con plugin pesanti, è spesso un’ottimizzazione importante.
Ottimizzare le interazioni
Le interazioni comuni che affondano l’INP:
- Aggiunta al carrello (su WooCommerce in particolare)
- Applicazione di una variazione prodotto
- Ricerca in un megamenù con autocompletamento
- Applicazione di un filtro in un listing prodotto
Per ognuna, l’ottimizzazione passa dal profiling Chrome (tab Performance) per identificare le funzioni lente, poi dal loro refactoring.
Specifico PrestaShop
Su PrestaShop, le azioni più redditizie:
- Attivare la cache Smarty e la combinazione/minificazione degli asset in Parametri avanzati → Performance
- Compilare i template Smarty e disattivare la ricompilazione ad ogni visita
- Usare un modulo di generazione di CSS critico per l’above-the-fold
- Auditare i moduli di terze parti: un solo modulo mal codificato può aggiungere 500 ms di tempo server
Specifico WordPress / WooCommerce
Su WordPress, le azioni principali:
- Plugin di cache obbligatorio (LiteSpeed Cache, WP Rocket, W3 Total Cache)
- Audit dei plugin: disattivare ed eliminare quelli non utilizzati
- Conversione massiva delle immagini in WebP tramite ShortPixel o equivalente
- Limitare gli script WooCommerce sulle pagine dove non servono (homepage, articoli del blog) — un plugin come Asset CleanUp permette questo
- Hosting serio: su un hosting condiviso di fascia bassa, non supererai mai un punteggio Lighthouse mobile di 50
Gli errori frequenti
- Ottimizzare solo il punteggio Lighthouse desktop. Il mobile è ciò che conta per Google.
- Ignorare i dati field a favore dei dati lab
- Installare 5 plugin di cache «per sicurezza» — si scontrano e il risultato è peggiore
- Comprimere a morte le immagini al punto di renderle brutte — punta al 75-85% di qualità, non più basso
- Bloccare il JavaScript essenziale per eccesso di zelo (il pulsante aggiunta carrello non funziona più)
Per andare oltre
Tutti i nostri articoli dedicati alla performance sono raccolti nella categoria Performance & Core Web Vitals. Per le soluzioni tecniche, esplora i nostri moduli SEO PrestaShop che includono ottimizzazioni Core Web Vitals (generazione CSS critico, lazy loading avanzato, conversione WebP). Un negozio veloce è un negozio che converte — è probabilmente il miglior investimento tecnico del 2026.