Salta al contenuto
Performance Pubblicato il · ~12 min

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

I commenti sono moderati tramite Cusdis e hanno il solo scopo di arricchire l’articolo: resta in tema e aggiungi valore. Grazie!