Gunakan panel Insight performa untuk mendapatkan insight yang bisa ditindaklanjuti dan berbasis kasus penggunaan tentang performa situs Anda.
Ringkasan
Panel Insight performa memungkinkan Anda melakukan hal berikut:
- Rekam dan ukur performa pemuatan halaman.
- Lihat metrik performa Data Vital Web.
- Lihat aktivitas jaringan.
- Simulasikan kecepatan CPU dan jaringan yang lebih lambat.
- Mengimpor dan mengekspor rekaman.
Mengapa panel baru?
Panel Insight performa baru adalah eksperimen untuk mengatasi 3 titik masalah developer ini saat menggunakan panel Performa yang ada:
- Terlalu banyak informasi. Dengan UI yang didesain ulang, panel Insight performa menyederhanakan data dan hanya menampilkan informasi yang relevan.
- Sulit membedakan antara kasus penggunaan. Panel Insight performa mendukung analisis berbasis kasus penggunaan. Saat ini, fitur ini hanya mendukung kasus penggunaan pemuatan halaman, dengan fitur lainnya yang akan hadir di masa mendatang berdasarkan masukan Anda, misalnya, interaktif.
- Memerlukan keahlian mendalam tentang cara kerja browser agar dapat digunakan secara efektif. Panel Insight performa menyoroti insight utama di panel Insight, dengan masukan yang dapat ditindaklanjuti tentang cara memperbaiki masalah.
Pengantar
Tutorial ini mengajarkan cara mengukur dan memahami performa pemuatan halaman dengan panel Insight performa. Lanjutkan membaca atau tonton versi video tutorial ini di atas.
Membuka panel Insight performa
- Buka DevTools.
Klik Opsi lainnya > Alat lainnya > Insight performa.
Atau, gunakan Menu Perintah untuk membuka panel Insight performa.
Merekam performa
Panel Insight performa dapat mencatat performa umum dan berbasis kasus penggunaan (misalnya, pemuatan halaman).
- Buka halaman demo ini di tab baru, lalu di halaman tersebut, buka panel Insight performa.
Anda dapat membatasi jaringan dan CPU saat merekam. Untuk tutorial ini, centang Nonaktifkan cache dan tetapkan CPU ke Pemendekan waktu 4x di menu drop-down:
Klik Ukur pemuatan halaman. DevTools mencatat metrik performa saat halaman dimuat ulang, lalu otomatis menghentikan perekaman beberapa detik setelah pemuatan halaman selesai.
Memutar ulang rekaman performa
Gunakan kontrol di bagian bawah untuk mengontrol pemutaran rekaman Anda.
Berikut adalah contoh cara melakukannya.
- Klik Putar untuk memutar rekaman.
- Klik Jeda untuk menjeda pemutaran ulang.
- Sesuaikan kecepatan pemutaran dengan menu drop-down.
- Klik Alihkan pratinjau visual untuk menampilkan atau menyembunyikan pratinjau visual.
Menavigasi rekaman performa
DevTools akan otomatis memperkecil untuk menampilkan linimasa rekaman lengkap. Anda dapat menavigasi rekaman dengan zoom dan memindahkan linimasa.
Untuk memperbesar dan memindahkan linimasa ke kiri dan kanan, gunakan tombol navigasi yang sesuai:
- Klik Linimasa untuk memindahkan indikator pemutar guna melihat frame tertentu.
- Klik kontrol Perbesar dan Perkecil di bagian bawah untuk melakukan zoom. Dalam hal ini, Anda akan melakukan zoom berdasarkan posisi pemutar.
- Tarik scroll bar horizontal di bagian bawah untuk memindahkan linimasa ke kiri dan kanan.
Atau, Anda dapat menggunakan pintasan keyboard. Klik tombol untuk melihat pintasan.
Saat menggunakan pintasan, Anda dapat memperbesar/memperkecil berdasarkan kursor mouse.
Melihat insight performa
Dapatkan daftar insight performa di panel Insight. Identifikasi dan perbaiki potensi masalah performa.
Arahkan kursor ke setiap insight untuk menyorotnya di jalur utama.
Klik insight, misalnya, permintaan pemblokiran rendering, untuk membukanya di panel Detail. Untuk lebih memahami masalah tersebut, periksa bagian File, Masalah, Cara memperbaiki, dan lainnya.
Melihat metrik performa Data Web
Data Web adalah inisiatif Google untuk memberikan panduan terpadu terkait sinyal kualitas yang penting dalam memberikan pengalaman pengguna yang baik di web.
Anda dapat melihat metrik ini di panel Linimasa dan Insight.
Arahkan kursor ke insight di Linimasa untuk mempelajari metrik lebih lanjut.
Menemukan penundaan largest contentful paint
Largest Contentful Paint (LCP) adalah salah satu metrik Core Web Vitals. Metrik ini melaporkan waktu render blok teks atau gambar terbesar yang terlihat dalam area pandang, yang relatif terhadap momen saat halaman pertama kali mulai dimuat.
Skor LCP yang baik adalah 2,5 detik atau kurang.
Jika largest contentful paint di halaman Anda memerlukan waktu lebih lama untuk dirender, di linimasa, Anda akan melihat badge LCP dengan kotak kuning atau segitiga merah.
Untuk membuka panel Details, klik badge LCP di linimasa atau di panel Insights di sebelah kanan. Di panel, Anda dapat menemukan potensi penyebab keterlambatan dan saran tentang cara memperbaikinya.
Dalam contoh ini, permintaan memblokir rendering dan Anda dapat menerapkan gaya penting secara inline untuk memperbaikinya. Untuk mempelajari lebih lanjut, lihat Menghilangkan resource yang memblokir rendering.
Untuk melihat sub-bagian waktu render LCP, scroll ke bawah ke bagian Detail > Perincian waktu.
Waktu render LCP terdiri dari sub-bagian berikut:
| Sub-bagian LCP | Deskripsi |
|---|---|
| Time to first byte (TTFB) | Waktu dari saat pengguna memulai pemuatan halaman hingga saat browser menerima byte pertama respons dokumen HTML. |
| Penundaan pemuatan resource | Delta antara TTFB dan saat browser mulai memuat resource LCP. |
| Waktu pemuatan resource | Waktu yang diperlukan untuk memuat resource LCP itu sendiri. |
| Penundaan render elemen | Delta antara saat resource LCP selesai dimuat hingga elemen LCP dirender sepenuhnya. |
Jika elemen LCP tidak memerlukan pemuatan resource untuk dirender, penundaan dan waktu pemuatan resource akan dihilangkan. Misalnya, jika elemen adalah node teks yang dirender dengan font sistem.
Melihat aktivitas pergeseran tata letak
Lihat aktivitas pergeseran tata letak di jalur Pergeseran Tata Letak.
Pergeseran tata letak dikelompokkan dalam interval sesi. Dalam contoh ini, ada dua periode sesi. Jendela sesi memiliki jeda di antaranya.
Pergeseran Tata Letak Kumulatif (CLS) adalah salah satu metrik data web inti. Gunakan jalur Pergeseran Tata Letak untuk mengidentifikasi potensi masalah dan penyebab pergeseran tata letak.
Selalu mulai dengan periode sesi terbesar saat meningkatkan metrik CLS. Dalam contoh ini, jendela sesi 1 adalah jendela terbesar, berdasarkan warna dan tingkat latar belakang.
Klik screenshot untuk melihat detail pergeseran tata letak, mengidentifikasi kemungkinan akar masalah, dan elemen yang terpengaruh.
Dalam contoh kami, potensi penyebab utamanya adalah media tanpa ukuran. Untuk mempelajari cara memperbaikinya, lihat Mengoptimalkan Cumulative Layout Shift.
Memahami skor pergeseran tata letak
Untuk memahami cara penghitungan skor, gunakan bagian Window di panel Details. Jendela menunjukkan jendela sesi tempat pergeseran tata letak saat ini berada.
Jika seluruh halaman bergeser, skor maksimum setiap pergeseran tata letak adalah 1. Dalam contoh kita, pergeseran tata letak pertama memperoleh skor 0.15. Pergeseran tata letak kedua mendapatkan skor 0.041.
Skor total untuk periode sesi ini adalah 0.19. Berdasarkan nilai minimum CLS, halaman ini perlu ditingkatkan. Warna latar belakang jendela sesi juga sama.
Grafik latar belakang periode sesi meningkat dari waktu ke waktu. Skor kumulatif pergeseran tata letak mencerminkan peningkatan pada titik waktu tersebut.
Melihat aktivitas jaringan
Lihat aktivitas jaringan di jalur Jaringan. Anda dapat meluaskan jalur jaringan untuk melihat semua aktivitas jaringan dan mengklik setiap item untuk melihat detailnya.
Melihat aktivitas perender
Lihat aktivitas render di jalur Renderer. Anda dapat meluaskan setiap perender untuk melihat aktivitas dan mengklik setiap item untuk melihat detailnya.
Melihat aktivitas GPU
Lihat aktivitas GPU di jalur GPU. Jalur GPU disembunyikan secara default. Untuk mengaktifkannya, centang GPU di Setelan.
Melihat waktu pengguna
Untuk mendapatkan ukuran performa kustom, Anda dapat menggunakan User Timing dan memvisualisasikan pengaturan waktu dengan jalur Timing. Untuk informasi selengkapnya, lihat User timing API.
Lihat halaman demo ini yang menghitung waktu yang berlalu saat teks dimuat.
Untuk melihat waktu pengguna:
- Tandai tempat di aplikasi Anda dengan
performance.mark(). - Ukur waktu yang berlalu di antara tanda dengan
performance.measure(). - Rekam performa.
- Lihat pengukuran di jalur Pengaturan waktu. Jika Anda tidak dapat melihat jalur, periksa Pengaturan waktu pengguna di Setelan.
- Untuk melihat detailnya, klik pengaturan waktu di trek.
Menyesuaikan UI
Untuk menyesuaikan Linimasa dan Jalur, klik ikon Setelan panel, lalu centang opsi yang Anda inginkan.
Mengekspor rekaman
Untuk menyimpan rekaman, klik Ekspor .
Mengimpor rekaman
Untuk memuat rekaman, pilih Impor .
Menghapus rekaman
Untuk menghapus rekaman:
- Klik Delete. Dialog konfirmasi akan terbuka.
- Di dialog, klik Hapus untuk mengonfirmasi penghapusan.