Guide

I Core Web Vitals sono un insieme di metriche definite da Google per catturare come si sente davvero una pagina all'uso, anziché quanto è veloce in astratto. Si concentrano su tre esperienze del mondo reale: quanto rapidamente appare il contenuto principale, quanto è stabile il layout mentre si carica e quanto prontamente la pagina risponde al tuo input. Poiché sono misurate su visite reali, premiano le pagine che danno una buona sensazione anziché le pagine che semplicemente ottengono un buon punteggio in laboratorio.

LCP, CLS e INP spiegati

La prima metrica, Largest Contentful Paint, misura quanto tempo impiega il più grande elemento visibile — di solito un'immagine hero, un titolo o un blocco di testo — a renderizzarsi. È un indicatore di «quando la pagina sembra caricata?» Un LCP lento significa che i visitatori fissano uno schermo vuoto o a metà costruzione, ed è una delle ragioni più comuni per cui una pagina sembra lenta anche quando è tecnicamente funzionante.

La seconda, Cumulative Layout Shift, misura il movimento inatteso del contenuto mentre la pagina si carica. Hai provato un cattivo punteggio CLS ogni volta che un pulsante salta proprio mentre vai a toccarlo, perché un'immagine o un annuncio si è caricato sopra di esso e ha spinto tutto in basso. Quantifica quell'instabilità sgradevole, e migliorarlo riguarda in gran parte il riservare spazio per il contenuto prima che arrivi.

La terza, Interaction to Next Paint, misura la reattività — quanto rapidamente la pagina reagisce visibilmente dopo che clicchi, tocchi o digiti. Un INP scarso significa che l'interfaccia sembra lenta e poco reattiva, spesso perché il main thread del browser è occupato a eseguire JavaScript quando provi a interagire. Per le app ricche di script, questa è frequentemente la più difficile delle tre da azzeccare.

Correggere ogni metrica

Migliorare l'LCP di solito si riduce a consegnare prima il contenuto importante. Ottimizza e dimensiona correttamente le immagini, servile in formati moderni e usa i suggerimenti di caricamento e priorità che la piattaforma fornisce; assicurati che il tuo server o CDN risponda rapidamente; ed evita di bloccare il rendering iniziale con script e fogli di stile non necessari. L'obiettivo è che i pixel più importanti arrivino il prima possibile.

• LCP — quanto velocemente appare il contenuto principale; ottimizza immagini e risposta del server
• CLS — stabilità del layout; riserva spazio per immagini, embed e font
• INP — reattività; riduci e spezza il JavaScript sul main thread
• SPA: code-splitting, lazy-loading, sfoltisci i bundle; aggiungi SSR per un primo paint veloce
• Misura con dati di campo reali (CrUX), non solo una singola esecuzione di laboratorio

Sistemare il CLS riguarda perlopiù il riservare spazio in anticipo. Imposta sempre larghezza e altezza esplicite (o un rapporto d'aspetto) su immagini e contenuti incorporati così che il browser lasci loro spazio prima che si carichino, evita di inserire contenuto sopra ciò che l'utente sta già leggendo e sii prudente con i web font così che il testo non si ridisponga quando il font personalizzato subentra. Sono modifiche piccole e meccaniche con un effetto sproporzionato su quanto stabile sembri una pagina.

Migliorare l'INP significa fare meno lavoro sul main thread nel momento dell'interazione. Spezza i task JavaScript a lunga esecuzione, rinvia o rimuovi gli script non necessari immediatamente, e sii disciplinato con il codice di terze parti, che è una causa frequente e invisibile di scarsa reattività. Meno il browser deve fare quando un utente clicca, più rapidamente può disegnare il risultato.

Attenzione particolare per le single-page app

Le single-page application necessitano qui di attenzione particolare, perché i loro punti di forza e i loro rischi per i Core Web Vitals provengono dalla stessa fonte. Il bundle JavaScript che rende la navigazione istantanea può anche ritardare il primo paint e bloccare le interazioni se cresce troppo. Il code-splitting, così che ogni rotta carichi solo ciò che le serve, il lazy-loading dei componenti pesanti e lo sfoltimento delle dipendenze sono le leve che mantengono una SPA sia fluida sia veloce da caricare.

Il rendering lato server e la generazione statica aiutano le SPA proprio su queste metriche. Inviando contenuto reale e renderizzato nella prima risposta — tramite Nuxt, Next.js o una build statica — dai all'utente un LCP veloce invece di uno schermo vuoto in attesa degli script. L'app poi si idrata nella sua forma interattiva, così mantieni la navigazione fluida correggendo al contempo il problema del primo caricamento pesante che danneggia i Vitals.

Misurare con dati di campo reali

Infine, misura con dati reali, non solo un test di laboratorio una tantum. Strumenti come PageSpeed Insights e Lighthouse sono utili per la diagnosi, ma i dati di campo da utenti reali — tramite il Chrome User Experience Report o il tuo monitoraggio — ti dicono cosa i visitatori sperimentano davvero su dispositivi e reti diversi. Migliorare i Core Web Vitals è un'abitudine continua di misurare, correggere il peggior responsabile e misurare di nuovo, non una casella da spuntare una volta sola.