Referensi fitur performa

Halaman ini adalah referensi lengkap fitur Chrome DevTools yang terkait dengan analisis performa.

Lihat Menganalisis performa runtime untuk mendapatkan tutorial terpandu tentang cara menganalisis performa halaman menggunakan Chrome DevTools.

Layar metrik live

Saat pertama kali membuka panel Performa, Anda akan melihat layar Metrik Live yang memberikan ringkasan performa instan halaman saat ini menggunakan tiga Core Web Vitals.

Metrik akan diperbarui saat Anda berinteraksi dengan halaman dan membuka halaman baru, termasuk navigasi ringan sisi klien di aplikasi web satu halaman, yang ditunjukkan dengan badge SOFT NAV. Ini adalah cara yang baik untuk mengidentifikasi masalah performa—terutama untuk INP dan CLS jika hanya muncul dalam kondisi tertentu. Setelah masalah performa berulang secara konsisten, Anda dapat merekam rekaman aktivitas untuk mendapatkan detail selengkapnya guna men-debug masalah yang mendasarinya.

Fitur layar metrik live

Layar Metrik live memiliki fitur berikut, selain metrik:

• Metrik kolom dari CrUX jika diaktifkan di panel Metrik kolom.
• Ringkasan perbedaan penting antara metrik lokal dan lapangan.
• Elemen LCP, yang dapat di-hover untuk menandai elemen ini di halaman.
• Detail cluster CLS dan jenis INP
• Detail selengkapnya tentang mengarahkan kursor ke metrik (misalnya, subbagian LCP dan INP, serta histogram kolom)
• Panel Interaksi dan Perubahan tata letak yang mencatat histori atau interaksi dan perubahan tata letak.
• Panel Metrik lapangan tempat data CrUX dapat diaktifkan, detail jangka waktu data tersebut, kemampuan untuk beralih antara data asal dan URL (jika tersedia) serta antara data desktop dan seluler.
• Panel setelan lingkungan dengan panduan tentang perangkat, CPU, dan throttling Jaringan yang akan digunakan, berdasarkan data CrUX.

Untuk mengetahui detail selengkapnya, lihat postingan blog Memantau performa Core Web Vitals lokal dan pengguna sebenarnya di DevTools.

Merekam performa

Anda dapat merekam performa runtime atau pemuatan menggunakan tombol di kiri atas, atau tombol di kanan layar:

Merekam performa runtime

Rekam performa runtime saat Anda ingin menganalisis performa halaman saat berjalan, bukan saat dimuat.

1. Buka halaman yang ingin Anda analisis.
2. Klik tab Performa di DevTools.
3. Klik Rekam .
4. Berinteraksi dengan halaman. DevTools mencatat semua aktivitas halaman yang terjadi sebagai hasil dari interaksi Anda.
5. Klik Rekam lagi atau klik Berhenti untuk berhenti merekam.

Merekam performa pemuatan

Merekam performa pemuatan saat Anda ingin menganalisis performa halaman saat dimuat, bukan saat dijalankan.

1. Buka halaman yang ingin Anda analisis.
2. Buka panel Performance di DevTools.
3. Klik Rekam dan muat ulang . DevTools akan membuka about:blank terlebih dahulu untuk menghapus screenshot dan rekaman aktivitas yang tersisa. Kemudian, DevTools mencatat metrik performa saat halaman dimuat ulang, lalu otomatis menghentikan perekaman beberapa detik setelah pemuatan selesai.

DevTools otomatis memperbesar bagian rekaman tempat sebagian besar aktivitas terjadi.

Dalam contoh ini, panel Performance menampilkan aktivitas selama pemuatan halaman.

Mengambil screenshot saat merekam

Centang kotak Screenshots untuk mengambil screenshot setiap frame saat merekam.

Untuk menyesuaikan fidelitas perekaman visual dalam anggaran memori, buka Capture settings , lalu pilih preset batas jumlah dan ukuran frame dari menu drop-down Screenshot capture.

Lihat Melihat screenshot untuk mempelajari cara berinteraksi dengan screenshot.

Memaksa pengumpulan sampah saat merekam

Saat Anda merekam halaman, klik Kumpulkan sampah mop untuk memaksa pengumpulan sampah.

Menampilkan setelan perekaman

Klik Capture settings untuk menampilkan setelan lainnya terkait cara DevTools mengambil rekaman performa.

Menonaktifkan contoh JavaScript

Secara default, jalur Utama rekaman menampilkan stack panggilan mendetail dari fungsi JavaScript yang dipanggil selama perekaman. Untuk menonaktifkan stack panggilan ini:

1. Buka menu Setelan pengambilan gambar . Lihat Menampilkan setelan perekaman.
2. Centang kotak Nonaktifkan Contoh JavaScript.
3. Ambil rekaman halaman.

Screenshot berikut menunjukkan perbedaan antara menonaktifkan dan mengaktifkan contoh JavaScript. Trek Main dari rekaman jauh lebih singkat saat pengambilan sampel dinonaktifkan, karena trek ini menghilangkan semua stack panggilan JavaScript.

Contoh ini menunjukkan rekaman dengan sampel JS yang dinonaktifkan.

Contoh ini menunjukkan rekaman dengan sampel JS yang diaktifkan.

Membatasi jaringan saat merekam

Untuk membatasi jaringan saat merekam:

1. Buka menu Setelan perekaman . Lihat Menampilkan setelan perekaman.
2. Setel Network ke tingkat throttling yang dipilih.

Di menu drop-down, panel Performa juga dapat merekomendasikan preset throttling default atau preset yang mendekati pengalaman pengguna Anda berdasarkan data lapangan.

Membatasi CPU saat merekam

Untuk membatasi CPU saat merekam:

1. Buka menu Setelan pengambilan gambar . Lihat Menampilkan setelan perekaman.
2. Tetapkan CPU ke tingkat throttling yang dipilih.

Pembatasan ini relatif terhadap kemampuan komputer Anda. Misalnya, opsi pelambatan 2x membuat CPU Anda beroperasi 2 kali lebih lambat dari kemampuan biasanya. DevTools tidak dapat benar-benar menyimulasikan CPU perangkat seluler, karena arsitektur perangkat seluler sangat berbeda dengan arsitektur desktop dan laptop.

Di menu drop-down, panel Performa juga dapat merekomendasikan preset throttling default atau preset yang mendekati pengalaman pengguna Anda berdasarkan data lapangan.

Aktifkan statistik pemilih CSS

Untuk melihat statistik pemilih aturan CSS selama peristiwa Recalculate Style yang berjalan lama:

1. Buka menu Setelan perekaman . Lihat Menampilkan setelan perekaman.
2. Centang kotak Aktifkan statistik pemilih CSS.

Untuk mengetahui detail selengkapnya, lihat cara Menganalisis performa pemilih CSS selama peristiwa Recalculate Style.

Mengaktifkan instrumentasi paint lanjutan

Untuk melihat instrumentasi paint mendetail:

1. Buka menu Setelan pengambilan gambar . Lihat Menampilkan setelan perekaman.
2. Centang kotak Aktifkan instrumentasi gambar lanjutan.

Untuk mempelajari cara berinteraksi dengan informasi lukisan, lihat Melihat lapisan dan Melihat profiler lukisan.

Tampilkan Jalur Khusus

Mengaktifkan ringkasan grup jalur kustom dan jalur kustom dalam ringkasan rekaman aktivitas, yang dapat disesuaikan menggunakan DevTools Extensibility API.

Menghapus rekaman sebelumnya

Setelah membuat rekaman, tekan Hapus rekaman untuk menghapus rekaman tersebut dari panel Performa.

Menganalisis rekaman performa

Setelah Anda merekam performa runtime atau merekam performa pemuatan, panel Performa menyediakan banyak data untuk menganalisis performa dari apa yang baru saja terjadi.

Menganotasi rekaman dan membagikannya

Lihat Memberi anotasi dan membagikan temuan performa Anda.

Mendapatkan hasil analisis yang bisa ditindaklanjuti

Panel Performa mencakup insight performa yang juga ditampilkan dalam laporan Lighthouse. Insight ini dapat menyarankan cara meningkatkan performa dan memberikan analisis terpandu tentang masalah performa berikut seperti subbagian LCP dan INP, masalah penemuan permintaan LCP, pihak ketiga, serta resource JavaScript lama dan duplikat. Untuk mengetahui daftar lengkapnya, lihat dokumentasi Insight Performa.

Insight akan lulus jika tidak ada masalah yang terdeteksi. Tab Insight mencantumkannya di bagian Insight yang lulus yang diciutkan di bagian bawah. Insight yang tidak lulus tercantum di bagian khususnya masing-masing.

Untuk memanfaatkan insight:

1. Buat rekaman performa.
2. Di sidebar kiri panel Performa, buka tab Insight, luaskan berbagai bagian, serta arahkan kursor dan klik item. Panel Performa akan menandai peristiwa yang sesuai dalam rekaman aktivitas.

Menavigasi rekaman

Untuk membantu Anda menjelajah, saat Anda mengarahkan kursor ke rekaman aktivitas performa, panel Performance akan melakukan hal berikut:

• Menampilkan penanda vertikal yang mencakup seluruh rekaman aktivitas performa saat Anda mengarahkan kursor ke Ringkasan linimasa.
• Menandai rentang di Ringkasan linimasa saat Anda mengarahkan kursor ke item di jalur Utama.

Untuk memeriksa rekaman performa dengan cermat, Anda dapat memilih bagian rekaman, men-scroll flame chart yang panjang, memperbesar dan memperkecil, serta menggunakan breadcrumb untuk berpindah antar-tingkat zoom.

Menggunakan pintasan keyboard untuk menavigasi

Untuk menggunakan pintasan keyboard guna menavigasi rekaman dengan cepat, pertama-tama, pilih gaya navigasi keyboard yang Anda inginkan.

Di pojok kanan atas panel, klik bantuan Tampilkan pintasan, lalu pilih salah satu opsi berikut:

• Klasik: Zoom dengan roda mouse (touchpad ke atas atau ke bawah) dan scroll vertikal dengan Shift + roda mouse.
• Modern: Scroll vertikal dengan roda mouse, scroll horizontal dengan Shift + roda mouse, dan zoom dengan Command/Control + roda mouse.

Dialog pintasan juga memberi Anda contekan pintasan yang tersedia.

Memilih bagian rekaman

Di bagian panel tindakan Performa dan di bagian atas rekaman, Anda dapat melihat bagian Ringkasan linimasa dengan diagram CPU dan NET.

Untuk memilih bagian rekaman, klik lama, lalu tarik ke kiri atau kanan di Timeline overview.

Untuk memilih porsi menggunakan keyboard:

1. Fokuskan jalur Main atau jalur di sekitarnya.
2. Gunakan tombol W, A, S, D untuk memperbesar, bergerak ke kiri, memperkecil, dan bergerak ke kanan, secara berurutan.

Untuk memilih sebagian menggunakan trackpad:

1. Arahkan kursor ke bagian Timeline overview atau salah satu jalur (Main dan jalur di sekitarnya).
2. Dengan menggunakan dua jari, geser ke atas untuk memperkecil, geser ke kiri untuk berpindah ke kiri, geser ke bawah untuk memperbesar, dan geser ke kanan untuk berpindah ke kanan.

Membuat breadcrumb dan beralih antar-tingkat zoom

Ringkasan linimasa memungkinkan Anda membuat beberapa breadcrumb bertingkat secara berurutan, meningkatkan tingkat zoom, lalu berpindah dengan bebas antar-tingkat zoom.

Untuk membuat dan menggunakan breadcrumb:

1. Di Ringkasan linimasa, pilih bagian rekaman.
2. Arahkan kursor ke pilihan, lalu klik tombol N md zoom_in. Pilihan akan diperluas untuk mengisi Ringkasan linimasa. Rantai breadcrumb mulai dibuat di bagian atas Timeline overview.
3. Ulangi dua langkah sebelumnya untuk membuat breadcrumb bertingkat lainnya. Anda dapat terus menyusun breadcrumb selama rentang pemilihan lebih besar dari 5 milidetik.
4. Untuk beralih ke tingkat zoom yang dipilih, klik breadcrumb yang sesuai dalam rantai di bagian atas Ringkasan linimasa.

Untuk menghapus turunan breadcrumb, klik kanan breadcrumb induk dan pilih Hapus breadcrumb turunan.

Men-scroll flame chart yang panjang

Untuk men-scroll flame chart panjang di jalur Utama atau tetangganya, klik lama, lalu tarik ke arah mana pun hingga apa yang Anda cari terlihat.

Mengabaikan skrip yang tidak relevan dalam flame chart

Untuk lebih berfokus pada kode, Anda dapat menambahkan skrip yang tidak relevan ke daftar yang diabaikan.

Untuk mengabaikan skrip, lakukan salah satu tindakan berikut:

• Klik kompresi Tampilkan dialog setelan daftar yang diabaikan di panel tindakan atas dan ketik ekspresi reguler di kolom input. Flame chart akan menerapkan aturan baru saat Anda mengetik.
• Klik kanan skrip, lalu pilih Tambahkan skrip ke daftar yang diabaikan. Panel Performa menambahkan skrip ini ke daftar yang diabaikan di Show ignore list settings dialog compress.

Panel akan otomatis menciutkan penyusunan bertingkat yang berlebihan untuk skrip tersebut dan menandainya sebagai On ignore list (REGULAR_EXPRESSION).

Di compress Show ignore list settings dialog, Anda dapat mengaktifkan dan menonaktifkan aturan daftar yang diabaikan.

Untuk menghapus skrip dari daftar yang diabaikan, klik kanan skrip tersebut di flame chart, lalu pilih Remove script from ignore list atau arahkan kursor ke skrip tersebut di compress Show ignore list settings dialog, lalu klik delete Remove.

DevTools menyimpan aturan daftar yang diabaikan yang Anda tambahkan di setelan Settings > Ignore list.

Selain itu, untuk berfokus pada skrip pihak pertama saja, centang check_box Dim 3rd parties. Panel Performa akan mengabui skrip pihak ketiga.

Menelusuri aktivitas

Anda dapat menelusuri aktivitas di jalur Main dan permintaan di jalur Network.

Untuk membuka kotak penelusuran di bagian bawah panel Performa, tekan:

• macOS: Command+F
• Windows, Linux: Control+F

Contoh ini menunjukkan ekspresi reguler di kotak penelusuran di bagian bawah yang menemukan aktivitas apa pun yang diawali dengan E.

Untuk beralih di antara aktivitas yang cocok dengan kueri Anda:

• Klik tombol expand_less Sebelumnya atau expand_more Berikutnya.
• Tekan Shift+Enter untuk memilih yang sebelumnya atau Enter untuk memilih yang berikutnya.

Panel Performa menampilkan tooltip di atas aktivitas yang dipilih di kotak penelusuran.

Untuk mengubah setelan kueri:

• Klik match_case Match case untuk membuat kueri peka huruf besar/kecil.
• Klik regular_expression Regular expression untuk menggunakan ekspresi reguler dalam kueri Anda.

Untuk menyembunyikan kotak penelusuran, klik Batal.

Mengubah urutan jalur dan menyembunyikannya

Untuk merapikan rekaman aktivitas performa, Anda dapat mengubah urutan jalur dan menyembunyikan jalur yang tidak relevan dalam mode konfigurasi jalur.

Untuk memindahkan dan menyembunyikan jalur:

1. Untuk memasuki mode konfigurasi, klik kanan nama jalur, lalu pilih Konfigurasi jalur.
2. Klik arrow_upward naik atau arrow_downward turun untuk memindahkan trek ke atas atau ke bawah. Klik visibility_off untuk menyembunyikannya.
3. Setelah selesai, klik Selesai mengonfigurasi jalur di bagian bawah untuk keluar dari mode konfigurasi.

Tonton video untuk melihat cara kerja alur kerja ini.

Panel Performa menyimpan konfigurasi jalur untuk rekaman aktivitas baru, tetapi tidak di sesi DevTools berikutnya.

Melihat aktivitas thread utama

Gunakan jalur Utama untuk melihat aktivitas yang terjadi di thread utama halaman.

Klik peristiwa untuk melihat informasi selengkapnya tentang peristiwa tersebut di tab Summary, termasuk, tetapi tidak terbatas pada: durasi (dan durasi mandiri), link ke baris yang sesuai dalam skrip sumber, URL asal (dengan nama entitas, jika diketahui), stack trace, jika ada, dan perincian pengaturan waktu dalam diagram lingkaran.

Panel Performa menguraikan acara yang dipilih dengan warna biru.

Contoh ini menampilkan informasi selengkapnya tentang peristiwa panggilan fungsi get di tab Summary.

Membedakan peristiwa pihak pertama dan pihak ketiga

Ketergantungan yang berlebihan pada kode pihak ketiga dapat berdampak negatif pada performa pemuatan. Panel Performa dapat membantu Anda membedakan secara visual antara peristiwa pihak pertama dan pihak ketiga dalam rekaman aktivitas, sehingga Anda dapat membuat keputusan yang lebih tepat dalam mengurangi atau menunda pemuatan kode pihak ketiga untuk memprioritaskan konten halaman Anda.

Untuk berfokus hanya pada performa kode pihak pertama:

1. Pastikan tidak ada yang dipilih dalam rekaman aktivitas performa atau di tab Insight. Untuk melakukannya, klik ruang kosong di rekaman aktivitas.
2. Centang check_box Redupkan pihak ketiga di panel tindakan di bagian atas. Panel Performance akan mengubah warna peristiwa terkait pihak ketiga menjadi abu-abu dari rekaman aktivitas performa dan hanya menyisakan peristiwa pihak pertama yang ditandai.

Menandai peristiwa dengan tabel 'Pihak pertama / ketiga'

Dalam rentang yang dipilih di Ringkasan linimasa dan jika tidak ada peristiwa yang dipilih, tab Summary akan menampilkan tabel 1st / 3rd party yang mencantumkan ukuran transfer dan waktu thread utama masing-masing dari hal berikut:

• Entitas pihak pertama yang ditandai dengan badge 1st party.
• Semua entity pihak ketiga yang terdeteksi dalam rentang yang dipilih, tidak ditandai.
• Ekstensi yang ditandai dengan badge Extension.
• Entitas [unattributed] lainnya.

Untuk melihat peristiwa terkait yang ditandai dalam rekaman aktivitas dan peristiwa lainnya berwarna abu-abu, arahkan kursor ke entity dalam tabel. Untuk membiarkan peristiwa entitas ditandai, pilih entitas tersebut di tabel. Untuk menghapus penyorotan, klik ruang kosong di rekaman aktivitas.

Untuk membuka aktivitas yang dikelompokkan menurut entity ini di tab Bottom-up, arahkan kursor ke entity dalam tabel, lalu klik account_tree Bottom-up di sampingnya.

Membaca flame chart

Panel Performance menampilkan aktivitas thread utama dalam flame chart. Sumbu x mewakili rekaman dari waktu ke waktu. Sumbu y mewakili stack panggilan. Peristiwa di atas menyebabkan peristiwa di bawah.

Contoh ini menunjukkan flame chart di jalur Main. Peristiwa click menyebabkan panggilan fungsi anonim. Fungsi ini, pada gilirannya, memanggil onEndpointClick_, yang memanggil handleClick_, dan seterusnya.

Panel Performa menetapkan warna acak untuk skrip guna memecah diagram flame dan membuatnya lebih mudah dibaca. Pada contoh sebelumnya, panggilan fungsi dari satu skrip berwarna biru muda. Panggilan dari skrip lain berwarna merah muda muda. Kuning yang lebih gelap mewakili aktivitas pembuatan skrip, dan peristiwa ungu mewakili aktivitas rendering. Peristiwa kuning dan ungu yang lebih gelap ini konsisten di semua rekaman.

Tugas berdurasi lama juga ditandai dengan segitiga merah, dan bagian yang melebihi 50 milidetik diarsir merah:

Dalam contoh ini, tugas memerlukan waktu lebih dari 400 milidetik, sehingga bagian yang mewakili 350 milidetik terakhir diarsir merah, sedangkan 50 milidetik awal tidak.

Selain itu, jalur Utama menampilkan informasi tentang CPU Profiler yang dimulai dan dihentikan dengan fungsi konsol profile() dan profileEnd(). Memanggil console.profileEnd() dalam kode Anda atau di Console akan otomatis membuka panel Performance dan menampilkan rekaman aktivitas yang direkam.

Untuk menyembunyikan flame chart mendetail dari panggilan JavaScript, lihat Menonaktifkan contoh JavaScript. Jika sampel JS dinonaktifkan, Anda hanya akan melihat peristiwa tingkat tinggi seperti Event (click) dan Function Call.

Melacak inisiator peristiwa

Trek Main dapat menampilkan panah yang menghubungkan inisiator berikut dan peristiwa yang disebabkannya:

• Invalidasi gaya atau tata letak -> Recalculate styles atau Layout
• Minta Frame Animasi -> Frame Animasi Diaktifkan
• Request Idle Callback -> Fire Idle Callback
• Instal Timer -> Timer Diaktifkan
• Create WebSocket -> Send... dan Receive WebSocket Handshake atau Destroy WebSocket
• Jadwalkan postTask -> Aktifkan postTask atau Batalkan postTask

Untuk melihat panah, temukan inisiator atau peristiwa yang disebabkannya di flame chart, lalu pilih.

Jika dipilih, tab Ringkasan akan menampilkan link Initiator for untuk inisiator dan link Initiated by untuk peristiwa yang dipicunya. Klik untuk beralih di antara peristiwa yang sesuai.

Menyembunyikan fungsi dan turunannya di flame chart

Untuk merapikan flame chart di thread Main, Anda dapat menyembunyikan fungsi yang dipilih atau turunannya:

1. Di jalur Utama, klik kanan fungsi dan pilih salah satu opsi berikut atau tekan pintasan yang sesuai:

   • Sembunyikan fungsi (H)
   • Sembunyikan turunan (C)
   • Sembunyikan turunan yang berulang (R)
   • Reset turunan (U)
   • Reset rekaman aktivitas (T)
   • Tambahkan skrip ke daftar yang diabaikan (I)

   

   Tombol drop-down arrow_drop_down akan muncul di samping nama fungsi dengan turunan tersembunyi.

2. Untuk melihat jumlah turunan yang tersembunyi, arahkan kursor ke tombol drop-down arrow_drop_down.

   

3. Untuk mereset fungsi dengan turunan tersembunyi atau seluruh diagram flame, pilih fungsi, lalu tekan U atau klik kanan fungsi mana pun, lalu pilih Reset rekaman aktivitas.

Mengabaikan skrip di flame chart

Untuk menambahkan skrip ke daftar yang diabaikan, klik kanan skrip dalam diagram, lalu pilih Tambahkan skrip ke daftar yang diabaikan.

Diagram akan menciutkan skrip yang diabaikan, menandainya sebagai On ignore list, dan menambahkannya ke aturan Custom exclusion di setelan Settings > daftar yang diabaikan. Skrip yang diabaikan akan disimpan hingga Anda menghapusnya dari rekaman aktivitas atau dari Aturan pengecualian kustom.

Melihat aktivitas dalam tabel

Setelah merekam halaman, Anda tidak perlu hanya mengandalkan jalur Main untuk menganalisis aktivitas. DevTools juga menyediakan tiga tampilan tabel untuk menganalisis aktivitas. Setiap tampilan memberi Anda perspektif yang berbeda tentang aktivitas:

• Jika Anda ingin melihat aktivitas root yang menyebabkan pekerjaan terbanyak, gunakan tab Call tree.
• Jika Anda ingin melihat aktivitas yang paling banyak menghabiskan waktu secara langsung, gunakan tab Bottom-up.
• Jika Anda ingin melihat aktivitas sesuai urutan terjadinya selama perekaman, gunakan tab Log peristiwa.

Anda dapat mengklik item di salah satu dari tiga tabel (dan di tabel pihak ke-1 / pihak ke-3 di tab Ringkasan) untuk mempertahankan peristiwa yang sesuai ditandai dalam rekaman aktivitas dan meredupkan sisanya saat Anda menjelajahi rekaman aktivitas performa.

Untuk membantu Anda menemukan apa yang Anda cari dengan lebih cepat, ketiga tab memiliki tombol untuk pemfilteran lanjutan di samping panel Filter:

• match_case Cocokkan huruf besar/kecil.
• regular_expression Ekspresi reguler.
• match_word Cocokkan seluruh kata.

Setiap tampilan tabel di panel Performance menampilkan link untuk aktivitas seperti panggilan fungsi. Untuk membantu Anda melakukan proses debug, DevTools akan menemukan deklarasi fungsi yang sesuai dalam file sumber. Selain itu, jika peta sumber yang sesuai ada dan diaktifkan, DevTools akan otomatis menemukan file asli.

Klik link untuk membuka file sumber di panel Sumber.

Aktivitas root

Berikut penjelasan konsep aktivitas root yang disebutkan di tab Pohon panggilan, tab Bottom-up, dan bagian Log peristiwa.

Aktivitas root adalah aktivitas yang menyebabkan browser melakukan beberapa pekerjaan. Misalnya, saat Anda mengklik halaman, browser akan mengaktifkan aktivitas Event sebagai aktivitas root. Event tersebut kemudian dapat menyebabkan pengendali dijalankan.

Dalam diagram flame jalur Main, aktivitas root berada di bagian atas diagram. Di tab Call Tree dan log peristiwa, aktivitas root adalah item tingkat teratas.

Lihat Tab Call Tree untuk mengetahui contoh aktivitas root.

Tab Hierarki panggilan

Gunakan tab Call tree untuk melihat aktivitas root yang menyebabkan pekerjaan paling banyak.

Tab Call tree hanya menampilkan aktivitas selama bagian rekaman yang dipilih. Lihat Memilih sebagian rekaman untuk mempelajari cara memilih bagian.

Dalam contoh ini, item tingkat teratas di kolom Aktivitas, seperti Event, Paint, dan Composite Layers adalah aktivitas root. Penyusunan bertingkat ini mewakili stack panggilan. Dalam contoh ini, Event menyebabkan Function Call, yang menyebabkan button.addEventListener, yang menyebabkan b, dan seterusnya.

Waktu Sendiri menunjukkan waktu yang dihabiskan secara langsung dalam aktivitas tersebut. Total Time menunjukkan waktu yang dihabiskan dalam aktivitas tersebut atau turunannya.

Klik Self Time, Total Time, atau Activity untuk mengurutkan tabel berdasarkan kolom tersebut.

Gunakan kotak Filter untuk memfilter peristiwa menurut nama aktivitas.

Secara default, menu Pengelompokan ditetapkan ke Tidak Ada Pengelompokan. Gunakan menu Pengelompokan untuk mengurutkan tabel aktivitas berdasarkan berbagai kriteria.

Tab Bottom-up

Gunakan tab Bottom-up untuk melihat aktivitas mana yang secara langsung menghabiskan waktu paling banyak secara keseluruhan.

Tab Bottom-up hanya menampilkan aktivitas selama bagian rekaman yang dipilih. Lihat Memilih sebagian rekaman untuk mempelajari cara memilih bagian.

Dalam flame chart jalur Main pada contoh ini, Anda dapat melihat bahwa hampir semua waktu dihabiskan untuk mengeksekusi tiga panggilan ke wait(). Oleh karena itu, aktivitas teratas di tab Bottom-up adalah wait. Dalam flame chart, warna kuning di bawah panggilan ke wait sebenarnya adalah ribuan panggilan Minor GC. Oleh karena itu, Anda dapat melihat bahwa di tab Bottom-up, aktivitas termahal berikutnya adalah Minor GC.

Kolom Waktu Sendiri menunjukkan waktu gabungan yang dihabiskan secara langsung dalam aktivitas tersebut, di semua kemunculannya.

Kolom Total Time menunjukkan waktu gabungan yang dihabiskan dalam aktivitas tersebut atau turunannya.

Tabel stack terberat

Di sisi kanan tab Call tree atau Bottom-up, klik right_panel_open Show heaviest stack untuk menampilkan tabel Heaviest stack.

Tabel ini menunjukkan turunan aktivitas yang dipilih yang memerlukan waktu eksekusi paling lama. Arahkan kursor ke item dalam tabel untuk melihat peristiwa yang sesuai ditandai di jalur Main dan peristiwa lainnya diredupkan.

Dengan cara ini, Anda dapat menemukan aktivitas bertingkat secara visual dalam rekaman aktivitas performa dari stack panggilan yang memerlukan waktu paling lama.

Tab Log peristiwa

Gunakan tab Log peristiwa untuk melihat aktivitas dalam urutan terjadinya selama perekaman.

Tab Log peristiwa hanya menampilkan aktivitas selama bagian rekaman yang dipilih. Lihat Memilih bagian rekaman untuk mempelajari cara memilih bagian.

Kolom Start Time menunjukkan titik saat aktivitas tersebut dimulai, relatif terhadap awal perekaman. Waktu mulai 1573.0 ms untuk item yang dipilih dalam contoh ini berarti aktivitas dimulai 1.573 md setelah perekaman dimulai.

Kolom Waktu Mandiri menunjukkan waktu yang dihabiskan langsung dalam aktivitas tersebut.

Kolom Total Time menunjukkan waktu yang dihabiskan langsung dalam aktivitas tersebut atau dalam salah satu turunannya.

Klik Waktu Mulai, Waktu Sendiri, atau Total Waktu untuk mengurutkan tabel menurut kolom tersebut.

Gunakan kotak Filter untuk memfilter aktivitas menurut nama.

Gunakan menu Duration untuk memfilter aktivitas yang memerlukan waktu kurang dari 1 md atau 15 md. Secara default, menu Duration disetel ke All, yang berarti semua aktivitas ditampilkan.

Hapus centang pada kotak Loading, Scripting, Rendering, atau Painting untuk memfilter semua aktivitas dari kategori tersebut.

Melihat penanda performa

Dalam overlay dengan garis vertikal di seluruh rekaman aktivitas performa, Anda dapat melihat penanda performa penting, seperti:

• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• Peristiwa DOMContentLoaded (DCL)
• Peristiwa Onload (L)

Arahkan kursor ke nama penanda di bagian bawah trace untuk melihat stempel waktunya.

Melihat pengaturan waktu kustom

Di jalur Timings, lihat penanda performa kustom Anda seperti:

• Panggilan performance.mark(). Marka individual dengan tooltip ditampilkan di bawah pada 813,44 md, berlabel Mulai menjalankan JavaScript.
• performance.measure() panggilan. Span kuning ditampilkan di bawah, berlabel Interaksi Lambat.

Pilih penanda untuk melihat detail selengkapnya di tab Summary, termasuk stempel waktu, total waktu, waktu mandiri, dan objek detail. Untuk panggilan performance.mark() dan performance.measure(), tab ini juga menampilkan rekaman aktivitas tumpukan.

Melihat interaksi

Lihat interaksi pengguna di jalur Interaksi untuk melacak potensi masalah responsivitas.

Untuk melihat interaksi:

1. Buka DevTools, misalnya, di halaman demo ini.
2. Buka panel Performa dan mulai perekaman.
3. Klik elemen (kopi) dan hentikan perekaman.
4. Temukan jalur Interactions di linimasa.

Dalam contoh ini, jalur Interactions menampilkan interaksi Pointer. Interaksi memiliki kumis yang menunjukkan penundaan input dan presentasi pada batas waktu pemrosesan. Arahkan kursor ke interaksi untuk melihat tooltip yang berisi penundaan input, waktu pemrosesan, dan penundaan presentasi.

Jalur Interaksi juga menampilkan peringatan Interaction to Next Paint (INP) untuk interaksi yang lebih lama dari 200 milidetik di tab Ringkasan dan di tooltip saat kursor diarahkan ke atasnya:

Penanda Interaksi melacak interaksi selama lebih dari 200 milidetik dengan segitiga merah di sudut kanan atas.

Melihat pergeseran tata letak

Lihat pergeseran tata letak di jalur Layout shifts. Pergeseran ditampilkan sebagai berlian ungu dan dikelompokkan dalam kelompok (garis ungu) berdasarkan kedekatannya di linimasa.

Untuk menandai elemen yang menyebabkan pergeseran tata letak di area pandang, arahkan kursor ke ikon wajik yang sesuai.

Untuk melihat informasi selengkapnya tentang pergeseran tata letak di tab Ringkasan dengan pengaturan waktu, skor, elemen, dan potensi penyebabnya, klik diamond atau cluster yang sesuai.

Untuk mengetahui informasi selengkapnya, lihat Pergeseran Tata Letak Kumulatif (CLS).

Melihat animasi

Lihat animasi di jalur Animasi. Animasi diberi nama sebagai properti atau elemen CSS yang sesuai jika ada, misalnya, transform atau my-element. Animasi non-komposisi ditandai dengan segitiga merah di sudut kanan atas.

Pilih animasi untuk melihat detail selengkapnya di tab Ringkasan, termasuk alasan kegagalan komposit.

Melihat aktivitas GPU

Lihat aktivitas GPU di bagian GPU.

Melihat aktivitas raster

Lihat aktivitas raster di bagian Thread Pool.

Menganalisis frame per detik (FPS)

DevTools menyediakan berbagai cara untuk menganalisis frame per detik:

• Gunakan bagian Frame untuk melihat durasi frame tertentu.
• Gunakan pengukur FPS untuk mendapatkan perkiraan FPS real-time saat halaman berjalan. Lihat Menampilkan frame per detik secara real time dengan pengukur FPS.

Bagian Frames

Bagian Frame memberi tahu Anda dengan tepat berapa lama waktu yang diperlukan untuk frame tertentu.

Arahkan kursor ke frame untuk melihat tooltip dengan informasi selengkapnya tentang frame tersebut.

Contoh ini menampilkan tooltip saat Anda mengarahkan kursor ke frame.

Bagian Frame dapat menampilkan empat jenis frame:

1. Frame tidak ada aktivitas (putih). Tidak ada perubahan.
2. Frame (hijau). Dirender sesuai harapan dan tepat waktu.
3. Frame yang ditampilkan sebagian (kuning dengan pola garis putus-putus lebar yang jarang). Chrome berupaya sebaik mungkin untuk merender setidaknya beberapa update visual tepat waktu. Misalnya, jika pekerjaan thread utama proses perender (animasi kanvas) terlambat, tetapi thread compositor (scrolling) tepat waktu.
4. Frame yang dihapus (merah dengan pola garis padat). Chrome tidak dapat merender frame dalam waktu yang wajar.

Contoh ini menampilkan tooltip saat Anda mengarahkan kursor ke frame yang ditampilkan sebagian.

Klik frame untuk melihat informasi selengkapnya tentang frame di tab Ringkasan. DevTools menggarisbawahi frame yang dipilih dengan warna biru.

Melihat permintaan jaringan

Luaskan bagian Network untuk melihat waterfall permintaan jaringan yang terjadi selama perekaman performa.

Di samping nama jalur Network, terdapat legenda dengan jenis permintaan berkode warna.

Permintaan yang memblokir rendering ditandai dengan segitiga merah di sudut kanan atas.

Arahkan kursor ke permintaan untuk melihat tooltip dengan:

• URL permintaan dan total waktu yang diperlukan untuk mengeksekusinya.
• Prioritas atau perubahan prioritas, misalnya, Medium -> High.
• Apakah permintaan tersebut adalah Render-blocking atau bukan.
• Perincian pengaturan waktu permintaan, yang dijelaskan nanti.

Saat Anda mengklik permintaan, jalur Jaringan akan menggambar panah dari inisiatornya ke permintaan.

Selain itu, panel Performa menampilkan tab Ringkasan dengan informasi selengkapnya tentang permintaan, termasuk, tetapi tidak terbatas pada, kolom Prioritas Awal dan Prioritas (akhir). Jika nilainya berbeda, prioritas pengambilan permintaan telah berubah selama perekaman. Untuk mengetahui informasi selengkapnya, lihat Mengoptimalkan pemuatan resource dengan Fetch Priority API.

Tab Ringkasan juga menampilkan perincian waktu permintaan.

Dalam contoh ini, permintaan untuk www.google.com diwakili oleh garis di sebelah kiri (|–), batang di tengah dengan bagian gelap dan bagian terang, serta garis di sebelah kanan (–|).

Jika ada, tab Ringkasan juga menampilkan perincian pengaturan waktu server untuk permintaan jaringan yang menerapkan teknologi rendering sisi server. Untuk permintaan ini, panel Performa mengambil data dari header respons Server-Timing.

Anda dapat menemukan perincian pengaturan waktu lainnya di tab Jaringan. Klik kanan permintaan di jalur Jaringan atau URL-nya di tab Ringkasan, lalu klik Tampilkan di panel Jaringan. DevTools akan mengarahkan Anda ke panel Jaringan dan memilih permintaan yang sesuai. Buka tab Timing.

Berikut adalah pemetaan kedua pengelompokan ini:

• Garis kiri (|–) adalah semua peristiwa hingga grup peristiwa Connection start, inklusif. Dengan kata lain, ini adalah semua hal sebelum Request Sent.
• Bagian terang dari panel adalah Request sent dan Waiting for server response.
• Bagian gelap pada panel adalah Content download.
• Garis kanan (–|) adalah waktu yang dihabiskan untuk menunggu thread utama. Tab Network > Timing tidak menampilkannya.

Melihat metrik memori

Aktifkan kotak centang Memory untuk melihat metrik memori dari rekaman terakhir.

DevTools menampilkan diagram Memory baru, di atas tab Summary. Ada juga diagram baru di bawah diagram NET, yang disebut HEAP. Diagram HEAP memberikan informasi yang sama dengan baris JS Heap dalam diagram Memory.

Contoh ini menunjukkan metrik memori di atas tab Summary.

Garis berwarna pada diagram dipetakan ke kotak centang berwarna di atas diagram. Hapus centang pada kotak untuk menyembunyikan kategori tersebut dari diagram.

Diagram hanya menampilkan wilayah rekaman yang dipilih. Pada contoh sebelumnya, diagram Memory hanya menampilkan penggunaan memori untuk awal perekaman, hingga sekitar tanda 1000 md.

Melihat durasi bagian rekaman

Saat menganalisis bagian seperti Jaringan atau Utama, terkadang Anda memerlukan perkiraan yang lebih akurat tentang durasi terjadinya peristiwa tertentu. Tahan Shift, klik dan tahan, lalu tarik ke kiri atau kanan untuk memilih sebagian rekaman. Di bagian bawah pilihan Anda, DevTools menunjukkan durasi yang dibutuhkan bagian tersebut.

Dalam contoh ini, stempel waktu 488.53ms di bagian bawah bagian yang dipilih menunjukkan durasi bagian tersebut.

Melihat screenshot

Lihat Mengambil screenshot saat merekam untuk mempelajari cara mengaktifkan screenshot.

Arahkan kursor ke Ringkasan linimasa untuk melihat screenshot tampilan halaman selama momen perekaman tersebut. Ringkasan linimasa adalah bagian yang berisi diagram CPU, FPS, dan NET.

Anda juga dapat melihat screenshot dengan mengklik frame di bagian Frame. DevTools menampilkan screenshot versi kecil di tab Summary.

Contoh ini menampilkan screenshot untuk frame 195.5ms di tab Summary saat Anda mengkliknya di bagian Frames.

Klik thumbnail di tab Ringkasan untuk memperbesar screenshot.

Contoh ini menampilkan screenshot yang diperbesar setelah Anda mengklik thumbnail-nya di tab Ringkasan.

Melihat informasi lapisan

Untuk melihat informasi lapisan lanjutan tentang frame:

1. Aktifkan instrumentasi render lanjutan.
2. Pilih frame di bagian Frame. DevTools menampilkan informasi tentang lapisannya di tab Layers baru, di samping tab log peristiwa.

Arahkan kursor ke lapisan untuk menandainya dalam diagram.

Contoh ini menunjukkan lapisan #39 yang ditandai saat Anda mengarahkan kursor ke atasnya.

Untuk memindahkan diagram:

• Klik Pan Mode untuk bergerak di sepanjang sumbu X dan Y.
• Klik Rotate Mode untuk memutar di sepanjang sumbu Z.
• Klik Reset Transform untuk mereset diagram ke posisi semula.

Lihat cara kerja analisis lapisan:

Melihat paint profiler

Untuk melihat informasi lanjutan tentang peristiwa paint:

1. Aktifkan instrumentasi paint lanjutan.
2. Pilih peristiwa Paint di jalur Main.

Menganalisis performa rendering dengan tab Rendering

Gunakan fitur tab Rendering untuk membantu memvisualisasikan performa rendering halaman Anda.

Buka tab Rendering.

Melihat frame per detik secara real time dengan meteran FPS

Statistik rendering frame adalah overlay yang muncul di pojok kanan atas area pandang Anda. Fitur ini memberikan estimasi FPS secara real time saat halaman berjalan.

Lihat Statistik rendering frame.

Melihat peristiwa rendering secara real time dengan Paint Flashing

Gunakan Paint Flashing untuk mendapatkan tampilan real-time dari semua peristiwa paint di halaman.

Lihat Paint flashing.

Melihat overlay lapisan dengan Batas Lapisan

Gunakan Batas Lapisan untuk melihat overlay batas dan petak lapisan di atas halaman.

Lihat Batas lapisan.

Menemukan masalah performa scroll secara real time

Gunakan Masalah Performa Scrolling untuk mengidentifikasi elemen halaman yang memiliki pemroses peristiwa terkait scrolling yang dapat merusak performa halaman. DevTools menguraikan elemen yang berpotensi bermasalah dalam warna teal.

Lihat Masalah performa scrolling.