Gunakan Pemantauan performa untuk dengan cepat mendapatkan gambaran tentang performa pemuatan dan runtime situs Anda.
Ringkasan
Panel Pemantauan performa menampilkan linimasa yang membuat grafik metrik performa secara real time. Klik metrik untuk menampilkan atau menyembunyikannya. Kemudian lihat bagaimana grafik berubah saat Anda berinteraksi dengan aplikasi.
Pemantau performa melacak metrik berikut:
- penggunaan CPU.
- Ukuran heap JavaScript.
- Jumlah total simpul DOM, pemroses peristiwa JavaScript, dokumen, dan bingkai di halaman.
- Tata letak dan penghitungan ulang gaya per detik.
Membuka panel Performance monitor
Untuk membuka panel Performance monitor:
- Buka DevTools.
- Buka menu Command dengan menekan:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- Mulai ketik
Performance monitor, pilih Show Performance monitor, lalu tekan Enter. DevTools menampilkan panel Performance monitor di bagian bawah jendela DevTools.
Atau, di sudut kanan atas, pilih more_vert Opsi lainnya > Alat lainnya > Pemantauan performa.
Menggunakan panel Performance monitor
Pemantauan performa memberikan gambaran umum tentang performa runtime situs Anda.
Mengamati bagaimana nilai metrik berubah saat Anda berinteraksi dengan situs web dapat membuka peluang untuk peningkatan.
Fitur yang berguna dari Pemantauan performa adalah fitur ini akan tetap ada di sepanjang navigasi halaman. Jadi, sebagai developer frontend, Anda dapat menghindari masalah seperti layout thrashing dengan membuka Monitor performa, men-scroll situs mereka, serta memantau metrik DOM Node dan Tata Letak/dtk.
Jika pengguna melaporkan waktu pemuatan yang lambat di situs Anda, Pemantauan performa dapat membantu Anda mengidentifikasi area masalah.
Misalnya, lonjakan besar dalam penggunaan CPU dapat mengarah ke kode yang tidak efisien. Dan umumnya, jika halaman berisi banyak pemroses peristiwa JS, ada baiknya Anda memfaktorkan ulang kode dan mengurangi jumlah tersebut untuk mengosongkan memori.
Jika Anda baru mulai menganalisis performa, jalur yang direkomendasikan adalah menggunakan panel Lighthouse terlebih dahulu, lalu menyelidiki lebih lanjut menggunakan panel Performa atau Pemantauan performa.