Utilizza lo strumento Monitoraggio delle prestazioni per avere rapidamente un'idea delle prestazioni di caricamento e runtime del tuo sito.
Panoramica
Il riquadro Performance Monitoring mostra una sequenza temporale che rappresenta graficamente le metriche del rendimento in tempo reale. Fai clic su una metrica per visualizzarla o nasconderla. Poi, controlla come cambia il grafico quando interagisci con l'app.
Il monitoraggio delle prestazioni monitora le seguenti metriche:
- CPU utilizzata.
- 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 Performance Monitoring
Per aprire il riquadro Performance Monitoring:
- Apri DevTools.
- Apri il menu Comando premendo:
- macOS: Comando+Maiusc+P
- Windows, Linux, ChromeOS: Ctrl+Maiusc+P
- Inizia a digitare
Performance monitor, seleziona Mostra monitoraggio del rendimento e premi Invio. DevTools mostra il riquadro Performance Monitoring nella parte inferiore della finestra di DevTools.
In alternativa, nell'angolo in alto a destra, seleziona more_vert Altre opzioni > Altri strumenti > Monitoraggio del rendimento.
Utilizzare il riquadro Performance Monitoring
Lo strumento Performance Monitor offre un'idea generale delle prestazioni di runtime del tuo sito web.
Osservare come cambiano i valori delle metriche mentre 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. In qualità di sviluppatore frontend, puoi evitare problemi come il thrashing 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, lo strumento Monitoraggio del rendimento può aiutarti a identificare le aree con problemi.
Ad esempio, un picco di utilizzo CPU può puntare a codice inefficiente. In generale, se una pagina contiene un numero elevato di listener di eventi JS, può essere utile eseguire il refactoring del codice e ridurre questi numeri per liberare memoria.
Se hai appena iniziato ad analizzare il rendimento, il percorso consigliato consiste nell'utilizzare innanzitutto il riquadro Lighthouse, poi effettuare ulteriori accertamenti utilizzando il riquadro Rendimento o Performance Monitor.