Gunakan Pemantau performa untuk mendapatkan gambaran tentang performa pemuatan dan runtime situs Anda dengan cepat.
Ringkasan
Panel Performance monitor menampilkan linimasa yang memetakan metrik performa secara real time. Klik metrik untuk menampilkan atau menyembunyikannya. Kemudian, lihat bagaimana grafik berubah saat Anda berinteraksi dengan aplikasi.
Performance Monitor melacak metrik berikut:
- Penggunaan CPU.
- Ukuran heap JavaScript.
- Jumlah total node DOM, pemroses peristiwa JavaScript, dokumen, dan frame di halaman.
- Penghitungan ulang tata letak dan gaya per detik.
Membuka panel Performance Monitor
Untuk membuka panel Performance monitor:
- Buka DevTools.
- Buka Menu perintah dengan menekan:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- Mulai ketik
Performance monitor, pilih Tampilkan Performance monitor, lalu tekan Enter. DevTools menampilkan panel Performance monitor di bagian bawah jendela DevTools.
Atau, di sudut kanan atas, pilih Opsi lainnya > Alat lainnya > Pemantau performa.
Menggunakan panel Performance monitor
Pemantauan performa memberikan gambaran umum tentang performa runtime situs Anda.
Mengamati perubahan nilai metrik saat Anda berinteraksi dengan situs dapat mengungkapkan peluang peningkatan.
Fitur yang berguna dari Performance monitor adalah fitur ini tetap ada di seluruh navigasi halaman. Jadi, sebagai developer frontend, Anda dapat menghindari masalah seperti thrashing tata letak dengan membuka Performance monitor, men-scroll situs mereka, dan memantau metrik DOM Nodes dan Layout/sec.
Jika pengguna melaporkan waktu pemuatan yang lambat di situs Anda, Pemantau performa dapat membantu Anda mengidentifikasi area masalah.
Misalnya, lonjakan besar pada penggunaan CPU dapat menunjukkan kode yang tidak efisien. Dan secara umum, jika halaman berisi banyak pemroses peristiwa JS, sebaiknya faktorkan ulang kode Anda dan kurangi jumlah tersebut untuk mengosongkan memori.
Jika Anda baru mulai menganalisis performa, sebaiknya gunakan panel Lighthouse terlebih dahulu, lalu selidiki lebih lanjut menggunakan panel Performa atau Performance monitor.