Utilizza il riquadro Informazioni sulle prestazioni per ottenere informazioni strategiche e basate su casi d'uso sul rendimento del tuo sito web.
Panoramica
Il riquadro Informazioni sulle prestazioni ti consente di:
- Registra e misura le prestazioni di caricamento pagina.
- Visualizza le metriche sul rendimento dei Web Vitals.
- Visualizza l'attività di rete.
- Simula velocità di CPU e rete più lente.
- Importa ed esporta le registrazioni.
Perché un nuovo riquadro?
Il nuovo riquadro Informazioni sulle prestazioni è un esperimento per risolvere questi tre problemi degli sviluppatori quando lavorano con il riquadro Rendimento esistente:
- Troppe informazioni. Con la UI rinnovata, il riquadro Approfondimenti sul rendimento semplifica i dati e mostra solo le informazioni pertinenti.
- Difficile distinguere i casi d'uso. Il riquadro Informazioni sulle prestazioni supporta l'analisi basata sui casi d'uso. Al momento supporta solo lo scenario di utilizzo del caricamento della pagina, ma in futuro ne verranno aggiunti altri in base al tuo feedback, ad esempio l'interattività.
- Richiede una conoscenza approfondita del funzionamento dei browser per essere utilizzato in modo efficace. Il riquadro Informazioni sul rendimento evidenzia le informazioni chiave nel riquadro Approfondimenti, con feedback pratici su come risolvere i problemi.
Introduzione
Questo tutorial ti insegna a misurare e comprendere il rendimento del 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 > Approfondimenti sul rendimento.
In alternativa, utilizza il menu dei comandi per aprire il riquadro Approfondimenti sul rendimento.
Prestazioni del record
Il riquadro Informazioni sul rendimento può registrare il rendimento generale e quello 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 Approfondimenti sul rendimento.
Puoi limitare la rete e la CPU durante la registrazione. Per questo tutorial, seleziona Disattiva cache e imposta CPU su Rallentamento 4x nel menu a discesa:
Fai clic su Misura il caricamento della pagina. DevTools registra le metriche delle prestazioni durante il ricaricamento della pagina e poi interrompe automaticamente la registrazione un paio di secondi dopo il termine del caricamento della pagina.
Riprodurre una registrazione delle prestazioni
Utilizza i controlli in basso per controllare la riproduzione della registrazione.
Ecco un esempio di come farlo.
- 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 delle prestazioni
DevTools esegue automaticamente lo zoom indietro per mostrare la sequenza temporale completa della registrazione. Puoi navigare nella registrazione con lo zoom e spostare la sequenza temporale.
Per aumentare e ridurre lo zoom e spostare la cronologia a sinistra e a destra, utilizza i pulsanti di navigazione corrispondenti:
- Fai clic sulla sequenza temporale per spostare la testina di riproduzione e visualizzare un fotogramma specifico.
- Fai clic sui controlli Aumenta lo zoom e Diminuisci lo zoom in basso per eseguire lo zoom. In questo caso, lo zoom viene eseguito in base alla testina di riproduzione.
- Trascina la barra di scorrimento orizzontale in basso per spostare la sequenza temporale a sinistra e a destra.
In alternativa, puoi utilizzare le scorciatoie da tastiera. Fai clic sul pulsante per visualizzare le scorciatoie.
Quando utilizzi le scorciatoie, lo zoom viene eseguito in base al cursore del mouse.
Visualizzare gli approfondimenti sul rendimento
Visualizza un elenco di approfondimenti sul rendimento nel riquadro Approfondimenti. Identificare e risolvere potenziali problemi di rendimento.
Passa il mouse sopra ogni approfondimento per evidenziarlo nelle tracce principali.
Fai clic su un approfondimento, ad esempio la richiesta di blocco del rendering, per aprirlo nel riquadro Dettagli. Per comprendere meglio il problema, esamina le sezioni File, Problema, Come risolvere e altro ancora.
Visualizzare le metriche sul rendimento di Web Vitals
Web Vitals è un'iniziativa di Google pensata per offrire indicazioni unificate relative a indicatori di qualità fondamentali per garantire un'eccellente esperienza utente sul Web.
Puoi visualizzare queste metriche nel riquadro Cronologia e Approfondimenti.
Passa il mouse sopra gli approfondimenti nella cronologia per scoprire di più sulle metriche.
Scopri i ritardi del Largest Contentful Paint
Largest Contentful Paint (LCP) è una delle metriche Core Web Vitals. Indica il tempo di rendering dell'immagine o del blocco di testo più grande visibile nell'area visibile rispetto a quando è iniziato il caricamento della pagina per la prima volta.
Un buon punteggio LCP è pari o inferiore a 2,5 secondi.
Se il rendering della Largest Contentful Paint sulla tua pagina richiede più tempo, nella cronologia 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 gli stili critici in linea per risolvere il problema. Per saperne 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 > Suddivisione dei tempi.
Il tempo di rendering LCP è costituito dalle seguenti sottosezioni:
| Sotto-parte LCP | Descrizione |
|---|---|
| Time to First Byte (TTFB) | Il tempo che intercorre tra l'inizio 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 | La differenza tra 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 momento in cui il caricamento della risorsa LCP termina e il momento in cui l'elemento LCP viene visualizzato completamente. |
Se un elemento LCP non richiede il caricamento di una risorsa per il rendering, il ritardo e il tempo di caricamento della risorsa vengono omessi. Ad esempio, nel caso in cui l'elemento sia un nodo di testo visualizzato con un carattere di sistema.
Visualizza l'attività di variazioni di layout
Visualizza l'attività di spostamento del layout nella traccia Spostamenti del layout.
Le variazioni del layout sono raggruppate in un periodo della sessione. Nell'esempio, sono presenti due finestre di sessione. Le finestre di sessione hanno intervalli tra di loro.
Cumulative Layout Shift (CLS) è una delle metriche Core Web Vitals. Utilizza la traccia Variazioni del layout per identificare potenziali problemi e cause delle variazioni del layout.
Inizia sempre con la finestra di sessione più grande quando migliori la metrica CLS. Nel nostro esempio, la finestra della sessione 1 è la più grande, in base al colore di sfondo e al livello.
Fai clic su uno screenshot per visualizzare i dettagli dello spostamento del layout, identificare le potenziali cause principali e gli elementi interessati.
Nel nostro esempio, la potenziale causa principale è media senza dimensioni. Per scoprire come risolvere il problema, vedi Ottimizzare lo spostamento cumulativo del layout.
Informazioni sul punteggio della variazione del layout
Per capire come vengono calcolati i punteggi, utilizza la sezione Finestra nel riquadro Dettagli. La finestra mostra a quale periodo della sessione appartiene la variazione del layout corrente.
Se l'intera pagina viene spostata, il punteggio massimo di ogni variazione del layout è 1. Nel nostro esempio, il primo spostamento del layout ha ottenuto un punteggio di 0.15. Il secondo spostamento del layout ha ottenuto un punteggio di 0.041.
Il punteggio totale per questo periodo della sessione è 0.19. In base alla soglia CLS, richiede miglioramenti. Il colore di sfondo della finestra della sessione riflette lo stesso valore.
Il grafico di sfondo della finestra della sessione aumenta nel tempo. Il punteggio cumulativo della variazione del layout riflette l'aumento in quel momento.
Visualizzare l'attività di rete
Visualizza l'attività di rete nella traccia Rete. Puoi espandere la traccia di rete per visualizzare tutte le attività di rete e fare clic su ogni elemento per visualizzare i dettagli.
Visualizza l'attività del renderer
Visualizza l'attività di rendering nella traccia Renderer. Puoi espandere ogni renderer per visualizzare le attività e fare clic su ogni elemento per visualizzare i dettagli.
Visualizzare l'attività della GPU
Visualizza l'attività della GPU nella traccia GPU. La traccia GPU è nascosta per impostazione predefinita. Per attivarlo, seleziona GPU in Impostazioni.
Visualizza i tempi utente
Per ottenere misure di rendimento personalizzate, puoi utilizzare User Timing e visualizzare i tempi con la traccia Timing. Per saperne di più, consulta l'API User Timing.
Consulta questa pagina demo che calcola il tempo trascorso per il 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 la performance.
- Visualizza le misurazioni nella traccia Tempi. Se non riesci a vedere la traccia, controlla Tempi utente in Impostazioni.
- Per visualizzare i dettagli, fai clic sul minutaggio della traccia.
Personalizzare l'interfaccia utente
Per personalizzare la Timeline 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.