Performance • SEO • Pubblicato il 25 ottobre 2024 • 12 min lettura

Core Web Vitals: Guida Completa per Ottimizzare il Tuo Sito

LCP, FID, CLS: cosa sono i Core Web Vitals, perché Google li usa come fattore di ranking e come ottimizzarli per raggiungere punteggi 90+ su PageSpeed Insights. Guida pratica con esempi reali.

Cosa Sono i Core Web Vitals

I Core Web Vitals sono un insieme di metriche definite da Google per misurare l'esperienza utente reale su un sito web. Dal 2021 sono ufficialmente un fattore di ranking per la SEO.

Le tre metriche principali sono:

  • LCP (Largest Contentful Paint): Velocità di caricamento
  • FID (First Input Delay): Interattività
  • CLS (Cumulative Layout Shift): Stabilità visiva

1. LCP - Largest Contentful Paint

Cos'è

Il LCP misura il tempo necessario per rendere visibile l'elemento più grande della viewport (immagine, video, blocco di testo).

Soglie:

  • ✅ Buono: ≤ 2,5 secondi
  • ⚠️ Da migliorare: 2,5 - 4 secondi
  • ❌ Scarso: > 4 secondi

Cause Comuni di LCP Lento

  1. Immagini hero non ottimizzate: PNG/JPG pesanti invece di WebP
  2. Server lento: TTFB (Time To First Byte) > 600ms
  3. Render-blocking resources: CSS/JS che bloccano il rendering
  4. Lazy loading errato: Immagini above-the-fold con lazy loading

Come Ottimizzare LCP

1. Ottimizza Immagini

<!-- ❌ Male -->
<img src="hero.jpg" alt="Hero">

<!-- ✅ Bene -->
<img src="hero.webp" 
     srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
     sizes="100vw"
     alt="Hero" 
     width="1200" 
     height="600"
     fetchpriority="high">

2. Usa CDN e Caching

  • CDN: Cloudflare, BunnyCDN (riduce latenza geografica)
  • Browser caching: Cache-Control headers per asset statici
  • Server caching: Redis, Varnish per contenuti dinamici

3. Preload Risorse Critiche

<link rel="preload" href="hero.webp" as="image">
<link rel="preload" href="font.woff2" as="font" crossorigin>

4. Riduci TTFB

  • Hosting performante (VPS > shared hosting)
  • Database ottimizzato (indici, query efficienti)
  • Minifica HTML/CSS/JS

2. FID - First Input Delay (ora INP)

Cos'è

Il FID misura il tempo tra la prima interazione dell'utente (click, tap) e la risposta del browser. Da marzo 2024 Google usa INP (Interaction to Next Paint) al posto di FID.

Soglie INP:

  • ✅ Buono: ≤ 200 ms
  • ⚠️ Da migliorare: 200 - 500 ms
  • ❌ Scarso: > 500 ms

Cause Comuni di FID/INP Alto

  1. JavaScript pesante: Bundle JS > 500KB
  2. Long tasks: Script che bloccano il main thread > 50ms
  3. Third-party scripts: Analytics, chat, ads non ottimizzati

Come Ottimizzare FID/INP

1. Code Splitting

// ❌ Male: carica tutto subito
import { everything } from './huge-library';

// ✅ Bene: carica solo quando serve
const module = await import('./module-when-needed');

2. Defer JavaScript Non Critico

<!-- ❌ Male -->
<script src="analytics.js"></script>

<!-- ✅ Bene -->
<script src="analytics.js" defer></script>

3. Web Workers per Task Pesanti

// Sposta calcoli pesanti in background
const worker = new Worker('heavy-task.js');
worker.postMessage(data);
worker.onmessage = (e) => console.log(e.data);

4. Riduci Third-Party Scripts

  • Usa Google Tag Manager per caricare script in modo asincrono
  • Rimuovi plugin/widget non essenziali
  • Self-host font invece di Google Fonts

3. CLS - Cumulative Layout Shift

Cos'è

Il CLS misura la stabilità visiva della pagina: quanto gli elementi si spostano durante il caricamento.

Soglie:

  • ✅ Buono: ≤ 0,1
  • ⚠️ Da migliorare: 0,1 - 0,25
  • ❌ Scarso: > 0,25

Cause Comuni di CLS Alto

  1. Immagini senza dimensioni: Browser non sa quanto spazio riservare
  2. Ads/embed dinamici: Banner che "spingono" il contenuto
  3. Font FOIT/FOUT: Flash of Invisible/Unstyled Text
  4. Animazioni CSS: Transizioni che spostano layout

Come Ottimizzare CLS

1. Specifica Sempre Width/Height Immagini

<!-- ❌ Male -->
<img src="photo.jpg" alt="Foto">

<!-- ✅ Bene -->
<img src="photo.jpg" alt="Foto" width="800" height="600">

2. Riserva Spazio per Ads/Embed

/* Riserva altezza minima per banner */
.ad-container {
    min-height: 250px;
    background: #f0f0f0;
}

3. Usa font-display per Font Custom

@font-face {
    font-family: 'Inter';
    src: url('inter.woff2') format('woff2');
    font-display: swap; /* Mostra fallback subito */
}

4. Evita Inserimenti Dinamici Above-the-Fold

  • Non inserire banner/notifiche che spostano contenuto
  • Usa `transform` invece di `top/left` per animazioni

Strumenti per Misurare Core Web Vitals

1. Google PageSpeed Insights

URL: https://pagespeed.web.dev/

  • ✅ Dati reali (Field Data) da Chrome UX Report
  • ✅ Dati lab (Lab Data) simulati
  • ✅ Suggerimenti specifici per ottimizzare

2. Google Search Console

Report "Esperienza" → Core Web Vitals

  • ✅ Dati reali visitatori del tuo sito
  • ✅ Raggruppamento per URL simili
  • ✅ Storico performance

3. Lighthouse (Chrome DevTools)

F12 → Lighthouse → Genera report

  • ✅ Test locale immediato
  • ✅ Simulazione mobile/desktop
  • ✅ Audit accessibilità e SEO inclusi

4. Web Vitals Extension

Estensione Chrome che mostra metriche in tempo reale durante la navigazione.

Checklist Ottimizzazione Completa

Immagini

  • ☐ Converti JPG/PNG in WebP (80-90% compressione)
  • ☐ Genera srcset responsive (3-4 dimensioni)
  • ☐ Aggiungi width/height a tutte le immagini
  • ☐ Lazy load immagini below-the-fold
  • ☐ Preload immagine hero con fetchpriority="high"

CSS

  • ☐ Minifica CSS (cssnano, clean-css)
  • ☐ Inline CSS critico above-the-fold
  • ☐ Defer CSS non critico
  • ☐ Rimuovi CSS inutilizzato (PurgeCSS)

JavaScript

  • ☐ Minifica JS (Terser, UglifyJS)
  • ☐ Defer/async script non critici
  • ☐ Code splitting per bundle > 200KB
  • ☐ Rimuovi librerie inutilizzate
  • ☐ Usa Web Workers per task pesanti

Font

  • ☐ Self-host font (no Google Fonts CDN)
  • ☐ Usa WOFF2 (compressione migliore)
  • ☐ Preload font critici
  • ☐ font-display: swap per evitare FOIT
  • ☐ Subset font (solo caratteri usati)

Server

  • ☐ TTFB < 600ms (hosting performante)
  • ☐ HTTP/2 o HTTP/3 abilitato
  • ☐ Gzip/Brotli compression
  • ☐ Browser caching (1 anno asset statici)
  • ☐ CDN per asset globali

Caso Reale: Prima e Dopo

Sito e-commerce prima dell'ottimizzazione:

  • LCP: 4,8s ❌
  • FID: 180ms ✅
  • CLS: 0,35 ❌
  • PageSpeed Score: 42/100

Interventi:

  1. Convertito 120 immagini prodotto in WebP (-65% peso)
  2. Aggiunto width/height a tutte le immagini
  3. Defer JavaScript analytics e chat
  4. Preload font WOFF2
  5. Migrato da shared hosting a VPS

Risultati dopo 2 settimane:

  • LCP: 1,9s ✅ (-60%)
  • FID: 85ms ✅
  • CLS: 0,08 ✅ (-77%)
  • PageSpeed Score: 94/100
  • Bonus: Conversion rate +18%, bounce rate -12%

Errori Comuni da Evitare

  1. Lazy load immagini above-the-fold: Peggiora LCP
  2. Troppi font custom: Ogni font aggiunge 100-200ms
  3. Ignorare mobile: 70% traffico è mobile, testa sempre mobile-first
  4. Plugin WordPress eccessivi: Ogni plugin aggiunge JS/CSS
  5. Non testare dopo modifiche: Verifica sempre con PageSpeed Insights

Conclusioni

I Core Web Vitals non sono solo un fattore SEO, ma migliorano concretamente l'esperienza utente e le conversioni. Un sito veloce e stabile:

  • Riduce bounce rate del 10-30%
  • Aumenta tempo permanenza del 20-40%
  • Migliora conversion rate del 10-20%
  • Ottiene ranking migliori su Google

Obiettivo realistico: Punteggio PageSpeed 90+ su mobile e desktop entro 2-4 settimane di ottimizzazioni.

Hai Bisogno di Ottimizzare le Performance del Tuo Sito?

Posso aiutarti a raggiungere punteggi Core Web Vitals eccellenti e migliorare le conversioni del tuo sito.

Servizi performance:

  • Audit performance completo
  • Ottimizzazione immagini e asset
  • Refactoring codice per velocità
  • Setup CDN e caching
  • Monitoraggio continuo performance
Richiedi Audit Performance Gratuito