Panel performa: Menganalisis performa situs

Dale St. Marthe
Dale St. Marthe
LinkedIn

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 Performa untuk melakukan hal 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:

  1. Buka DevTools.
  2. Buka Menu perintah 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.

Amati Core Web Vitals secara langsung

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.

Bandingkan 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 bagian Performance > Langkah berikutnya > Data kolom, klik Siapkan.

    Halaman '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 Lanjutan, lalu klik + Baru.

    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.

    Periode pengumpulan data kolom setelah diambil.

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

Mengonfigurasi lingkungan Anda agar lebih cocok dengan lingkungan pengguna

Setelah pengambilan data kolom disiapkan seperti yang dijelaskan di bagian sebelumnya, panel Performa memberi Anda rekomendasi tentang cara mengonfigurasi lingkungan agar lebih sesuai dengan pengalaman pengguna.

Untuk mengonfigurasi lingkungan Anda:

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

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

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

  2. Agar cocok dengan konfigurasi lingkungan untuk contoh ini:

    1. Tetapkan area tampilan 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 menjelajah. Untuk memastikan Anda membandingkan skor metrik lokal dengan data kolom yang benar, Anda dapat memilih Desktop dari Data kolom > Daftar drop-down Perangkat.
    3. Di bagian Environment settings, tetapkan menu drop-down Network ke, misalnya, Fast 4G, dan CPU ke, misalnya, 20x slowdown. Anda juga dapat memastikan untuk Menonaktifkan cache jaringan di bagian yang sama.

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

    Lingkungan dikonfigurasi agar sesuai dengan pengalaman pengguna di dunia nyata.

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

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

Mendapatkan dan menganalisis laporan performa

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

Merekam profil performa

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

Mengubah setelan pengambilan

Setelan perekaman memungkinkan Anda mengubah cara DevTools merekam rekaman 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, Call tree, dan Event log:

Untuk mempelajari cara menganalisis laporan:

Meningkatkan performa dengan panel ini

Temukan panel lain yang dapat membantu Anda meningkatkan performa situs: