Utilizza il riquadro Informazioni sul rendimento per ottenere informazioni strategiche e basate sui casi d'uso sul rendimento del tuo sito web.
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 la nuova interfaccia utente, il riquadro Informazioni sul rendimento snellisce i dati e mostra solo le informazioni pertinenti.
- Difficoltà a distinguere tra i casi d'uso. Il riquadro Informazioni sul rendimento supporta l'analisi basata sui casi d'uso. Al momento supporta solo i casi d'uso relativi al caricamento delle pagine, ma in futuro ne saranno aggiunti altri in base al tuo feedback, come ad esempio l'interattività.
- È necessaria una profonda conoscenza del funzionamento efficace dei browser. Il riquadro Informazioni sul rendimento evidenzia le informazioni principali disponibili nel riquadro Approfondimenti, con feedback utili su come risolvere i problemi.
Introduzione
Questo tutorial insegna a misurare e comprendere il rendimento del caricamento pagina con il riquadro Informazioni sul rendimento. Continua a leggere o guarda la versione video di questo tutorial qui sopra.
Apri il riquadro Informazioni sul rendimento
- Apri DevTools.
Fai clic su Altre opzioni > Altri strumenti > Informazioni sul rendimento.
In alternativa, utilizza il menu di comando per aprire il riquadro Informazioni 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 Disabilita cache e imposta CPU su Rallentamento 4x nel menu a discesa:
Fai clic su Misura il caricamento pagina. DevTools registra le metriche sul rendimento mentre la pagina si ricarica e 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 della procedura.
- 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 l'intera sequenza temporale della registrazione. Puoi spostarti all'interno della registrazione con lo zoom e spostare la sequenza temporale.
Per eseguire lo zoom e spostare la sequenza temporale 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 determinato frame.
- 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 nella parte inferiore 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, esegui lo zoom in base al cursore del mouse.
Visualizza informazioni sulle prestazioni
Consulta un elenco di approfondimenti sulle prestazioni 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 ulteriormente il problema, esamina le sezioni File, Problema, Come risolvere il problema e altro ancora.
Visualizza le metriche sul rendimento di Web Vitals
Web Vitals è un'iniziativa di Google per fornire indicazioni unificate per gli indicatori di qualità 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 trovare suggerimenti per risolverli.
In questo esempio, una richiesta blocca il rendering e puoi applicare stili critici in linea per risolvere il problema. Per ulteriori informazioni, consulta la sezione Eliminare le risorse di blocco della visualizzazione.
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 dalle seguenti sottoparti:
| Sottoparte LCP | Descrizione |
|---|---|
| TTLB (Time to First Byte) | 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 TTFB e l'avvio del caricamento della risorsa LCP da parte del browser. |
| 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, nel caso in cui l'elemento sia 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.
CLS (Cumulative Layout Shift) è una delle metriche 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 informazioni su come risolvere il problema, consulta l'articolo Ottimizzare la variazione del layout cumulativo.
Informazioni sul punteggio delle variazioni del layout
Per capire come vengono calcolati i punteggi, utilizza la sezione Finestra nel riquadro Dettagli. La Finestra mostra a quale finestra di sessione appartiene la variazione del layout corrente.
Se viene spostata l'intera pagina, il punteggio massimo di ogni variazione del layout è 1. Nel nostro esempio, la prima variazione del layout ha totalizzato 0.15. La seconda variazione del layout ha totalizzato 0.041.
Il punteggio totale per questa finestra della sessione è 0.19. In base alla soglia della CLS, è necessario migliorare. Il colore di sfondo della finestra della sessione riflette lo stesso.
Il grafico di 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. È possibile espandere il percorso di rete per visualizzare tutte le attività di rete e fare clic su ciascun elemento per visualizzare i dettagli.
Visualizza attività del renderer
Visualizza l'attività di rendering nella traccia Renderer. Puoi espandere ogni renderer per visualizzare le attività e fare clic su ciascun elemento per visualizzare i dettagli.
Visualizza attività GPU
Visualizza l'attività della GPU nella traccia GPU. La traccia GPU è nascosta per impostazione predefinita. Per abilitarlo, seleziona GPU in Impostazioni.
Visualizza i tempi utente
Per ottenere misure del rendimento personalizzate, puoi utilizzare Tempi utenti e visualizzare i tempi con la traccia Tempi. Per ulteriori informazioni, consulta la sezione sull'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 Spostamenti e Percorsi, 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.