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 panduan komprehensif tentang cara meningkatkan performa situs, 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 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.

Mengamati Core Web Vitals 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 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 kepada Anda, 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

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. Untuk mencocokkan 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 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 slowdown. Anda juga dapat memastikan untuk Disable network cache 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 cocok dengan pengalaman pengguna di dunia nyata.

    Sepertinya skor metrik kini lebih mirip dengan 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:

Mengambil 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 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 mendapatkan panduan lengkap tentang cara menggunakan panel Performa.

Berikut adalah pengelompokan topik dari panduan ini, beserta dokumentasi bermanfaat lainnya:

Untuk mempelajari cara menavigasi laporan:

Untuk mempelajari cara berfokus pada hal-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: