Panel performa: Menganalisis performa situs

Gunakan panel Performa untuk menganalisis performa situs Anda.

Ringkasan

Panel Performa memungkinkan Anda merekam profil performa CPU aplikasi web. Analisis profil untuk menemukan potensi bottleneck performa dan cara mengoptimalkan penggunaan resource.

Gunakan panel Performa untuk melakukan hal berikut:

• Merekam profil performa.
• Mengubah setelan perekaman.
• Menganalisis laporan performa.

Untuk panduan komprehensif tentang cara meningkatkan performa situs Anda, lihat Menganalisis performa runtime.

Membuka panel Performa

Untuk membuka panel Performa, buka DevTools dan pilih Performa dari kumpulan tab di bagian atas.

Atau, ikuti langkah-langkah berikut untuk membuka panel Performa dengan Menu perintah:

1. Buka DevTools.
2. Buka Menu perintah dengan menekan:
3. macOS: Command+Shift+P
4. Windows, Linux, ChromeOS: Control+Shift+P
5. Mulai ketik Performance panel, pilih Show Performance panel, lalu tekan Enter.

Mengamati Core Web Vitals secara langsung

Saat Anda membuka panel Performa, panel ini akan langsung mengambil dan menampilkan metrik Largest Contentful Paint (LCP) dan Cumulative Layout Shift (CLS) lokal Anda serta memberi tahu skornya (baik, perlu ditingkatkan, atau buruk).

Jika Anda berinteraksi dengan halaman, panel Performa juga akan mengambil Interaction to Next Paint (INP) lokal dan skornya, yang selain LCP dan CLS, memberi Anda ringkasan lengkap Core Web Vitals halaman Anda menggunakan koneksi jaringan dan perangkat Anda. Panel ini juga mengambil dan melaporkan Core Web Vitals untuk navigasi soft sisi klien dalam aplikasi satu halaman.

Di bagian tiga kartu metrik di tab Interaksi dan Pergeseran tata letak, Anda dapat menemukan tabel berisi informasi tentang interaksi dan pergeseran tata letak yang diambil, termasuk elemen, waktu, fase (untuk interaksi), dan skor (untuk pergeseran tata letak). Untuk menghapus kedua daftar, klik blok Hapus.

Untuk mendapatkan perincian skor metrik, arahkan kursor ke nilai metrik untuk melihat tooltip.

Membandingkan pengalaman Anda dengan pengalaman pengguna

Anda juga dapat mengambil data kolom dari Chrome UX Report dan membandingkan pengalaman pengguna situs Anda dengan metrik lokal Anda.

Untuk menambahkan data kolom:

1. Di Performa > Langkah berikutnya > Data kolom, klik Siapkan.

   

2. Dalam dialog Konfigurasi pengambilan data kolom, perhatikan Pengungkapan privasi, lalu klik Oke.

   Lanjutan: Menyiapkan pemetaan antara lingkungan pengembangan dan produksi...

   Secara opsional, untuk mendapatkan data kolom yang paling relevan secara otomatis, Anda dapat menyiapkan (beberapa) pemetaan antara origin pengembangan dan produksi:

   1. Di jendela dialog, luaskan bagian Lanjutan , lalu klik + Baru.

   2. Di tabel pemetaan, masukkan URL pengembangan dan produksi Anda, lalu klik +.

      

      Misalnya, pemetaan http://localhost:8080 ke https://example.com akan menampilkan data kolom untuk example.com/page1 saat Anda membuka localhost:8080/page1.

      Selain itu, jika karena alasan tertentu Anda tidak dapat memperoleh data kolom secara otomatis, Anda dapat mengaktifkan check_boxSelalu tampilkan data kolom untuk URL di bawah dan memberikan URL. Panel Performa akan mencoba mengambil data kolom untuk URL ini terlebih dahulu, lalu menampilkan data kolom ini kepada Anda, apa pun halaman yang Anda buka.

      Untuk mengubah setelan pengambilan data kolom setelah penyiapan, klik Data kolom > Konfigurasi

   Dengan penyiapan pengambilan data kolom, panel Performa kini menampilkan perbandingan antara skor metrik lokal Anda dan skor yang dialami pengguna Anda. Anda dapat melihat periode pengumpulan di bagian Data kolom di sebelah kanan.

   

   Untuk mendapatkan perincian skor metrik, arahkan kursor ke nilai metrik untuk melihat tooltip.

Mengonfigurasi lingkungan Anda agar lebih sesuai dengan lingkungan pengguna

Dengan penyiapan pengambilan data kolom seperti yang dijelaskan di bagian sebelumnya, panel Performa akan memberikan rekomendasi tentang cara mengonfigurasi lingkungan Anda agar lebih sesuai dengan pengalaman pengguna Anda.

Untuk mengonfigurasi lingkungan Anda:

1. Di setiap kartu metrik, luaskan bagian Pertimbangkan kondisi pengujian lokal Anda, jika ada, lalu baca rekomendasi.

   

   Sepertinya dalam contoh ini, agar lebih sesuai dengan pengalaman pengguna Anda, sebaiknya gunakan ukuran layar desktop umum dan kurangi CPU serta jaringan.

2. Untuk mencocokkan konfigurasi lingkungan untuk contoh ini:

   1. Tetapkan area pandang Anda ke salah satu ukuran layar umum (misalnya, 720p atau 1080p). Untuk mengemulasi perangkat dan ukuran layar tertentu, Anda dapat menggunakan Mode perangkat di panel Elemen.
   2. 82% pengguna situs dalam contoh ini menggunakan desktop untuk menjelajahi. Untuk memastikan Anda membandingkan skor metrik lokal dengan data kolom yang benar, Anda dapat memilih Desktop dari menu drop-down Data kolom > Perangkat.
   3. Di bagian Setelan lingkungan, tetapkan daftar drop-down Jaringan ke, misalnya, 4G Cepat, dan CPU ke, misalnya, 20x lebih lambat. Anda juga dapat memastikan untuk check_box Nonaktifkan cache jaringan di bagian yang sama.

3. Setelah lingkungan Anda dikonfigurasi, muat ulang halaman, berinteraksi dengannya untuk mengambil INP lokal Anda, dan bandingkan skor metrik lagi.

   

   Skor metrik kini terlihat lebih mirip dengan skor yang dialami pengguna Anda. Oleh karena itu, bagian Pertimbangkan kondisi pengujian lokal Anda menghilang dari kartu metrik.

Dengan demikian, Anda kini dapat mulai meningkatkan Core Web Vitals situs Anda:

• Mengoptimalkan LCP
• Mengoptimalkan INP
• Mengoptimalkan CLS

Mengambil dan menganalisis laporan performa

Di bagian berikutnya, ikuti panduan tentang cara merekam profil, mengubah setelan perekaman, dan menganalisis laporan.

Merekam profil performa

Saat Anda siap merekam, panel Performa akan memberi Anda opsi berikut:

• Merekam performa runtime
• Merekam performa pemuatan
• Mengambil screenshot saat merekam
• Memaksa pengumpulan sampah saat merekam
• Menyimpan rekaman
• Memuat rekaman
• Menghapus rekaman

Mengubah setelan perekaman

Setelan perekaman memungkinkan Anda mengubah cara DevTools mengambil rekaman performa dan dapat memberi Anda informasi tambahan dalam laporan. Klik Setelan perekaman settings untuk mengakses menu Setelan perekaman.

Pilih opsi berikut dari menu Setelan perekaman:

• Nonaktifkan sampel JavaScript: Menonaktifkan perekaman stack panggilan JavaScript yang ditampilkan di jalur Utama yang dipanggil selama perekaman. Akan mengurangi overhead performa.
• Aktifkan instrumentasi paint lanjutan (lambat): Mengambil instrumentasi paint lanjutan. Sangat menghambat performa.
• Aktifkan statistik pemilih CSS (lambat): Mengambil statistik pemilih CSS. Sangat menghambat performa.
• Throttling CPU: Menyimulasikan kecepatan CPU yang lebih lambat.
• Throttling jaringan: Menyimulasikan kecepatan jaringan yang lebih lambat.
• Pengambilan screenshot: Pilih preset batas jumlah dan ukuran frame screenshot saat Screenshot diaktifkan.

Menganalisis laporan performa

Lihat Menganalisis rekaman performa untuk panduan lengkap tentang cara menggunakan panel Performa.

Berikut adalah pengelompokan topik dari panduan, ditambah dokumentasi bermanfaat lainnya:

Untuk mempelajari cara menavigasi laporan:

• Menavigasi rekaman
• Aktivitas penelusuran
• Melacak pemrakarsa peristiwa

Menggunakan Insight Performa untuk mendapatkan hasil analisis yang bisa ditindaklanjuti tentang performa situs Anda:

• Insight Performa

Untuk mempelajari cara berfokus pada hal yang penting bagi alur kerja Anda:

• Mengubah urutan jalur dan menyembunyikannya
• Menyembunyikan fungsi dan turunannya di diagram alir
• Membuat breadcrumb dan melompat antar tingkat zoom

Untuk mempelajari tab Bottom-up, Call tree, dan Log peristiwa:

• Melihat aktivitas dalam tabel

Untuk mempelajari cara menganalisis laporan:

• Melihat aktivitas thread utama
• Membaca diagram alir
• Melihat screenshot
• Melihat metrik memori
• Melihat durasi sebagian rekaman
• Menganalisis performa pemilih CSS selama peristiwa Hitung Ulang Gaya
• Membuat profil performa Node.js dengan panel Performa
• Menganalisis frame per detik (FPS)
• Referensi peristiwa linimasa

Meningkatkan performa dengan panel ini

Temukan panel lain yang dapat membantu Anda meningkatkan performa situs Anda:

• Lighthouse: Mengoptimalkan kecepatan situs
• Memori: Ringkasan panel memori
• Rendering: Menemukan masalah performa rendering
• Masalah: Menemukan dan memperbaiki masalah
• Performa: Melihat informasi lapisan

Referensi lainnya