Insight performa: Dapatkan hasil analisis yang bisa ditindaklanjuti tentang performa situs Anda

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.
• Melihat aktivitas jaringan.
• Simulasikan kecepatan CPU dan jaringan yang lebih lambat.
• Mengimpor dan mengekspor rekaman.

Mengapa perlu panel baru?

Panel Performance insights yang baru merupakan eksperimen untuk mengatasi 3 titik masalah developer berikut saat bekerja dengan panel Performance 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 menandai insight utama di panel Insight, dengan masukan yang bisa 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

1. Buka DevTools.

2. Klik Opsi lainnya more_vert > Alat lainnya > Insight performa.

   

   Atau, gunakan Menu Perintah untuk membuka panel Insight performa.

   

Merekam performa

Panel Insight performa dapat mencatat performa umum dan berdasarkan kasus penggunaan (misalnya, pemuatan halaman).

1. Buka halaman demo ini di tab baru, lalu di halaman tersebut, buka panel Insight performa.

2. 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:

   

3. Klik refresh Ukur pemuatan halaman. DevTools mencatat metrik performa saat halaman dimuat ulang, lalu secara otomatis menghentikan perekaman beberapa detik setelah pemuatan halaman selesai.

   

Memutar ulang rekaman pertunjukan

Gunakan kontrol di bagian bawah untuk mengontrol pemutaran ulang rekaman.

Berikut adalah contoh cara melakukannya.

• Klik play_arrow Putar untuk memutar rekaman.
• Klik pause Jeda untuk menjeda pemutaran ulang.
• Sesuaikan kecepatan pemutaran dengan menu drop-down.
• Klik preview Alihkan pratinjau visual untuk menampilkan atau menyembunyikan pratinjau visual.

Membuka rekaman pertunjukan

DevTools otomatis memperkecil tampilan untuk menampilkan linimasa perekaman 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 titik pemutaran guna melihat frame tertentu.
• Klik kontrol zoom_in Perbesar dan zoom_out Perkecil di bagian bawah untuk melakukan zoom. Dalam hal ini, Anda melakukan zoom berdasarkan titik pemutaran.
• Tarik scroll bar horizontal di bagian bawah untuk memindahkan linimasa ke kiri dan ke kanan.

Atau, Anda dapat menggunakan pintasan keyboard. Klik tombol help untuk melihat pintasan.

Saat menggunakan pintasan, Anda melakukan zoom berdasarkan kursor mouse.

Melihat insight performa

Dapatkan daftar insight performa di panel Insights. Mengidentifikasi dan memperbaiki potensi masalah performa.

Arahkan kursor ke setiap insight untuk menandainya di jalur utama.

Klik insight, misalnya, permintaan pemblokiran render, untuk membukanya di panel Detail. Untuk memahami masalah ini lebih lanjut, periksa bagian File, Masalah, Cara memperbaiki, dan lainnya.

Melihat metrik performa Data Web

Web Vitals adalah inisiatif dari Google untuk memberikan panduan terpadu terkait sinyal kualitas yang penting dalam menghadirkan pengalaman pengguna yang memuaskan di web.

Anda dapat melihat metrik ini di panel Linimasa dan Insight.

Arahkan kursor ke insight di Linimasa untuk mempelajari metrik lebih lanjut.

Temukan penundaan dari contentful paint terbesar

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 contentful paint terbesar di halaman Anda membutuhkan 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 tersebut, Anda dapat menemukan kemungkinan penyebab keterlambatan dan saran tentang cara memperbaikinya.

Dalam contoh ini, permintaan memblokir rendering dan Anda dapat menerapkan gaya kritis secara inline untuk memperbaikinya. Untuk mempelajari lebih lanjut, lihat Meniadakan 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 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, waktu dan penundaan 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. Periode sesi memiliki celah di antara keduanya.

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 kami, jendela sesi 1 adalah jendela terbesar, berdasarkan warna dan level latar belakang.

Klik screenshot untuk melihat detail pergeseran tata letak, mengidentifikasi kemungkinan akar masalah, dan elemen yang terpengaruh.

Dalam contoh ini, kemungkinan akar masalahnya adalah media yang tidak berukuran. Untuk mempelajari cara memperbaikinya, lihat Mengoptimalkan Cumulative Layout Shift.

Memahami skor pergeseran tata letak

Untuk memahami cara penghitungan skor, gunakan bagian Jendela di panel Details. Jendela menampilkan 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 mendapatkan 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. Trek 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 berlalu pemuatan teks.

Untuk melihat waktu pengguna:

1. Tandai tempat di aplikasi Anda dengan performance.mark().
2. Ukur waktu yang berlalu di antara tanda dengan performance.measure().
3. Rekam performa.
4. Lihat pengukuran di jalur Pengaturan waktu. Jika Anda tidak dapat melihat lagu tersebut, periksa Waktu pengguna di Setelan.
5. Untuk melihat detailnya, klik pengaturan waktu di trek.

Menyesuaikan UI

Untuk menyesuaikan Linimasa dan Jalur, klik ikon Setelan settings panel, lalu centang opsi yang Anda inginkan.

Mengekspor rekaman

Untuk menyimpan rekaman, klik Ekspor download.

Mengimpor rekaman

Untuk memuat rekaman, pilih Impor publish.

Menghapus rekaman

Untuk menghapus rekaman:

1. Klik delete Delete. Dialog konfirmasi akan terbuka.
2. Dalam dialog, klik Hapus untuk mengonfirmasi penghapusan.