Cosa misurano LCP, INP e CLS, le soglie buone e scarse, dati sul campo e dati di laboratorio, un misuratore dal vivo per questa pagina e 25 soluzioni con codice raggruppate per causa, più note per piattaforma.
I Core Web Vitals sono tre misurazioni delle visite reali: Largest Contentful Paint (caricamento, buono a 2.5 secondi o meno), Interaction to Next Paint (reattività, buono a 200 millisecondi o meno) e Cumulative Layout Shift (stabilità, buono a 0.1 o meno). Una pagina li supera quando almeno il 75% delle visite rispetta tutti e tre.
Valori buoni
Il misuratore qui sotto misura questa pagina nel tuo browser mentre la usi. Poi trova la metrica che non superi e segui le soluzioni dedicate; ognuna indica la causa che risolve e fornisce il codice.
Interaction to Next Paint ha sostituito First Input Delay come Core Web Vital a marzo 2024. INP considera tutte le interazioni di una pagina, non solo la prima, e include il tempo necessario a disegnare il risultato.
Lighthouse è un singolo test su un singolo dispositivo simulato. I Core Web Vitals usano i visitatori reali degli ultimi 28 giorni, su telefoni e reti più lenti, e includono INP, che Lighthouse non può misurare.
Fanno parte dei segnali di esperienza sulla pagina di Google. Google descrive la pertinenza e la qualità dei contenuti come molto più importanti, quindi dei buoni vitals aiutano soprattutto quando le pagine sono per il resto simili.
I dati sul campo coprono i 28 giorni precedenti, quindi i miglioramenti compaiono gradualmente nell'arco di circa quattro settimane dalla pubblicazione.
Soglie (valutate sul 75° percentile delle visite reali)
Dati sul campo e dati di laboratorio
fetchpriority="high" dice al browser che questa immagine è la più importante. Non usare mai il lazy loading sull'immagine LCP.
Le immagini di sfondo vengono scoperte tardi, dopo il caricamento del CSS. Un preload nella head avvia subito il download.
srcset e sizes permettono a un telefono di scaricare un file piccolo invece di quello per desktop.
AVIF e WebP di solito pesano molto meno di JPEG a parità di qualità. picture consente un fallback ai browser più vecchi.
font-display: swap mostra subito il testo con il font di riserva, così un titolo che è l'elemento LCP non resta bloccato dal download di un font.
preconnect esegue in anticipo DNS, TCP e handshake TLS per un'origine di terze parti che ti servirà.
Gli script nella head senza defer o async bloccano il rendering. defer mantiene l'ordine ma aspetta che l'HTML sia stato analizzato.
Se l'elemento LCP viene creato da JavaScript, niente può essere disegnato finché il bundle non viene scaricato ed eseguito. Il rendering lato server o il prerendering lo inseriscono nella prima risposta. Consulta la nostra guida alla SEO per le single page app per le opzioni.
Una risposta lenta del server ritarda tutto. Metti in cache le pagine statiche su una CDN e imposta un Cache-Control sensato.
Un task oltre i 50 ms blocca l'input. Cedi il main thread tra un blocco e l'altro così un clic può essere gestito nel mezzo. scheduler.yield è più recente; il fallback con setTimeout funziona ovunque.
Aggiorna subito il pulsante, poi esegui il lavoro pesante dopo che il browser ha avuto modo di disegnare.
Filtrare un elenco lungo a ogni pressione di tasto rallenta la digitazione. Aspetta una breve pausa.
startTransition permette a React di mantenere reattivo l'input e di renderizzare il risultato costoso quando può.
I widget di chat e i tag manager spesso eseguono codice pesante al caricamento. Caricali quando la pagina è inattiva o alla prima interazione.
Le pagine enormi rendono più lento ogni aggiornamento di stile e layout. content-visibility salta il rendering delle sezioni fuori schermo finché non si avvicinano.
Leggere offsetHeight dopo ogni modifica di stile forza ogni volta un ricalcolo del layout. Leggi tutto prima, poi scrivi.
Analizzare un file grande o ordinare migliaia di righe può avvenire in un worker senza bloccare i clic.
width e height permettono al browser di riservare lo spazio prima che arrivi il file. Il CSS può comunque renderli responsive.
Mappe, video e iframe spesso si caricano tardi. aspect-ratio tiene aperto il loro riquadro.
I contenuti inseriti sopra ciò che le persone stanno leggendo lo spingono in basso. Dai in anticipo allo spazio un'altezza minima.
Quando subentra il web font, il testo può andare a capo diversamente. size-adjust su un font di riserva locale rende le due larghezze più simili.
Spostare gli elementi con transform non sposta gli altri elementi, quindi non conta come layout shift.
Un banner fissato in fondo allo schermo non sposta la pagina; uno inserito in alto sì.
Un segnaposto di caricamento deve occupare lo stesso spazio di ciò che lo sostituisce.
Le pagine ripristinate dalla back/forward cache compaiono all'istante senza nuovi spostamenti. Un gestore unload lo impedisce; usa invece pagehide.
Note per piattaforma
Le immagini sono la causa più comune di un LCP lento; riducile con il
Misuratore dal vivo per questa pagina
Misura LCP, CLS e INP di questa pagina nel tuo browser, dove supportato.
Buono
Da migliorare
Scarso
Non supportato in questo browser
INP (il più lento finora)
In attesa del rendering più grande
Clicca o scrivi in un punto qualsiasi per misurare
Inizia gratis · Nessuna carta di credito richiesta