Utilizza il riquadro Rendimento per analizzare il rendimento del tuo sito web.
Panoramica
Il riquadro Prestazioni ti consente di registrare i profili delle prestazioni della CPU delle tue applicazioni web. Analizza i profili per individuare potenziali colli di bottiglia delle prestazioni e modi in cui puoi ottimizzare l'utilizzo delle risorse.
Utilizza il riquadro Rendimento per:
- Registrare un profilo del rendimento.
- Modifica le impostazioni di acquisizione.
- Analizzare un report sul rendimento.
Per una guida completa sul miglioramento delle prestazioni del tuo sito web, consulta Analisi delle prestazioni di runtime.
Apri il riquadro Rendimento
Per aprire il riquadro Rendimento, apri DevTools e seleziona Rendimento da un insieme di schede in alto.
In alternativa, segui questi passaggi per aprire il riquadro Rendimento con il menu Comando:
- Apri DevTools.
- Apri il menu Comando premendo:
- macOS: Comando+Maiusc+P
- Windows, Linux, ChromeOS: Ctrl+Maiusc+P
- Inizia a digitare
Performance panel, seleziona Mostra riquadro Rendimento e premi Invio.
Registrare un profilo del rendimento
Quando è tutto pronto per registrare, il riquadro Rendimento offre le seguenti opzioni:
- Registrare le prestazioni di runtime
- Registrare le prestazioni di caricamento
- Acquisire screenshot durante la registrazione
- Forzare la garbage collection durante la registrazione
- Salvare una registrazione
- Caricare una registrazione
- Cancellare una registrazione
Modifica impostazioni di acquisizione
Le impostazioni di acquisizione ti consentono di modificare il modo in cui DevTools acquisisce le registrazioni delle prestazioni e possono fornirti ulteriori informazioni nel report. Fai clic su Acquisisci impostazioni impostazioni per accedere al menu Impostazioni di acquisizione.
Seleziona le seguenti opzioni dal menu Impostazioni di acquisizione:
- Disabilita esempi JavaScript: disattiva la registrazione degli stack di chiamate JavaScript visualizzati nella traccia Principale che vengono chiamate durante la registrazione. Riduce l'overhead delle prestazioni.
- Attiva la strumentazione di colorazione avanzata (lenta): acquisisce la strumentazione di colorazione avanzata. Ostacola significativamente il rendimento.
- Attiva le statistiche del selettore CSS (lento): acquisisce le statistiche del selettore CSS. Ostacola significativamente il rendimento.
- Limitazione CPU: simula velocità della CPU più basse.
- Limitazione della rete: simula velocità di rete inferiori.
- Contemporaneità hardware: configura il valore riportato da
navigator.hardwareConcurrency.
Analizzare un report sul rendimento
Consulta Analizzare una registrazione del rendimento per una guida completa su come utilizzare il riquadro Rendimento.
Di seguito viene presentato un raggruppamento di argomenti della guida, oltre ad altra documentazione utile:
Per scoprire come esplorare il report:
Per scoprire come concentrarti su ciò che conta per il tuo flusso di lavoro:
- Cambiare l'ordine delle tracce e nasconderle
- Nascondere le funzioni e i relativi elementi secondari nel grafico a fiamme
- Creare breadcrumb e passare da un livello di zoom all'altro
Per informazioni sulle schede In basso, struttura ad albero delle chiamate e Log eventi:
Per scoprire come analizzare il report:
- Visualizzare l'attività del thread principale
- Leggi il grafico a fiamme
- Visualizzare uno screenshot
- Visualizzare le metriche della memoria
- Visualizzare la durata di una parte di una registrazione
- Analizzare le prestazioni del selettore CSS durante gli eventi di ricalcolo di stile
- Profilo delle prestazioni di Node.js con il riquadro Prestazioni
- Analizzare i frame al secondo (f/s)
- Informazioni sugli eventi della sequenza temporale
Migliora le prestazioni con questi riquadri
Scopri altri riquadri che possono aiutarti a migliorare il rendimento del tuo sito web:
- Lighthouse: ottimizzare la velocità del sito web
- Memoria: panoramica del riquadro Memoria
- Informazioni sul rendimento: ottieni informazioni strategiche sul rendimento del tuo sito web
- Rendering: scopri i problemi relativi alle prestazioni del rendering
- Problemi: trovare e risolvere i problemi
- Rendimento: visualizzazione delle informazioni dei livelli