Gunakan panel Insight performa untuk mendapatkan insight yang dapat ditindaklanjuti dan didorong oleh kasus penggunaan tentang performa situs Anda.
Ringkasan
Panel Insight performa memungkinkan Anda melakukan hal berikut:
- Merekam dan mengukur performa pemuatan halaman.
- Melihat metrik performa Data Vital Web.
- Melihat 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 bekerja dengan panel Performa yang ada:
- Informasi terlalu banyak. Dengan UI yang didesain ulang, panel Insight performa menyederhanakan data dan hanya menampilkan informasi yang relevan.
- Sulit membedakan kasus penggunaan. Panel Insight performa mendukung analisis berbasis kasus penggunaan. Saat ini, API ini hanya mendukung kasus penggunaan pemuatan halaman, dan akan ada lebih banyak kasus penggunaan pada masa mendatang berdasarkan masukan Anda, misalnya, interaktivitas.
- 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 Anda 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 merekam performa umum dan yang didorong oleh kasus penggunaan (misalnya, pemuatan halaman).
- Buka halaman demo ini di tab baru dan, 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 4x pelambatan di menu drop-down:
Klik Ukur pemuatan halaman. DevTools merekam 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 ulang 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 otomatis memperkecil tampilan untuk menampilkan linimasa rekaman lengkap. Anda dapat menavigasi rekaman dengan melakukan zoom dan memindahkan linimasa.
Untuk memperbesar dan menggeser linimasa ke kiri dan kanan, gunakan tombol navigasi yang sesuai:
- Klik Linimasa untuk memindahkan penunjuk putar guna melihat frame tertentu.
- Klik kontrol Perbesar dan Perkecil di bagian bawah untuk melakukan zoom. Dalam hal ini, Anda melakukan zoom berdasarkan penunjuk waktu.
- 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 melakukan zoom 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 menandainya di jalur utama.
Klik insight, misalnya, permintaan yang memblokir rendering, untuk membukanya di panel Detail. Untuk memahami masalah lebih lanjut, 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 membutuhkan waktu lebih lama untuk dirender, di linimasa, Anda akan melihat badge LCP dengan kotak kuning atau segitiga merah.
Untuk membuka panel Detail, klik badge LCP di linimasa atau di panel Insight 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 aset yang memblokir rendering.
Untuk melihat subbagian waktu rendering LCP, scroll ke bawah ke bagian Detail > Perincian waktu.
Waktu rendering LCP terdiri dari subbagian berikut:
| Sub-bagian LCP | Deskripsi |
|---|---|
| Time to first byte (TTFB) | Waktu sejak pengguna memulai pemuatan halaman hingga saat browser menerima byte pertama respons dokumen HTML. |
| Penundaan pemuatan resource | Perbedaan antara TTFB dan saat browser mulai memuat resource LCP. |
| Waktu pemuatan resource | Waktu yang dibutuhkan 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, ada dua jendela sesi. Jendela sesi memiliki jeda di antara keduanya.
Pergeseran Tata Letak Kumulatif (CLS) adalah salah satu metrik Core Web Vitals. Gunakan jalur Pergeseran Tata Letak untuk mengidentifikasi potensi masalah dan penyebab pergeseran tata letak.
Selalu mulai dengan jendela sesi terbesar saat meningkatkan metrik CLS. Dalam contoh kita, jendela sesi 1 adalah jendela terbesar, berdasarkan warna latar belakang dan level.
Klik screenshot untuk melihat detail pergeseran tata letak, mengidentifikasi kemungkinan penyebab utama dan elemen yang terpengaruh.
Dalam contoh kami, kemungkinan penyebab utamanya adalah media yang tidak berukuran. Untuk mempelajari cara memperbaikinya, lihat Mengoptimalkan Pergeseran Tata Letak Kumulatif.
Memahami skor pergeseran tata letak
Untuk memahami cara penghitungan skor, gunakan bagian Window di panel Details. Jendela menampilkan interval 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 diberi skor 0.15. Pergeseran tata letak kedua diberi skor 0.041.
Skor total untuk interval sesi ini adalah 0.19. Berdasarkan nilai minimum CLS, halaman ini perlu ditingkatkan. Warna latar belakang jendela sesi mencerminkan hal yang sama.
Grafik latar belakang jendela sesi meningkat seiring waktu. Skor kumulatif pergeseran tata letak mencerminkan peningkatan pada saat itu.
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 pengukuran performa kustom, Anda dapat menggunakan User Timing dan memvisualisasikan waktu dengan jalur Timing. Untuk mengetahui informasi selengkapnya, lihat User timing API.
Lihat halaman demo ini yang menghitung waktu yang telah berlalu saat pemuatan teks.
Untuk melihat waktu pengguna:
- Tandai tempat di aplikasi Anda dengan
performance.mark(). - Ukur waktu yang berlalu di antara tanda dengan
performance.measure(). - Merekam performa.
- Lihat pengukuran di jalur Waktu. Jika Anda tidak dapat melihat jalur, periksa Waktu pengguna di Setelan.
- Untuk melihat detail, klik pengaturan waktu di jalur.
Menyesuaikan UI
Untuk menyesuaikan Linimasa dan Jalur, klik ikon Setelan panel dan 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.
- Dalam dialog, klik Hapus untuk mengonfirmasi penghapusan.