Orbit
Orbit Web Vitals
The Web Vitals tab reports Core Web Vitals collected from your project's real visitors rather than from a synthetic test, so what you see is what people are actually experiencing on their own…
La scheda Web Vitals riporta i Core Web Vitals raccolti dai veri visitatori del tuo progetto anziché da un test sintetico, quindi ciò che vedi è quello che le persone stanno effettivamente sperimentando sui loro dispositivi e connessioni.
Dove si trovano i Web Vitals
Apri Orbit, fai clic sul progetto e scegli Web Vitals dal gruppo Observability nella barra delle schede del progetto. La pagina si intitola Web Vitals e spiega il suo numero di intestazione: p75 è il punteggio utilizzato per Page Experience.
Finché non aggiungi il collector al tuo sito, la pagina non ha nulla da mostrare, quindi inizia con la scheda di configurazione in fondo.
Aggiunta del Collector
La scheda di configurazione ti fornisce un tag script su una riga da aggiungere al <head> del tuo sito:
<script defer src="https://kapsulehost.com/api/v/<your-project-slug>/script.js"></script>
La riga esatta, con lo slug del tuo progetto già compilato, è sulla pagina. Copiala da lì anziché digitarla.
Lo script raccoglie cinque metriche mentre i visitatori lasciano ogni pagina e le riporta in un singolo batch. Non vengono acquisite informazioni personali identificabili e non vengono impostati cookie, quindi non aggiunge un requisito di consenso proprio.
I dati iniziano a comparire entro circa trenta secondi dalla prima visualizzazione di pagina reale. Se non appare nulla dopo, lo script non si sta caricando: controlla la scheda di rete del tuo browser sul sito live.
C'è una seconda copia dello stesso collector offerta in Settings, nella scheda Web Analytics, che si carica dal dominio del panel e va prima del tag </body> di chiusura. Entrambi funzionano e alimentano gli stessi dati. Usane uno, non entrambi, altrimenti ogni visualizzazione di pagina viene contata due volte.
Le Cinque Metriche
| Metrica | Cosa misura |
|---|---|
| LCP | Largest Contentful Paint: quanto tempo passa prima che il contenuto principale sia visibile |
| INP | Interaction to Next Paint: quanto rapidamente la pagina risponde all'input |
| CLS | Cumulative Layout Shift: quanto il layout salta durante il caricamento |
| FCP | First Contentful Paint: quanto tempo passa prima che venga disegnato qualsiasi elemento |
| TTFB | Time to First Byte: quanto tempo ha impiegato il server per iniziare a rispondere |
I primi tre sono i Core Web Vitals veri e propri. FCP e TTFB sono diagnostici: ti dicono se un LCP scadente è dovuto a un server lento o a una pagina lenta.
Lettura di p75
Ogni figura su questa pagina è un p75, non una media, sui campioni nella finestra selezionata. Tre quarti dei tuoi visitatori hanno avuto un'esperienza almeno così buona; un quarto l'ha avuta peggiore.
Questa scelta è importante. Una media è dominata dalle molte visite veloci su connessioni buone e nasconde la coda. Un p75 no: se il tuo p75 LCP è di quattro secondi, un visitatore su quattro aspetta più a lungo.
Ogni scheda di metrica riporta una valutazione di Good, Needs improvement o Poor, più il conteggio dei campioni da cui è stata calcolata. Per LCP, la pagina indica direttamente i limiti: good è 2500ms o meno, e poor è oltre 4000ms.
Tratta qualsiasi scheda con un piccolo conteggio di campioni con sospetto. Un p75 su una dozzina di campioni è rumore. Allarga la finestra con il selettore in cima alla pagina, o aspetta più traffico, prima di agire.
Il Grafico di Trend
Il grafico di trend traccia il p75 giornaliero per LCP e CLS nella finestra selezionata, con le soglie good e poor indicate. Il sottotitolo ti dice cosa stai cercando: le linee piatte sono salutari.
Un cambiamento a gradini in un giorno specifico è il segnale utile, perché quasi sempre si allinea con un deploy. Fai un riferimento incrociato della data con la scheda Deployments, o contrassegna l'evento sulla timeline del progetto in modo che sia annotato la prossima volta: vedi Orbit Timeline Annotations.
Una lenta deriva verso l'alto nel corso delle settimane è un problema diverso, solitamente il peso della pagina accumulato anziché un singolo cambiamento.
Top Countries
Top countries mostra il volume dei campioni per paese, derivato dagli header edge. È lì per il contesto anziché per l'analisi: un p75 che appare complessivamente scadente spesso si rivela buono per il tuo mercato principale e dominato da un pubblico più piccolo e più distante.
Se la maggior parte del tuo traffico è lontano dalla tua origine, questo è un argomento per il caching più aggressivo al bordo piuttosto che per l'ottimizzazione del codice.
Pages Needing Attention
La tabella Pages needing attention classifica i percorsi in base a quanto il loro p75 si trova al di sopra della soglia good per ogni metrica, con il conteggio dei campioni per ogni riga.
Procedi lungo questa tabella anziché tentare di migliorare il sito nel suo insieme. Due o tre template di solito rappresentano la maggior parte del problema, e risolvere un template risolve ogni pagina che lo utilizza.
Le cause comuni, nell'ordine in cui vale la pena controllarle:
- Un'immagine hero non dimensionata o precaricata. Questo è il problema di LCP più frequente di gran lunga.
- Uno script di terze parti che blocca il thread principale. I widget di chat, i tag manager e gli stack di analytics sono i soliti sospetti, e danneggiano soprattutto l'INP.
- Immagini e embed senza dimensioni. Causano il salto del layout mentre si caricano, che è esattamente quello che CLS misura.
- Una risposta di origine lenta. Se TTFB è scadente, nessuno dei precedenti ti salverà; la soluzione è il caching o una risposta più veloce, non il lavoro front-end.
Nessun Campione In Questa Finestra
Se la pagina dice che non ci sono campioni, una di tre cose è vera:
- Il collector non è stato aggiunto, oppure non si sta caricando sulle pagine che le persone visitano.
- È stato aggiunto di recente e nessuno ha visitato ancora.
- La finestra selezionata è più breve dello spazio dalla tua ultimo traffico.
Allarga prima la finestra, poiché è gratuito, quindi controlla che lo script sia presente nell'HTML servito del sito live e non solo nella tua sorgente.
Quanto a lungo vengono conservati i dati
I campioni individuali vengono eliminati automaticamente una volta che hanno 30 giorni, da un lavoro notturno. Il selettore della finestra ti permette di consultare la cronologia conservata; non c'è alcun archivio oltre ad esso.
Se hai bisogno di un record a lungo termine, fai uno screenshot o annota i valori p75 in un momento specifico, ad esempio poco prima e poco dopo un progetto di performance, in modo da avere un prima e dopo che puoi citare in seguito.
Vitals nella Pagina di Stato Pubblica
Se pubblichi una pagina di stato per il progetto, può mostrare lo stesso riepilogo Core Web Vitals ai tuoi visitatori, insieme al tempo di attività e ai deploy recenti. Vedi Orbit Status Page.
Dove andare dopo
- Orbit Project Analytics per i numeri dal lato della build e un riepilogo vitals condensato.
- Orbit Timeline Annotations per contrassegnare i deploy e gli incident dietro un cambiamento graduale.
- Website Speed per consigli generali sulle performance.