Cosa sono i Core Web Vitals
I Core Web Vitals sono un insieme di metriche che misurano aspetti chiave dell'esperienza utente: LCP (Largest Contentful Paint), INP (Interaction to Next Paint) e CLS (Cumulative Layout Shift). Google utilizza queste metriche come segnali per la qualità della pagina e, in parte, per la visibilità nella Ricerca.
- LCP: tempo di visualizzazione dell'elemento di contenuto più grande (target ≤ 2,5s).
- INP: reattività complessiva alle interazioni (target ≤ 200ms).
- CLS: stabilità visiva (target ≤ 0,1).
Misurazione: campo e laboratorio
Per una valutazione accurata, combina dati di laboratorio e dati di campo:
- PageSpeed Insights e Lighthouse per test in lab e suggerimenti.
- CrUX (Chrome UX Report) e Search Console per dati reali degli utenti.
- Web Vitals library per misurare direttamente in produzione.
import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(console.log);
onINP(console.log);
onCLS(console.log);
Ottimizzare LCP
- Ottimizza immagini critiche (dimensioni, formato moderno, preload dell'immagine LCP).
- Usa font-display: swap e preconnect ai CDN necessari.
- Riduci i blocchi render (CSS critico inline, differisci script non necessari).
Ottimizzare INP
- Riduci il carico JS (code splitting, lazy-load, rimuovi codice morto).
-
Evita long tasks spostando lavoro pesante in
requestIdleCallback
o Web Worker. - Usa debounce/throttle per eventi ad alta frequenza.
Ottimizzare CLS
-
Riserva spazio per immagini/annunci con attributi
width
/height
o aspect-ratio. - Evita l'iniezione di contenuti sopra il fold dopo il caricamento.
- Usa lazy loading per media fuori dallo schermo.
Checklist rapida
- Preload LCP image e font critici.
- Code splitting e defer degli script non critici.
- Allocazione spazio per media e componenti dinamici.
- Monitoraggio continuo con Web Vitals in produzione.
FAQ
Quali sono le soglie “buone”?
LCP ≤ 2,5s; INP ≤ 200ms; CLS ≤ 0,1. Mantieni almeno il 75% delle visite entro questi valori.
Da dove iniziare?
Misura con PageSpeed Insights e Search Console, poi intervieni su immagine LCP, riduzione JS e riserva spazi per media.
Commenti
- Categoria: Performance
- Aggiornato: