# Core Web Vitals: la guida completa per PrestaShop e WordPress nel 2026 > La guida completa ai Core Web Vitals (LCP, CLS, INP) per PrestaShop e WordPress nel 2026: misurazione, ottimizzazione, strumenti, errori frequenti. - Pagina: - Lingua: it - Pubblicato il: 2026-05-01 - Aggiornato il: 2026-10-10 - Altre lingue: [fr](https://www.datafirefly.com/2026/05/01/core-web-vitals-guide-prestashop-wordpress-2026/index.md), [en](https://www.datafirefly.com/en/2026/05/01/core-web-vitals-prestashop-wordpress-guide-2026/index.md), [es](https://www.datafirefly.com/es/2026/05/01/core-web-vitals-guia-prestashop-wordpress-2026/index.md), [de](https://www.datafirefly.com/de/2026/05/02/core-web-vitals-leitfaden-prestashop-wordpress-2026/index.md), [pl](https://www.datafirefly.com/pl/2026/05/01/core-web-vitals-przewodnik-prestashop-wordpress-2026/index.md), [nl](https://www.datafirefly.com/nl/2026/05/01/core-web-vitals-gids-prestashop-wordpress-2026/index.md), [pt](https://www.datafirefly.com/pt/2026/05/01/core-web-vitals-guia-completo-prestashop-wordpress-2026/index.md) - Indice: 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: 1. **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_. 2. **Servire le dimensioni corrette** — non inviare un'immagine di 2000 × 2000 per uno spazio di 400 × 400. Usa `srcset` e `sizes` per servire l'immagine adatta a ogni viewport. 3. **Precaricare l'immagine LCP** — aggiungi `` nel `` 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. ``` ... ``` 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 ``, 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](https://www.datafirefly.com/it/category/prestazioni-core-web-vitals/). Per le soluzioni tecniche, esplora i nostri [moduli SEO PrestaShop](https://www.datafirefly.com/it/categorie-produit/moduli-prestashop/seo-indicizzazione/) 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. Da leggere anche: [la checklist tecnica LCP, INP, CLS](https://www.datafirefly.com/it/2026/05/09/performance-prestashop-8-checklist-core-web-vitals-2026-lcp-inp-cls-2/), [cache, Critical CSS e immagini next-gen](https://www.datafirefly.com/it/2026/06/15/core-web-vitals-2026-ottimizzare-prestashop-cache-critical-css-immagini/) e [video prodotto e Core Web Vitals](https://www.datafirefly.com/it/2026/06/02/video-prodotto-conversione-vs-core-web-vitals-prestashop-8-2026-2/). Per passare all'azione: le nostre selezioni di moduli per accelerare il negozio [su PrestaShop](https://www.datafirefly.com/it/solutions/prestashop/performance-velocita/) e [su WooCommerce](https://www.datafirefly.com/it/solutions/wordpress/prestazioni-velocita/).