Utilizza il riquadro Informazioni sul rendimento per ottenere informazioni strategiche e basate sui casi d'uso sul rendimento del tuo sito web.
Panoramica
Il riquadro Approfondimenti sul rendimento ti consente di:
- Registra e misura le prestazioni di caricamento pagina.
- Visualizza le metriche sul rendimento di Web Vitals.
- Visualizza l'attività di rete.
- Simula velocità della CPU e della rete più lente.
- Importa ed esporta le registrazioni.
Perché un nuovo panel?
Il nuovo riquadro Informazioni sul rendimento è un esperimento per risolvere questi 3 problemi riscontrati dallo sviluppatore quando lavora con il riquadro Rendimento esistente:
- Troppe informazioni. Con l'interfaccia utente ridisegnata, il riquadro Approfondimenti sul rendimento semplifica i dati e mostra solo le informazioni pertinenti.
- Difficile distinguere i casi d'uso. Il riquadro Informazioni sul rendimento supporta l'analisi basata sui casi d'uso. Al momento supporta solo il caso d'uso di caricamento della pagina, ma in futuro ne verranno aggiunti altri in base al tuo feedback, ad esempio l'interattività.
- È necessaria una profonda conoscenza del funzionamento efficace dei browser. Il riquadro Approfondimenti sul rendimento mette in evidenza le informazioni chiave nel riquadro Approfondimenti, con feedback utili su come risolvere i problemi.
Introduzione
Questo tutorial ti insegna a misurare e comprendere le prestazioni di caricamento pagina con il riquadro Approfondimenti sul rendimento. Continua a leggere o guarda la versione video di questo tutorial qui sopra.
Apri il riquadro Informazioni sulle prestazioni
- Apri DevTools.
Fai clic su Altre opzioni > Altri strumenti > Informazioni sul rendimento.
In alternativa, utilizza il menu dei comandi per aprire il riquadro Approfondimenti sul rendimento.
Registra prestazioni
Il riquadro Informazioni sul rendimento può registrare il rendimento generale e basato sui casi d'uso (ad esempio, il caricamento della pagina).
- Apri questa pagina demo in una nuova scheda e, nella pagina, apri il riquadro Informazioni sulle prestazioni.
Puoi limitare la rete e la CPU durante la registrazione. Per questo tutorial, seleziona Disattiva cache e imposta CPU su Rallentamento 4 volte nel menu a discesa:
Fai clic su Misura il caricamento della pagina. DevTools registra le metriche sul rendimento durante il ricaricamento della pagina e poi interrompe automaticamente la registrazione un paio di secondi dopo il termine del caricamento della pagina.
Riprodurre di nuovo una registrazione dell'esibizione
Usa i controlli in basso per controllare la riproduzione della registrazione.
Ecco un esempio di come procedere.
- Fai clic su Riproduci per riprodurre la registrazione.
- Fai clic su Metti in pausa per mettere in pausa la riproduzione.
- Regola la velocità di riproduzione con il menu a discesa.
- Fai clic su Attiva/disattiva anteprima visiva per mostrare o nascondere l'anteprima visiva.
Navigare in una registrazione del rendimento
DevTools riduce automaticamente lo zoom per mostrare la sequenza temporale completa della registrazione. Puoi spostarti all'interno della registrazione con lo zoom e spostare la sequenza temporale.
Per aumentare e ridurre lo zoom e spostare la cronologia verso sinistra e destra, utilizza i pulsanti di navigazione corrispondenti:
- Fai clic sulla Sequenza temporale per spostare la testina di riproduzione e visualizzare un determinato frame.
- Fai clic sui controlli Aumenta lo zoom e Diminuisci lo zoom in basso per aumentare e diminuire lo zoom. In questo caso, lo zoom viene applicato in base al cursore di riproduzione.
- Trascina la barra di scorrimento orizzontale in basso per spostare la sequenza temporale verso sinistra e verso destra.
In alternativa, puoi utilizzare le scorciatoie da tastiera. Fai clic sul pulsante per visualizzare le scorciatoie.
Quando utilizzi le scorciatoie, lo zoom viene applicato in base al cursore del mouse.
Visualizza le informazioni sulle prestazioni
Visualizza un elenco di approfondimenti sul rendimento nel riquadro Approfondimenti. Identificare e risolvere potenziali problemi di rendimento.
Passa il mouse sopra ogni approfondimento per evidenziarli nei canali principali.
Fai clic su un approfondimento, ad esempio la richiesta di blocco della visualizzazione, per aprirlo nel riquadro Dettagli. Per comprendere meglio il problema, esamina le sezioni File, Problema, Come risolvere e altre ancora.
Visualizza le metriche sul rendimento di Web Vitals
Web Vitals è un'iniziativa di Google che intende fornire linee guida unificate per gli indicatori di qualità che sono essenziali per offrire un'esperienza utente ottimale sul web.
Puoi visualizzare queste metriche nel riquadro Spostamenti e Approfondimenti.
Per saperne di più sulle metriche, passa il mouse sopra gli approfondimenti in Sequenza temporale.
Scopri i ritardi della grande visualizzazione con contenuti
LCP (Largest Contentful Paint) è una delle metriche Core Web Vitals. Registra il tempo di rendering dell'immagine o del blocco di testo più grande visibile all'interno dell'area visibile, in relazione al momento in cui è iniziato il caricamento della pagina.
Un punteggio LCP buono è pari o inferiore a 2,5 secondi.
Se il rendering della visualizzazione con contenuti più grande della pagina richiede più tempo, nella sequenza temporale vedrai il badge LCP con un quadrato giallo o un triangolo rosso.
Per aprire il riquadro Dettagli, fai clic sul badge LCP nella sequenza temporale o nel riquadro Approfondimenti a destra. Nel riquadro puoi scoprire le potenziali cause dei ritardi e suggerimenti su come risolverli.
In questo esempio, una richiesta blocca il rendering e puoi applicare stili critici in linea per risolvere il problema. Per scoprire di più, consulta la sezione Eliminare le risorse che bloccano il rendering.
Per visualizzare le sottoparti del tempo di rendering LCP, scorri verso il basso fino alla sezione Dettagli > Analisi dei tempi.
Il tempo di rendering LCP è costituito dai seguenti componenti secondari:
| Componente secondario LCP | Descrizione |
|---|---|
| Time to First Byte (TTFB) | Il tempo che intercorre tra l'avvio del caricamento della pagina da parte dell'utente e il momento in cui il browser riceve il primo byte della risposta del documento HTML. |
| Ritardo del caricamento delle risorse | Il delta tra il TTFB e il momento in cui il browser inizia a caricare la risorsa LCP. |
| Tempo di caricamento delle risorse | Il tempo necessario per caricare la risorsa LCP stessa. |
| Ritardo di rendering dell'elemento | Il delta tra il termine del caricamento della risorsa LCP e il rendering completo dell'elemento LCP. |
Se un elemento LCP non richiede un carico di risorse per il rendering, il ritardo e il tempo del caricamento delle risorse vengono omessi. Ad esempio, se l'elemento è un nodo di testo visualizzato con un carattere di sistema.
Visualizza attività di variazione del layout
Visualizza le attività delle variazioni del layout nella traccia Variazioni del layout.
Le variazioni del layout sono raggruppate in una finestra di sessione. Nell'esempio sono presenti due finestre di sessione. Le finestre di sessione presentano intervalli vuoti.
Le variazioni layout cumulative (CLS) sono una delle metriche dei Core Web Vitals. Utilizza la traccia Variazioni del layout per identificare potenziali problemi e cause delle variazioni del layout.
Quando migliori la metrica CLS, inizia sempre con la finestra di sessione più grande. Nel nostro esempio, la finestra della sessione 1 è la più grande, in base al colore e al livello dello sfondo.
Fai clic su uno screenshot per visualizzare i dettagli della variazione del layout, identificare le potenziali cause principali e gli elementi interessati.
Nel nostro esempio, la potenziale causa principale sono i contenuti multimediali senza dimensioni. Per scoprire come risolvere il problema, consulta Ottimizzare il Cumulative Layout Shift.
Informazioni sul punteggio delle variazioni del layout
Per capire come vengono calcolati i punteggi, utilizza la sezione Finestra nel riquadro Dettagli. Finestra mostra a quale finestra della sessione appartiene la variazione del layout corrente.
Se l'intera pagina è spostata, il punteggio massimo di ogni variazione del layout è 1. Nel nostro esempio, il primo spostamento del layout ha ottenuto il punteggio 0.15. Il secondo cambiamento di layout ha ottenuto il punteggio 0.041.
Il punteggio totale per questa finestra di sessione è 0.19. In base alla soglia CLS, il valore deve essere migliorato. Il colore di sfondo della finestra della sessione riflette lo stesso.
Il grafico dello sfondo della finestra della sessione aumenta nel tempo. Il punteggio cumulativo della variazione del layout riflette l'aumento in quel momento.
Visualizza attività di rete
Visualizza l'attività di rete nel canale Rete. Puoi espandere il canale della rete per visualizzare tutte le attività della rete e fare clic su ogni elemento per visualizzarne i dettagli.
Visualizza attività del renderer
Visualizza l'attività di rendering nel canale Renderer. Puoi espandere ogni visualizzatore per visualizzare le attività e fare clic su ogni elemento per visualizzarne i dettagli.
Visualizza attività GPU
Visualizza l'attività della GPU nel canale GPU. La traccia GPU è nascosta per impostazione predefinita. Per abilitarlo, seleziona GPU in Impostazioni.
Visualizza i tempi degli utenti
Per ottenere misure del rendimento personalizzate, puoi utilizzare Tempi utenti e visualizzare i tempi con la traccia Tempi. Per ulteriori informazioni, consulta l'API User-Timing.
Consulta questa pagina demo che calcola il tempo trascorso del caricamento del testo.
Per visualizzare i tempi utente:
- Contrassegna i luoghi nella tua applicazione con
performance.mark(). - Misura il tempo trascorso tra i segni con
performance.measure(). - Registra le prestazioni.
- Visualizza le misurazioni nel canale Tempi. Se non riesci a visualizzare la traccia, controlla Tempi utente in Impostazioni.
- Per visualizzare i dettagli, fai clic sul momento della pista.
Personalizzare l'UI
Per personalizzare la Sequenza temporale e le Tracce, fai clic sull'icona Impostazioni del riquadro e seleziona le opzioni che preferisci.
Esportare una registrazione
Per salvare una registrazione, fai clic su Esporta .
Importare una registrazione
Per caricare una registrazione, seleziona Importa .
Eliminare una registrazione
Per eliminare una registrazione:
- Fai clic su Elimina. Si apre una finestra di dialogo di conferma.
- Nella finestra di dialogo, fai clic su Elimina per confermare l'eliminazione.