Utilizza il Monitor delle prestazioni per avere rapidamente un'idea del carico e delle prestazioni di runtime del tuo sito.
Panoramica
Il riquadro Monitoraggio prestazioni mostra una sequenza temporale che rappresenta le metriche sul rendimento in tempo reale. Fai clic su una metrica per mostrarla o nasconderla. Poi, osserva come cambia il grafico man mano che interagisci con l'app.
Il monitoraggio del rendimento monitora le seguenti metriche:
- Utilizzo della CPU.
- Dimensioni dell'heap di JavaScript.
- Il numero totale di nodi DOM, listener di eventi JavaScript, documenti e frame nella pagina.
- Layout e ricalcoli dello stile al secondo.
Apri il riquadro Monitoraggio del rendimento
Per aprire il riquadro Monitoraggio del rendimento:
- Apri DevTools.
- Apri il menu Comando premendo:
- macOS: Comando+Maiusc+P
- Windows, Linux, ChromeOS: Control+Maiusc+P
- Inizia a digitare
Performance monitor, seleziona Mostra Monitoraggio prestazioni e premi Invio. DevTools mostra il riquadro Monitoraggio prestazioni nella parte inferiore della finestra DevTools.
In alternativa, nell'angolo in alto a destra, seleziona Altre opzioni > Altri strumenti > Monitoraggio del rendimento.
Utilizzare il riquadro Monitoraggio del rendimento
Il monitor delle prestazioni fornisce un'idea generale del rendimento in fase di esecuzione 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 del Monitoraggio del rendimento è che rimane attivo durante la navigazione nella pagina. Pertanto, in qualità di sviluppatore frontend, puoi evitare problemi come il thrashing del layout aprendo il Monitoraggio prestazioni, 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, il Monitoraggio del rendimento può aiutarti a identificare le aree problematiche.
Ad esempio, un picco elevato di utilizzo della CPU può indicare un codice inefficiente. In genere, se una pagina contiene un numero elevato di ascoltatori di eventi JS, potrebbe essere utile eseguire il refactoring del codice e ridurre questi numeri per liberare memoria.
Se stai appena iniziando ad analizzare il rendimento, il percorso consigliato è utilizzare prima il riquadro Lighthouse e poi approfondire l'argomento utilizzando il riquadro Rendimento o Monitoraggio del rendimento.