CLS e INP sono Core Web Vitals che misurano aspetti dell'esperienza utente diversi dalla velocità.
Il CLS misura la stabilità visiva. Uno spostamento del layout avviene quando il contenuto si muove dopo il caricamento. L'utente legge un articolo. Si carica un annuncio. L'articolo scende. L'utente perde il segno. Il CLS quantifica il fastidio.
L'INP misura la reattività. L'utente clicca un pulsante. Il sistema risponde. Quanto tempo ci mette la risposta? L'INP quantifica il ritardo di reattività.
Cumulative Layout Shift (CLS) nel dettaglio
Cosa causa il CLS
Gli annunci si caricano e occupano spazio. Gli embed si caricano e occupano spazio. Le immagini si caricano senza un'altezza indicata. I font cambiano e il testo si riorganizza. Il contenuto viene inserito da JavaScript.
Esempio reale
Il layout della pagina è stabile. L'utente inizia a leggere. Si carica un annuncio. L'annuncio è alto trecento pixel. Il contenuto sotto l'annuncio scende di trecento pixel. L'utente perde il segno. Fastidioso.
Misurazione
Il CLS si misura come percentuale della finestra visibile che si sposta. Se la finestra è alta mille pixel e il contenuto si sposta di trecento pixel, il CLS è zero virgola tre. L'obiettivo è sotto zero virgola uno (uno spostamento del dieci per cento è accettabile, uno del trenta per cento no).
Ottimizzare il CLS
Strategia uno: riserva lo spazio
Riserva lo spazio per annunci, embed e immagini. Di' al motore del layout: l'annuncio occuperà trecento pixel. Riserva lo spazio. L'annuncio si carica nello spazio riservato. Nessuno spostamento.
Strategia due: inserisci in fondo
Evita di inserire contenuto in mezzo alla pagina. Inserisci in fondo (il contenuto sotto è già fuori dalla finestra visibile). Oppure inserisci in un'intestazione fissa (l'utente si aspetta che l'intestazione cambi).
Strategia tre: evita i cambi di font
Evita di cambiare font durante il caricamento della pagina. I cambi di font fanno riorganizzare il testo. Tutto il testo che usa quel font si sposta. Usa `font-display: optional` o `font-display: swap` per ridurre lo spostamento.
Strategia quattro: indica l'altezza delle immagini
Usa un'altezza fissa per le immagini. L'immagine si carica. L'altezza è indicata. L'immagine riempie lo spazio riservato. Nessuno spostamento.
Esempio reale: ottimizzare il CLS di una pagina prodotto di un negozio online
CLS di partenza: zero virgola due cinque (scarso).
Analisi
Le immagini del prodotto si caricano senza un'altezza indicata. Le immagini spostano il contenuto. Contribuiscono per zero virgola dieci al CLS. L'annuncio sotto il prodotto si carica dopo la pagina. L'annuncio occupa spazio. Il contenuto si sposta. Contribuisce per zero virgola dodici al CLS. Le recensioni degli utenti si caricano da un'API. Vengono inserite nella pagina. Il contenuto si sposta. Contribuiscono per zero virgola tre al CLS.
Ottimizzazione
Indica l'altezza delle immagini nell'HTML. Le immagini riempiono lo spazio riservato. Contributo al CLS: zero. Riserva lo spazio per l'annuncio. L'annuncio si carica nello spazio riservato. Contributo al CLS: zero. Carica in modo differito le recensioni sotto la parte visibile. Non inserirle sopra. Contributo al CLS: zero (lo spostamento avviene sotto la finestra visibile).
Nuovo CLS: zero virgola zero cinque (buono).
Interaction to Next Paint (INP) nel dettaglio
Cosa misura l'INP
L'INP misura la reattività. L'utente clicca un pulsante. Il sistema elabora il clic. Aggiorna lo stato. Mostra la modifica. La disegna sullo schermo. L'INP è il tempo dal clic al primo aggiornamento visivo.
Esempio reale
L'utente clicca il pulsante Aggiungi al carrello. Il sistema controlla la disponibilità. Aggiorna il contatore del carrello. Mostra sullo schermo il nuovo numero. Se l'INP è di cento millisecondi, l'utente vede il contatore aggiornarsi subito. Se l'INP è di un secondo, il contatore si aggiorna un secondo dopo. Il sito sembra poco reattivo.
Misurazione
L'INP si misura in millisecondi. Un obiettivo sotto i duecento millisecondi è buono.
Ottimizzare l'INP
Strategia uno: riduci il tempo di esecuzione del JavaScript
Un JavaScript lungo blocca la visualizzazione. Spezza un compito lungo in compiti più piccoli. Usa async, defer o i Web Worker per i calcoli pesanti.
Strategia due: ottimizza i gestori di eventi
I gestori di eventi dovrebbero fare il minimo. Sposta il lavoro pesante in secondo piano.
Strategia tre: ottimizza il CSS
Un CSS pesante può ritardare la visualizzazione. Usa il CSS containment per dire al browser: questo elemento è autonomo, non ricalcolare gli stili di tutta la pagina quando cambia.
Strategia quattro: usa una tecnica di rendering più veloce
Gli aggiornamenti CSS sono più veloci degli aggiornamenti del DOM con JavaScript. Usa le trasformazioni CSS invece del posizionamento con left e top. Usa l'opacità CSS invece dei cambi di visibilità.
Esempio reale: reattività di un modulo
INP di partenza: quattrocento millisecondi (scarso).
Analisi
Il modulo ha un JavaScript di convalida. L'utente scrive in un campo. La convalida parte. La convalida è sincrona. Blocca l'aggiornamento del campo. Il campo non si aggiorna finché la convalida non finisce. Il modulo sembra poco reattivo.
Ottimizzazione
Sposta la convalida in secondo piano (Web Worker o setTimeout). Il campo si aggiorna subito. La convalida avviene in secondo piano. Usa il CSS containment sul modulo. Di' al browser: il modulo è autonomo, non ricalcolare gli stili di tutta la pagina. Usa le trasformazioni CSS per l'animazione invece del posizionamento con JavaScript.
Nuovo INP: centocinquanta millisecondi (buono).
CLS e INP insieme
Il CLS fa sembrare la pagina instabile. L'INP la fa sembrare poco reattiva. Insieme incidono sulla percezione di qualità da parte dell'utente.
Una pagina con un buon LCP ma un CLS scarso (veloce ma che salta) è frustrante. L'utente dà la colpa alla lentezza, anche se il problema è la stabilità.
Una pagina con buon LCP e buon CLS ma un INP scarso (veloce e stabile ma poco reattiva) sembra rotta. I pulsanti non rispondono ai clic.
Tutti e tre i Core Web Vitals contano per una buona esperienza utente.
Domande frequenti
Come individuiamo i problemi di CLS?
Usa Chrome DevTools. Clic destro sulla pagina. Ispeziona. Scheda Prestazioni. Registra il caricamento della pagina. DevTools mostra gli spostamenti del layout durante il caricamento. Controlla anche PageSpeed Insights. Lighthouse individua i problemi di CLS. Controlla anche il rapporto Core Web Vitals di Search Console. Mostra le pagine con un CLS scarso. Con il creatore di siti di WEMASY puoi impostarlo direttamente sul tuo sito.
Dobbiamo riservare lo spazio per tutti gli annunci o solo per quelli critici?
Riserva lo spazio per gli annunci nella parte visibile senza scorrere (annunci che si caricano subito). Non riservarlo per gli annunci più in basso (annunci che si caricano dopo lo scorrimento). Gli annunci più in basso possono spostare il contenuto sotto di loro, ma l'utente non vede lo spostamento.
Come ottimizziamo l'INP per applicazioni complesse con molto JavaScript?
Sposta i calcoli pesanti nei Web Worker. Il Web Worker gira su un thread separato. Non blocca il thread principale. Il thread principale resta reattivo agli input dell'utente. Usa anche React Suspense o framework simili, che rimandano i calcoli pesanti a dopo la gestione dell'interazione.
Il CLS conta di più su mobile o su desktop?
Conta di più su mobile. Lo schermo mobile è più piccolo. Gli spostamenti del layout si vedono di più. L'utente mobile nota più facilmente lo spostamento e si frustra. Dai la priorità all'ottimizzazione del CLS su mobile.
Un buon CLS e un buon INP possono compensare un LCP scarso?
No. Se la pagina impiega cinque secondi a caricarsi, l'utente è già frustrato prima che CLS e INP contino. L'utente se ne va prima di interagire. Un caricamento veloce (buon LCP) è il prerequisito di una buona esperienza. Un buon CLS e un buon INP migliorano l'esperienza di una pagina veloce, non di una lenta.
Come misuriamo e monitoriamo i miglioramenti di CLS e INP?
Base di partenza: misura prima dell'ottimizzazione. Applica l'ottimizzazione. Nuova misura: misura dopo. Usa la libreria Web Vitals (una libreria JavaScript che misura i Core Web Vitals) per monitorare gli utenti reali. Imposta degli avvisi: se CLS o INP peggiorano, l'avviso informa il team.