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 che risolve questi tre punti dolenti per gli sviluppatori quando si lavora con il riquadro Rendimento esistente:
- Troppe informazioni. Con la nuova interfaccia utente, il riquadro Informazioni 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 i casi d'uso di caricamento delle pagine. In futuro saranno supportati altri casi in base ai tuoi feedback, ad esempio sull'interattività.
- Richiede una profonda conoscenza di come funzionano i browser per essere utilizzati in modo efficace. Il riquadro Informazioni sul rendimento evidenzia le informazioni chiave del riquadro Approfondimenti, con feedback utili su come risolvere i problemi.
Introduzione
Questo tutorial ti insegna come misurare e comprendere il rendimento del caricamento delle pagine con il riquadro Informazioni sul rendimento. Continua a leggere o guarda la versione video di questo tutorial sopra.
Apri il riquadro Informazioni sul rendimento
- Apri DevTools.
Fai clic su Altre opzioni > Altri strumenti > Informazioni sul rendimento.
In alternativa, utilizza il menu Comando per aprire il riquadro Approfondimenti sul rendimento.
Registra performance
Il riquadro Informazioni sulle prestazioni può registrare prestazioni generali e basate sui casi d'uso (ad esempio, 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 Rallenta 4x nel menu a discesa:
Fai clic su Misura il caricamento pagina. DevTools registra le metriche sulle prestazioni mentre la pagina viene ricaricata, quindi interrompe automaticamente la registrazione un paio di secondi dopo il termine del caricamento della pagina.
Riprodurre di nuovo una registrazione di un'esibizione
Usa i controlli in basso per controllare la riproduzione della registrazione.
Ecco un esempio di come fare.
- 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 l'anteprima visiva per mostrare o nascondere l'anteprima.
Esplorare una registrazione di un'esibizione
DevTools diminuisce 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 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 in modo da visualizzare un determinato fotogramma.
- Fai clic sui controlli per aumentare lo zoom e diminuire lo zoom in basso per eseguire lo zoom. In questo caso, lo zoom viene effettuato 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, esegui lo zoom in base al cursore del mouse.
Visualizza informazioni sul rendimento
Visualizza un elenco di informazioni sulle prestazioni nel riquadro Approfondimenti. Identifica e correggi potenziali problemi di prestazioni.
Passa il mouse sopra ciascuno degli approfondimenti 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 il problema e altro ancora.
Visualizzare le metriche sul rendimento di Segnali web
Web Vitals è un'iniziativa di Google per fornire una guida unificata per gli indicatori di qualità essenziali per offrire un'ottima esperienza utente sul web.
Puoi visualizzare queste metriche nel riquadro Spostamenti e Approfondimenti.
Passa il mouse sopra gli approfondimenti in Spostamenti per scoprire di più sulle metriche.
Scopri i ritardi nella visualizzazione con contenuti di grandi dimensioni
La metrica Largest Contentful Paint (LCP) è una delle metriche di Segnali web essenziali. Registra il tempo di rendering dell'immagine o del blocco di testo più grande visibile all'interno dell'area visibile, rispetto al primo avvio della pagina.
Un punteggio LCP buono è pari o inferiore a 2,5 secondi.
Se il rendering della visualizzazione con contenuti più grandi della tua 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 ricevere suggerimenti su come risolverli.
In questo esempio, una richiesta blocca il rendering e puoi applicare stili critici in linea per correggerla. Per saperne di più, consulta Eliminare le risorse che bloccano la 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 |
|---|---|
| Tempo per il primo 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 di 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. |
| 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 delle risorse per il rendering, il tempo e il ritardo di caricamento delle risorse vengono omessi. Ad esempio, nel caso in cui l'elemento sia un nodo di testo visualizzato con un carattere di sistema.
Visualizzare l'attività delle variazioni di layout
Visualizza l'attività delle variazioni di layout nel canale Variazioni di layout.
Le variazioni di layout vengono raggruppate in una finestra di sessione. Nell'esempio sono presenti due finestre di sessione. Le finestre di sessione contengono intervalli vuoti.
Cumulative Layout Shifts (CLS) è una delle metriche Core Web Vitals. Utilizza la traccia Variazioni di layout per identificare i potenziali problemi e le 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, basata sul colore e sul livello di sfondo.
Fai clic su uno screenshot per visualizzare i dettagli della variazione del layout e identificare le potenziali cause principali e gli elementi interessati.
Nel nostro esempio, la causa principale potrebbe essere la presenza di contenuti multimediali non di dimensioni. Per informazioni su come risolvere il problema, consulta Ottimizza le variazioni del layout cumulativo.
Informazioni sul punteggio delle variazioni del layout
Per comprendere come vengono calcolati i punteggi, utilizza la sezione Finestra nel riquadro Dettagli. La finestra mostra a quale finestra 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, la prima variazione del layout ha ottenuto un punteggio di 0.15. La seconda variazione del layout ha ottenuto un punteggio di 0.041.
Il punteggio totale per questa finestra di sessione è 0.19. In base alla soglia CLS, deve essere migliorato. Il colore di sfondo della finestra della sessione riflette lo stesso colore.
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 nel canale Rete. Puoi 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 ciascun renderer per visualizzare le attività e fare clic su ciascun elemento per visualizzare i dettagli.
Visualizza attività GPU
Visualizza l'attività della GPU nel canale GPU. La traccia GPU è nascosta per impostazione predefinita. Per abilitarla, seleziona GPU nelle Impostazioni.
Visualizza i tempi utente
Per ottenere misurazioni del rendimento personalizzate, puoi utilizzare Tempi utenti e visualizzarli con la traccia Tempistiche. Per ulteriori informazioni, consulta la pagina dedicata all'API User tempi.
Consulta questa pagina demo che calcola il tempo trascorso per il caricamento del testo.
Per visualizzare i tempi utente:
- Contrassegnare 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 la sezione Tempi utente in Impostazioni.
- Per visualizzare i dettagli, fai clic sui tempi della traccia.
Personalizzazione dell'interfaccia utente
Per personalizzare la Cronologia e i Tracciati, fai clic sull'icona delle Impostazioni nel 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.