← Torna alle funzionalità
Pro

Core Web Vitals

Core Web Vitals mostra le tre metriche su cui Google si posiziona - LCP, CLS e INP - misurate in tempo reale sulla pagina che stai visualizzando, valutate rispetto alle soglie di Google e ricondotte all'elemento esatto dietro ciascun numero.

Core Web Vitals decide parte del posizionamento delle tue pagine, ma i soliti modi per misurarle sono scomodi. Gli strumenti di laboratorio generano un carico sintetico che nessuno sperimenta. Search Console segnala gli utenti reali, con quattro settimane di ritardo, raggruppati in segmenti URL. Nessuno dei due ti dice quale elemento della pagina di fronte a te è il problema.

Questo strumento misura la pagina che stai effettivamente guardando, mentre la usi. LCP, CLS e INP ricevono ciascuno un riquadro con il proprio valore, una valutazione Buono, Richiede lavoro o Scarso rispetto alle soglie pubblicate di Google e una barra che mostra la tua posizione. FCP e TTFB si affiancano a loro per il contesto, perché un LCP lento causato da un server lento è un problema diverso da quello causato da un'immagine pesante.

Le definizioni corrispondono a ciò che Chrome riporta a CrUX, il che è importante se intendi confrontare i numeri con Search Console. CLS utilizza finestre di sessione (una finestra termina dopo un intervallo di un secondo o dopo cinque secondi e vince la finestra peggiore) anziché sommare ingenuamente tutti i turni. INP è il 98° percentile delle tue latenze di interazione, che per una visita normale è semplicemente l'interazione più lenta. LCP smette di cambiare alla tua prima interazione, esattamente come fa Chrome.

Più utilmente, ogni numero viene attribuito. Il pannello nomina l'elemento di disegno più grande, gli elementi che si sono spostati e le interazioni più lente, e un pulsante Mostra scorre fino a ciascuno di essi e lo delinea sulla pagina. Invece di sapere che CLS è 0.31, vedi il banner che spinge verso il basso i tuoi contenuti. Copia il rapporto ti consegna il tutto come testo per un ticket.

Anteprima dal vivo
example.com/products
Core Web Vitals Misurare dal vivo
LCPBene
1.84 s
CLSPovero
0.312
INPHa bisogno di lavoro
248 ms
FCP 1.12 s
TTFB 410 ms
Elemento più grande
1.84 s section.hero > img.banner Spettacolo
I più grandi cambiamenti di layout
0.241 div.promo-banner Spettacolo
0.071 ul.product-grid > li:nth-of-type(3) Spettacolo
Caratteristiche principali

Live LCP, CLS e INP

Le tre metriche di classificazione si aggiornano mentre utilizzi la pagina: lo scorrimento sposta CLS, facendo clic e digitando sposta INP. Ciascuno è valutato Buono, Richiede lavoro o Scarso rispetto alle soglie di Google.

Ti dice quale elemento

Denomina l'elemento di verniciatura più grande, gli elementi che si sono spostati e le interazioni più lente. Premi Mostra per scorrere fino a uno qualsiasi di essi e delinearlo direttamente sulla pagina.

Definizioni proprie di Chrome

CLS utilizza finestre di sessione con un intervallo di 1 secondo e un limite di 5 secondi, INP è il 98° percentile delle latenze di interazione e LCP si blocca alla prima interazione, quindi i tuoi numeri sono in linea con Search Console.

FCP e TTFB per il contesto

First Contentful Paint e Time To First Byte si trovano accanto ai tre grandi, quindi puoi distinguere un server lento da un'immagine di eroe pesante prima di iniziare a ottimizzare la cosa sbagliata.

Interruzione dell'interazione

Elenca le tue interazioni più lente con il tipo di evento e l'elemento coinvolto, in modo che sia possibile trovare un menu a discesa o un filtro lento anziché indovinarlo.

Rapporto copiabile

Con un clic copia ogni metrica, valutazione e selettore offensivo come testo semplice, pronto per essere incollato in un ticket, una richiesta pull o un'e-mail del cliente.

Casi d'uso comuni

Controllo di una pagina prima della spedizione

Conferma che LCP, CLS e INP siano in verde su un nuovo modello prima che venga pubblicato, anziché scoprirlo da Search Console un mese dopo.

Inseguendo un avviso di Search Console

Search Console ti dice che un gruppo di URL non supera il CLS; aprine uno con questo strumento e vedi esattamente quale elemento effettua lo spostamento.

Trovare l'elemento che salta

Scorri la pagina e guarda CLS salire, quindi premi Mostra per delineare l'annuncio, il banner o il carattere web a caricamento tardivo che sta spostando i tuoi contenuti.

Diagnosi di un'interfaccia lenta

Fai clic su filtri, menu e modalità, quindi leggi l'elenco delle interazioni più lente per scoprire quale controllo costa centinaia di millisecondi.

Dimostrare che un'ottimizzazione ha funzionato

Registra i numeri, implementa la correzione, quindi misura nuovamente la stessa pagina e confronta i due rapporti fianco a fianco.

Come usare
1

Apri Core Web Vitals

Fare clic sull'icona Core Web Vitals nel dock DevSuite Pro. I riquadri metrici vengono visualizzati immediatamente utilizzando ciò che la pagina ha già registrato.

2

Ricaricare per un LCP pulito

LCP è significativo solo dall'inizio del caricamento di una pagina, quindi ricarica con il pannello aperto quando desideri una lettura di cui ti puoi fidare.

3

Utilizza la pagina normalmente

Scorri l'intera pagina per esercitare CLS, quindi fai clic, tocca e digita per generare misurazioni INP. I riquadri si aggiornano man mano che procedi.

4

Trova il colpevole

Premi Mostra accanto all'elemento LCP, una fonte di spostamento del layout o un'interazione lenta. La pagina scorre fino ad esso e lo delinea in modo che non vi siano ambiguità su quale elemento sia responsabile.

5

Copia il rapporto

Fai clic su Copia report per un riepilogo in testo semplice di ogni metrica, valutazione e selettore. Premere Reset per avviare nuovamente CLS e INP da zero.

Pronto a provare?

Installa DevSuite Pro gratuitamente e sblocca più di 71 strumenti per sviluppatori per il tuo browser.

Aggiungi a Chrome Aggiungi a Edge Aggiungi a FireFox