Segni vitali: padroneggiare INP e CWV
I Core Web Vitals stanno cambiando. Google si preoccupa dell'interazione con Next Paint. Come profiliamo e ottimizziamo le attività di blocco del thread principale.
I Core Web Vitals (CWV) di Google sono la metrica definitiva per la salute del web. Nel 2025, l’attenzione si è spostata interamente su INP (Interaction to Next Paint). Il FID (First Input Delay) è morto.
Cos’è l’INP?
INP misura la reattività del tuo sito dopo che è stato caricato. Quando l’utente fa clic su “Apri menu”, quanti millisecondi passano prima che il menu si sposti effettivamente? Se la CPU è impegnata nell’analisi di uno script di tracciamento da 2 MB, il menu non si sposterà. L’utente avverte “ritardo”.
Strategie di ottimizzazione
1. Cedere al filo conduttore
Suddividiamo le attività lunghe utilizzando scheduler.yield() o setTimeout.
Invece di elaborare 1.000 prodotti in un ciclo (bloccando l’interfaccia utente per 500 ms), li elaboriamo in blocchi di 50, consentendo al browser di dipingere i fotogrammi nel mezzo.
2. Antirimbalzo e strozzamento
Gli eventi di scorrimento e ridimensionamento vengono attivati centinaia di volte al secondo.
Li avvolgiamo in funzioni debounce per garantire che vengano eseguiti solo dopo che l’utente smette di muoversi.
3. CSS per l’animazione
Applichiamo rigorosamente le proprietà Solo compositore per le animazioni (transform e opacity).
L’animazione di “altezza” o “sinistra” costringe il browser a ricalcolare il layout dell’intera pagina (Reflow), il che distrugge le prestazioni sui dispositivi mobili.
Gli utensili
Utilizziamo Lighthouse CI nella nostra pipeline GitHub Actions. Uno sviluppatore non può unire una richiesta pull se degrada il punteggio lighthouse al di sotto di 90. Le prestazioni sono regolate dal codice, non dalle promesse.