Core Web Vitals in GSC — LCP FID CLS: Diagnostica e Ottimizzazione • Meteora Web Agency

Il tuo sito carica in 6 secondi? Google lo penalizza, e i tuoi clienti se ne vanno prima ancora di vedere la homepage. Parliamo di Core Web Vitals — non è un capriccio degli ingegneri di Mountain View, ma il metro con cui oggi si misura la qualità dell'esperienza utente. Noi di Meteora Web lo vediamo tutti i giorni: siti con LCP alto, CLS instabile, pulsanti che rispondono dopo 300 ms. Risultato? Posizioni perse e carrelli abbandonati.

Questa guida ti porta dritto al punto: cosa sono LCP, FID/INP e CLS, come leggerli in Google Search Console e soprattutto come risolverli. Niente teoria inutile — solo azioni che puoi applicare oggi.

Cosa Sono i Core Web Vitals e Perché Google Li Valuta?

I Core Web Vitals sono un insieme di metriche reali introdotte da Google per misurare l'esperienza utente su una pagina web. Sono tre:

LCP (Largest Contentful Paint) — quanto ci mette il contenuto principale a diventare visibile. Obiettivo: sotto 2.5 secondi.
FID (First Input Delay) — quanto tempo passa tra il primo clic dell'utente e la risposta del browser. Ora sostituito da INP (Interaction to Next Paint) da marzo 2024, ma in GSC trovi ancora FID. INP considera tutte le interazioni. Obiettivo: sotto 200 ms.
CLS (Cumulative Layout Shift) — quanto la pagina si sposta inaspettatamente mentre carica. Obiettivo: sotto 0.1.

Google li usa come fattore di ranking dal 2021. Un sito con Core Web Vitals scadenti perde traffico organico e conversioni. Non è una questione di “è meglio essere veloci” — è un requisito tecnico per competere. Noi veniamo dalla contabilità: se un investimento non ha ritorno, non lo fai. Ottimizzare i Core Web Vitals ha un ritorno diretto in visibilità e vendite.

Come Leggere i Report Core Web Vitals in Google Search Console?

In Search Console, la sezione “Core Web Vitals” (sotto “Esperienza”) raggruppa gli URL per stato: Buono (verde), Da migliorare (arancio) o Scarso (rosso).

La prima cosa da fare: apri il report e guarda i raggruppamenti. GSC non elenca pagina per pagina, ma per “gruppi di URL simili”. Clicca su uno stato “Scarso” per vedere quali metriche sono sotto soglia e su quale dispositivo (mobile/desktop).

Errore comune: ossessionarsi su una singola pagina. No — GSC segnala la tendenza. Se hai 200 URL “Scarso” sullo stesso template (es. articoli blog), il problema è nel tema o nel server, non nei singoli contenuti.

Dopo aver identificato il pattern, passa a PageSpeed Insights per ogni URL rappresentativo. Quel tool ti darà i dettagli tecnici: quale elemento è responsabile dell'LCP, quali script bloccano l'interazione, quali layout shift avvengono.

Come Migliorare LCP (Largest Contentful Paint) per un Sito più Veloce?

LCP è spesso il problema più comune nei progetti che ci arrivano. Ecco le tre leve principali.

Ottimizza le immagini

L'elemento LCP è quasi sempre un'immagine (hero, banner, primo prodotto). Se quella pesa 2 MB, il browser ci mette secoli a scaricarla. Noi, di Meteora Web, abbiamo ottimizzato le immagini di un cliente e-commerce riducendo il peso del 60% senza perdita di qualità. LCP è passato da 5.2 a 2.1 secondi.

Cosa fare subito:

Converti in WebP o AVIF (formati moderni con compressione superiore).
Usa il lazy loading solo per immagini secondarie, mai per l'LCP.
Imposta dimensioni esplicite (width e height) per evitare CLS.

Esempio di regola .htaccess per servire WebP quando supportato:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_URI} \.(jpe?g|png)$ [NC]
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
  RewriteRule ^(.*)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

Migliora il TTFB (Time to First Byte)

Se il server risponde lentamente, tutto il resto è inutile. TTFB sotto 200 ms è l'ideale. Le cause più comuni: hosting condiviso lento, PHP non ottimizzato, database pesante, assenza di cache.

Azioni concrete:

Passa a un hosting con CDN integrato e server in Italia (se il tuo pubblico è italiano).
Attiva la cache delle pagine (es. WP Rocket, Litespeed Cache, o Varnish).
Usa un DNS veloce (Cloudflare, Amazon Route 53).

Rimuovi le risorse che bloccano il rendering

CSS e JavaScript caricati in modo sincrono nella ritardano la visualizzazione del contenuto. Dobbiamo differire il JS non critico e inlineare il CSS critico (above the fold).

Strumenti utili: Critical CSS (genera il CSS minimo per la prima schermata), defer per script di terze parti (Google Analytics, pixel Facebook) con l'attributo defer o async.

Come Ottimizzare FID/INP (First Input Delay / Interaction to Next Paint)?

FID e INP misurano la reattività della pagina. Se un utente clicca su “Aggiungi al carrello” e il bottone impiega 500 ms a reagire, lo perdi.

La causa principale è JavaScript pesante o mal ottimizzato. Ogni script che il browser deve eseguire prima di poter rispondere a un input aumenta la latenza.

Riduci e differisci il JavaScript

Identifica gli script “long task” nel Performance tab di Chrome DevTools.
Usa code splitting per caricare solo lo stretto necessario alla prima interazione.
Sposta script analitici e widget social dopo il caricamento principale (con defer o caricandoli via Intersection Observer).

Ottimizza il tempo di esecuzione

A volte non è la quantità di JS, ma la complessità: cicli annidati, re-render di framework reattivi (React/Vue). In quei casi bisogna profilare e riscrivere porzioni critiche.

Noi, di Meteora Web, abbiamo costruito piattaforme proprietarie con Laravel e Vue, e su quelle ottimizziamo INP tenendo traccia delle interazioni e usando requestAnimationFrame per operazioni pesanti. Il consiglio: se il tuo sito ha un INP superiore a 200 ms, prima di tutto rimuovi plugin inutili (soprattutto in WordPress). Ogni plugin è una potenziale fonte di ritardo.

Come Ridurre il CLS (Cumulative Layout Shift) e la sua Instabilità Visiva?

Il CLS è quella fastidiosa sensazione di pagina che “salta” mentre carica. Succede quando immagini, annunci o iframe vengono caricati dopo il testo e spostano tutto.

Dimensioni esplicite per tutti i media

Ogni elemento <img>, <video>, <iframe> deve avere gli attributi width e height. Anche se usi CSS responsive, il browser riserva lo spazio prima di scaricare il file. Esempio:

<img src="prodotto.jpg" alt="Scarpe da ginnastica" width="800" height="600" style="max-width:100%; height:auto;">

Evita inserimenti dinamici sopra il fold

Banner pubblicitari, cookie consent, popup che compaiono dopo il caricamento causano shift. Puoi:

Riservare spazio (con min-height) per annunci o cookie bar.
Caricare i cookie consent inline con HTML statico invece di JS che spinge DOM dopo il paint.

Usa font-display: swap e preload per i font

I font personalizzati (Google Fonts, Typekit) spesso causano layout shift quando vengono caricati. Imposta font-display: swap nei CSS per mostrare subito un font di sistema e poi sostituirlo. Esempio:

@font-face {
  font-family: 'MiaFont';
  src: url('/font/miafont.woff2') format('woff2');
  font-display: swap;
}

E poi preload il font nel <head>:

<link rel="preload" href="/font/miafont.woff2" as="font" type="font/woff2" crossorigin>

Questo da solo può ridurre il CLS del 30-40% secondo la nostra esperienza su progetti WooCommerce.

Cosa Fare Adesso — Checklist Operativa per Core Web Vitals

Apri Google Search Console → sezione Core Web Vitals. Identifica il gruppo di URL “Scarso” e il problema (LCP, FID/INP, CLS).
Testa una pagina rappresentativa su PageSpeed Insights. Prendi nota dei suggerimenti specifici.
Ottimizza le immagini dell'LCP: convertile in WebP, riducile a dimensioni adeguate (max 1200px per hero).
Imposta dimensioni fisse su tutte le immagini, iframe e banner pubblicitari del sito.
Differisci o rimuovi script non essenziali (plugin social, tracker, chatbot). Ogni script in più è un rischio per FID/INP.
Verifica il TTFB: se supera 300 ms, passa a un hosting con CDN e cache di livello server.
Ripeti il test dopo una settimana: GSC si aggiorna con i dati reali degli utenti. Controlla se lo stato passa a “Buono”.

Se hai bisogno di una mano con l'analisi o l'implementazione, contattaci. Seguiamo aziende dal 2017: dal dominio al fatturato, un unico interlocutore. I Core Web Vitals sono solo uno dei tanti pezzi del puzzle SEO. Per un approfondimento completo su tutto ciò che puoi fare con Google Search Console, leggi la nostra guida pillar su Google Search Console avanzato.