?>

Core Web Vitals spiegati: LCP, INP, CLS – Guida completa per principianti (2026)

Core Web Vitals sono l’insieme di metriche incentrate sull’utente di Google che misurano l’esperienza reale della pagina. Sono fattori di ranking dal 2021, e nel 2026 sono più importanti che mai – superarli può migliorare direttamente i tuoi ranking di ricerca e i tassi di conversione. Questa guida spiega ogni metrica, come misurarli e esattamente come risolvere i problemi comuni.

Perché i Core Web Vitals contano (Il business case)

• Le pagine che superano i Core Web Vitals hanno il 24% di probabilità in meno di essere abbandonate.
• Un miglioramento di 0,5 s del LCP può aumentare le conversioni del 12–15% (caso di studio Google).
• Core Web Vitals scadenti sono un fattore di spareggio – se due pagine hanno rilevanza simile, la pagina più veloce e stabile si posiziona più in alto.

Se il tuo sito non supera una qualsiasi delle tre metriche, stai lasciando soldi e posizionamenti sul tavolo.

Le tre Core Web Vitals – Analisi dettagliata

1. LCP (Largest Contentful Paint) – Velocità di caricamento

Cosa misura: Il tempo necessario per visualizzare l’elemento visibile più grande (immagine hero, titolo, video). Buono: meno di 2,5 secondi. Scarso: oltre 4 secondi.

Perché è importante: Gli utenti percepiscono la velocità in base a quando appare il contenuto principale. Un LCP lento dà la sensazione di un sito rotto.

Cause comuni di un LCP scarso:

• Immagini hero grandi (> 200 KB).
• Tempo di risposta lento del server (TTFB > 600 ms).
• CSS o JavaScript che bloccano il rendering.
• Rendering lato client (React/Vue) che ritarda la visualizzazione.

2. INP (Interaction to Next Paint) – Reattività

Cosa misura: Il tempo tra un’interazione dell’utente (clic, tocco, pressione di un tasto) e il successivo aggiornamento visivo. Buono: meno di 200 millisecondi. Ha sostituito FID nel 2024.

Perché è importante: Un INP lento fa sembrare il tuo sito lento. L’utente fa clic su un pulsante e non succede nulla – presume che sia rotto.

Cause comuni di un INP scarso:

• Attività JavaScript lunghe che bloccano il thread principale (> 50 ms).
• Gestori di eventi pesanti su ogni interazione.
• Script di terze parti (analytics, widget chat) eseguiti durante l’interazione.

3. CLS (Cumulative Layout Shift) – Stabilità visiva

Cosa misura: La quantità di spostamento inaspettato del layout (movimento) degli elementi visibili. Buono: meno di 0,1. Scarso: oltre 0,25.

Perché è importante: I contenuti che si spostano fanno perdere la posizione agli utenti, li portano a fare clic accidentalmente sugli annunci o li frustrano. È un fallimento diretto dell’esperienza utente.

Cause comuni di un CLS scarso:

• Immagini o video senza `width` e `height` esplicite.
• Font che si caricano in ritardo e spostano il testo.
• Contenuto iniettato dinamicamente (annunci, banner) che spinge verso il basso il contenuto esistente.

Come misurare i Core Web Vitals del tuo sito

• Dati da campo (utenti reali, determinano il ranking): Google Search Console → rapporto Core Web Vitals. Anche CrUX (Chrome User Experience Report).
• Dati di laboratorio (simulati, per il debug): PageSpeed Insights, Lighthouse in DevTools, WebPageTest.

Concentrati sui dati da campo per l’impatto sul ranking, ma usa i dati di laboratorio per trovare e risolvere i problemi.

Risolvere un LCP scarso – Passo dopo passo

1. Ottimizza le immagini hero

Converti in WebP, comprimi con strumenti come Squoosh o ImageOptim. Usa `srcset` per servire immagini di dimensioni appropriate per dispositivo.

<code>&lt;img src="hero-800.webp" srcset="hero-400.webp 400w, hero-800.webp 800w" sizes="(max-width: 600px) 400px, 800px" width="800" height="500" fetchpriority="high" alt="Hero"&gt;</code>

2. Precarica l’elemento LCP

<code>&lt;link rel="preload" as="image" href="hero.webp" fetchpriority="high"&gt;</code>

3. Migliora il TTFB (Time to First Byte)

• Usa un VPS invece di hosting condiviso.
• Abilita PHP‑FPM con OPcache.
• Implementa l’indicizzazione del database e la cache (Redis o Memcached).
• Considera una CDN (Cloudflare, Bunny.net) per la distribuzione globale.

4. Elimina le risorse che bloccano il rendering

Incorpora il CSS critico in linea, posticipa il CSS non critico e aggiungi `defer` o `async` ai file JavaScript.

<code>&lt;style&gt; /* CSS critico */ &lt;/style&gt;<br>&lt;link rel="preload" href="full.css" as="style" onload="this.rel='stylesheet'"&gt;<br>&lt;script defer src="analytics.js"&gt;&lt;/script&gt;</code>

Risolvere un INP scarso – Analisi approfondita della reattività

1. Suddividi le attività JavaScript lunghe

<code>function heavyTask() {<br>  let i = 0;<br>  function chunk() {<br>    const start = performance.now();<br>    while (i < items.length && performance.now() - start < 5) {<br>      process(items[i]);<br>      i++;<br>    }<br>    if (i < items.length) setTimeout(chunk, 0);<br>  }<br>  chunk();<br>}</code>

2. Ottimizza i gestori di eventi

<code>addEventListener('scroll', () => { ... }, { passive: true });</code>

3. Rimuovi o posticipa gli script di terze parti

<code>document.getElementById('chat-trigger').addEventListener('click', () => {<br>  const script = document.createElement('script');<br>  script.src = 'https://chatwidget.com/script.js';<br>  document.head.appendChild(script);<br>});</code>

Risolvere un CLS scarso – Eliminare gli spostamenti di layout

1. Aggiungi larghezza/altezza esplicita a tutti i media

<code>&lt;img src="image.webp" width="800" height="500"&gt;</code>

2. Riserva spazio per i font

<code>@font-face {<br>  font-family: 'Inter';<br>  font-display: swap;<br>  /* ... */<br>}</code>

3. Evita di inserire contenuti sopra il contenuto esistente

Se devi mostrare un banner o una notifica, riserva spazio utilizzando un div segnaposto con altezza fissa.

WordPress vs PHP personalizzato per Core Web Vitals

I siti PHP personalizzati ottengono costantemente punteggi più alti perché non c’è gonfiore di plugin, sovraccarico di temi o JavaScript forzato. Un’installazione predefinita di WordPress spesso fallisce il CLS a causa della barra di amministrazione che sposta il contenuto per gli utenti connessi (anche se i visitatori non la vedono). Con PHP personalizzato, controlli ogni byte. Puoi incorporare CSS critico in linea, precaricare esattamente ciò che è necessario ed evitare completamente gli spostamenti di layout.

Caso di studio reale: Da insufficiente a sufficiente in 7 giorni

Un’azienda di servizi domestici aveva un sito WordPress con Core Web Vitals scadenti: LCP 4,2 s, INP 540 ms, CLS 0,29. Abbiamo migrato il front‑end in un sito statico PHP personalizzato (mantenendo il backend esistente per le prenotazioni).

Azioni intraprese:

• Immagine hero convertita in WebP e precaricata.
• CSS critico incorporato in linea per la sezione hero e la navigazione.
• Tutto JavaScript spostato su `defer` o caricato dopo l’interazione dell’utente.
• Dimensioni esplicite impostate su tutte le immagini e gli iframe.

Risultati dopo 1 settimana (dati da campo da GSC):

• LCP: 4,2 s → 1,1 s (superato).
• INP: 540 ms → 98 ms (superato).
• CLS: 0,29 → 0,02 (superato).
• Traffico organico: +34% dopo 60 giorni (grazie ai miglioramenti del ranking).

Il cliente ora non paga costi correnti per i plugin e possiede il codice snello e veloce.

Piano d’azione passo dopo passo per risolvere i tuoi Core Web Vitals

1. Misura lo stato attuale – Esegui PageSpeed Insights. Annota LCP, INP, CLS per dispositivi mobili.
2. Risolvi i problemi facili – Comprimi le immagini, abilita la cache, usa una CDN.
3. Se LCP > 2,5 s: Precaria l’immagine hero, incorpora il CSS critico in linea, migliora la risposta del server.
4. Se INP > 200 ms: Suddividi le attività JS lunghe, posticipa gli script di terze parti, ottimizza i gestori di eventi.
5. Se CLS > 0,1: Aggiungi dimensioni a tutti i media, usa `font-display: swap`, evita di inserire contenuti dinamici sopra la piega.
6. Ripeti il test e monitora – Utilizza il rapporto Core Web Vitals di Google Search Console per monitorare i dati reali degli utenti nel tempo.

Se sei su WordPress, considera di passare a un tema leggero (GeneratePress, Kadence), rimuovere i plugin non necessari e utilizzare un plugin come Perfmatters o FlyingPress. Ma la soluzione definitiva è un sito PHP personalizzato costruito per le prestazioni.

Pronto a superare i Core Web Vitals e migliorare i tuoi ranking?

Costruisco siti PHP personalizzati che ottengono 100 su Lighthouse e superano tutti i Core Web Vitals immediatamente. Paghi una tariffa unica – nessun abbonamento, nessun costo nascosto. Risolverò anche i Core Web Vitals del tuo sito esistente se non sei pronto a migrare.

Parliamo del tuo sito – fornirò un audit gratuito dei Core Web Vitals.

Dati provenienti da progetti clienti reali e casi di studio pubblicati da Google. I risultati individuali possono variare.