Utilizza Performance Monitor per avere rapidamente un'idea delle prestazioni di carico e runtime del tuo sito.
Panoramica
Il riquadro Monitoraggio del rendimento mostra una sequenza temporale che mostra le metriche sul rendimento in tempo reale. Fai clic su una metrica per visualizzarla o nasconderla. Poi, osserva come cambia il grafico quando interagisci con l'app.
Lo strumento di monitoraggio delle prestazioni tiene traccia delle seguenti metriche:
- Utilizzo CPU.
- Dimensione heap JavaScript.
- Il numero totale di nodi DOM, listener di eventi JavaScript, documenti e frame nella pagina.
- Layout e ricalcoli di stile al secondo.
Apri il riquadro Monitoraggio prestazioni
Per aprire il riquadro Performance Monitor:
- Apri DevTools.
- Apri il menu Comando premendo:
- macOS: Comando+Maiusc+P
- Windows, Linux, ChromeOS: Ctrl+Maiusc+P
- Inizia a digitare
Performance monitor, seleziona Mostra Performance Monitor e premi Invio. DevTools mostra il riquadro Performance Monitor nella parte inferiore della finestra di DevTools.
In alternativa, nell'angolo in alto a destra, seleziona more_vert Altre opzioni > Altri strumenti > Performance Monitor.
Utilizzare il riquadro Performance Monitor
Lo strumento Performance Monitor offre un'idea generale delle prestazioni in fase di runtime del tuo sito web.
Osservare come cambiano i valori delle metriche quando interagisci con il tuo sito web può rivelare opportunità di miglioramento.
Una funzionalità utile di Performance Monitor è che persiste per tutta la navigazione nelle pagine. Pertanto, in qualità di sviluppatore frontend, puoi evitare problemi come il layout del layout aprendo Performance Monitor, scorrendo il sito web e tenendo d'occhio le metriche Nodi DOM e Layout/sec.
Se gli utenti segnalano tempi di caricamento lenti sul tuo sito, Performance Monitor può aiutarti a identificare le aree con problemi.
Ad esempio, un grande picco nell'utilizzo della CPU può puntare a un codice inefficiente. In generale, se una pagina contiene un numero elevato di Listener di eventi JS, potrebbe essere utile eseguire il refactoring del codice e ridurre questi valori per liberare memoria.
Se hai appena iniziato ad analizzare il rendimento, la soluzione consigliata è utilizzare innanzitutto il riquadro Lighthouse e poi analizzare ulteriormente il rendimento utilizzando il riquadro Prestazioni o Performance Monitor.