Gunakan panel Performa untuk menganalisis performa situs Anda.
Ringkasan
Panel Performance memungkinkan Anda merekam profil performa CPU aplikasi web. Analisis profil untuk menemukan potensi bottleneck performa dan cara mengoptimalkan penggunaan resource.
Gunakan panel Performance untuk melakukan tindakan berikut:
- Rekam profil performa.
- Mengubah setelan pengambilan gambar.
- Menganalisis laporan performa.
Untuk mendapatkan panduan komprehensif tentang cara meningkatkan performa situs Anda, lihat Menganalisis performa runtime.
Membuka panel Performa
Untuk membuka panel Performa, buka DevTools lalu pilih Performa dari kumpulan tab di bagian atas.
Atau, ikuti langkah-langkah berikut untuk membuka panel Performance dengan menu Perintah:
- Buka DevTools.
- Buka Command menu dengan menekan:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- Mulai ketik
Performance panel, pilih Tampilkan panel Performa, lalu tekan Enter.
Merekam profil performa
Jika Anda sudah siap merekam, panel Performance akan memberi Anda opsi berikut:
- Merekam performa runtime
- Mencatat performa pemuatan
- Mengambil screenshot saat merekam
- Paksa pembersihan sampah memori saat merekam
- Menyimpan rekaman
- Memuat rekaman
- Menghapus rekaman
Mengubah setelan pengambilan
Setelan perekaman memungkinkan Anda mengubah cara DevTools merekam rekaman performa dan dapat memberi Anda informasi tambahan dalam laporan. Klik Setelan pengambilan setelan untuk mengakses menu Setelan pengambilan.
Pilih opsi berikut dari menu Setelan pengambilan:
- Nonaktifkan contoh JavaScript: Menonaktifkan perekaman stack panggilan JavaScript yang ditampilkan di trek Utama yang dipanggil selama perekaman. Akan mengurangi overhead performa.
- Aktifkan instrumentasi cat lanjutan (lambat): Mengambil instrumentasi cat lanjutan. Sangat menghambat performa.
- Aktifkan statistik pemilih CSS (lambat): Merekam statistik pemilih CSS. Sangat menghambat performa.
- Throttling CPU: Menyimulasikan kecepatan CPU yang lebih lambat.
- Throttling jaringan: Simulasikan kecepatan jaringan yang lebih lambat.
- Konkurensi hardware: Mengonfigurasi nilai yang dilaporkan oleh
navigator.hardwareConcurrency.
Menganalisis laporan performa
Lihat Menganalisis rekaman performa untuk mengetahui panduan lengkap tentang cara menggunakan panel Performa.
Berikut ini menyajikan pengelompokan topik dari panduan, ditambah dokumentasi bermanfaat lainnya:
Untuk mempelajari cara melihat laporan:
Untuk mempelajari cara berfokus pada hal yang penting bagi alur kerja Anda:
- Mengubah urutan dan menyembunyikan lagu
- Menyembunyikan fungsi dan turunannya di flame chart
- Membuat breadcrumb dan beralih antar-tingkat zoom
Untuk mempelajari tab Bottom-up, Hierarki panggilan, dan Log peristiwa:
Untuk mempelajari cara menganalisis laporan:
- Melihat aktivitas thread utama
- Baca flame chart
- Melihat screenshot
- Melihat metrik memori
- Melihat durasi sebagian rekaman
- Menganalisis performa pemilih CSS selama peristiwa Hitung Ulang Gaya
- Performa Node.js Profil dengan panel Performance
- Menganalisis frame per detik (FPS)
- Referensi peristiwa linimasa
Tingkatkan performa dengan panel ini
Temukan panel lain yang dapat membantu Anda meningkatkan performa situs Anda:
- Lighthouse: Mengoptimalkan kecepatan situs
- Memori: Ringkasan panel memori
- Insight performa: Dapatkan hasil analisis yang bisa ditindaklanjuti tentang performa situs Anda
- Rendering: Menemukan masalah terkait performa rendering
- Masalah: Menemukan dan memperbaiki masalah
- Performa: Lihat informasi lapisan