Panel performa: Menganalisis performa situs

Dale St. Marthe
Dale St. Marthe
LinkedIn

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:

  • Rekam profil performa.
  • Mengubah setelan pengambilan.
  • Menganalisis laporan performa.

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

Buka panel Performa

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

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

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

Mengamati Data Web Inti secara live

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

Jika Anda berinteraksi dengan halaman, panel Performa juga akan merekam Interaction to Next Paint (INP) lokal dan skornya, yang, selain LCP dan CLS, memberi Anda ringkasan lengkap tentang Core Web Vitals halaman menggunakan koneksi jaringan dan perangkat Anda.

Panel Performa memberikan daftar interaksi yang direkam di bawah tiga kartu metrik. Untuk menghapus daftar, klik 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 Laporan UX Chrome dan membandingkan pengalaman pengguna situs dengan metrik lokal.

Untuk menambahkan data kolom:

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

    Tombol 'Siapkan' di bagian Langkah berikutnya.

  2. Dalam dialog Configure field data fetching, perhatikan Privacy disclosure, lalu klik Ok.

    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 Advanced, lalu klik + New.

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

      Pemetaan antara origin pengembangan dan produksi di bagian lanjutan.

      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 mendapatkan data kolom secara otomatis, Anda dapat mengaktifkan Selalu 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, apa pun halaman yang Anda buka.

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

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

    Pengumpulan data lapangan dilakukan setelah diambil.

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

Konfigurasi lingkungan Anda agar lebih cocok dengan pengguna

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

Untuk mengonfigurasi lingkungan Anda:

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

    Bagian 'Pertimbangkan kondisi pengujian lokal Anda' diperluas di setiap kartu metrik.

    Sepertinya dalam contoh ini, untuk lebih menyesuaikan pengalaman pengguna, Anda dapat menggunakan ukuran layar desktop umum dan mengurangi kecepatan CPU dan jaringan.

  2. Agar cocok dengan konfigurasi lingkungan untuk contoh ini:

    1. Setel area pandang ke salah satu ukuran layar yang umum (misalnya, 720p atau 1080p). Untuk mengemulasi perangkat dan ukuran layar tertentu, Anda dapat menggunakan Mode perangkat di panel Elemen.
    2. 82% pengguna {i>website<i} dalam contoh ini menggunakan desktop untuk menjelajah. 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 Environment settings, tetapkan menu drop-down Network ke, misalnya, Fast 4G, dan CPU ke, misalnya, 20x pelambatan. Anda juga dapat memastikan untuk Disable network cache di bagian yang sama.

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

    Lingkungan dikonfigurasi agar sesuai dengan pengalaman pengguna di dunia nyata.

    Sepertinya skor metrik sekarang lebih mirip dengan skor yang dialami pengguna Anda. Oleh karena itu, bagian Pertimbangkan kondisi pengujian lokal Anda akan hilang dari kartu metrik.

Dengan demikian, sekarang Anda dapat mulai meningkatkan Data Web Inti situs Anda:

Mengambil dan menganalisis laporan performa

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

Merekam profil performa

Jika Anda sudah siap merekam, panel Performance akan memberi Anda opsi berikut:

Mengubah setelan pengambilan

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

Pilih opsi berikut dari menu Setelan pengambilan:

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 menavigasi laporan:

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

Untuk mempelajari tab Bottom-up, Hierarki panggilan, dan Log peristiwa:

Untuk mempelajari cara menganalisis laporan:

Meningkatkan performa dengan panel ini

Temukan panel lain yang dapat membantu Anda meningkatkan performa situs: