Gunakan panel Insight performa untuk mendapatkan insight berbasis kasus penggunaan dan dapat ditindaklanjuti tentang performa situs Anda.
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 akan menyederhanakan data dan hanya menampilkan informasi yang relevan.
- Sulit untuk membedakan antar-kasus penggunaan. Panel Insight performa mendukung analisis berbasis kasus penggunaan. Saat ini, fitur ini hanya mendukung kasus penggunaan pemuatan halaman, dengan dukungan lainnya di masa mendatang berdasarkan masukan Anda, misalnya, interaktivitas.
- Memerlukan keahlian mendalam tentang cara kerja browser untuk 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. Teruskan 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.
Rekam performa
Panel Insight performa dapat mencatat performa umum dan berdasarkan kasus penggunaan (misalnya, pemuatan halaman).
- Buka halaman demo ini di tab baru dan, di halaman tersebut, buka panel Insight performa.
Anda dapat men-throttle jaringan dan CPU saat merekam. Untuk tutorial ini, centang Nonaktifkan cache dan tetapkan CPU ke 4x lebih lambat dalam menu drop-down:
Klik 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 ini contoh cara melakukannya.
- Klik Putar untuk memutar rekaman.
- Klik Jeda untuk menjeda replay.
- Sesuaikan kecepatan pemutaran dengan menu drop-down.
- Klik Aktifkan pratinjau visual untuk menampilkan atau menyembunyikan pratinjau visual.
Menjelajahi rekaman performa
DevTools otomatis memperkecil tampilan untuk menampilkan linimasa perekaman lengkap. Anda dapat menavigasi rekaman dengan opsi zoom dan memindahkan linimasa.
Untuk memperbesar/memperkecil dan memindahkan linimasa ke kiri dan ke kanan, gunakan tombol navigasi yang sesuai:
- Klik Linimasa untuk memindahkan titik pemutaran guna melihat frame tertentu.
- Klik kontrol Perbesar dan Perkecil di bagian bawah untuk memperbesar. 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 untuk melihat pintasan.
Saat menggunakan pintasan, Anda melakukan zoom berdasarkan kursor mouse.
Lihat insight performa
Dapatkan daftar insight performa di panel Insights. Mengidentifikasi dan memperbaiki potensi masalah performa.
Arahkan kursor ke setiap insight untuk menyorotinya di jalur utama.
Klik insight, misalnya, permintaan pemblokiran render, untuk membukanya di panel Details. 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. Ini melaporkan waktu render gambar atau blok teks terbesar yang terlihat dalam area pandang, relatif terhadap waktu pertama kali halaman mulai dimuat.
Skor LCP yang baik adalah maksimal 2,5 detik.
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 muat 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.
Lihat aktivitas pergeseran tata letak
Lihat aktivitas pergeseran tata letak di jalur Layout Shifts.
Pergeseran tata letak dikelompokkan dalam periode 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 Layout Shift 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 penyebab utama dan elemen yang terpengaruh.
Dalam contoh ini, kemungkinan akar masalahnya 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 Jendela di panel Details. Window menampilkan jendela sesi yang mencakup pergeseran tata letak saat ini.
Jika seluruh halaman digeser, skor maksimum setiap pergeseran tata letak adalah 1. Dalam contoh ini, pergeseran tata letak pertama mendapatkan skor 0.15. Pergeseran tata letak kedua mendapatkan skor 0.041.
Total skor untuk periode sesi ini adalah 0.19. Berdasarkan nilai minimum CLS, dimensi tersebut 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 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
Melihat aktivitas render di jalur Perender. Anda dapat meluaskan setiap perender untuk melihat aktivitas dan mengklik setiap item untuk melihat detailnya.
Lihat aktivitas GPU
Melihat aktivitas GPU dalam jalur GPU. Trek GPU disembunyikan secara default. Untuk mengaktifkannya, periksa GPU di Setelan.
Melihat waktu pengguna
Untuk mendapatkan ukuran performa kustom, Anda dapat menggunakan Waktu Pengguna dan memvisualisasikan waktu dengan pelacakan Waktu. Untuk informasi selengkapnya, lihat User time API.
Lihat halaman demo ini yang menghitung waktu berlalu pemuatan teks.
Untuk melihat waktu pengguna:
- Tandai tempat di aplikasi Anda dengan
performance.mark(). - Ukur waktu berlalu antar-tanda dengan
performance.measure(). - Rekam performa.
- Lihat pengukuran di jalur Waktu. Jika Anda tidak dapat melihat lagu tersebut, periksa Waktu pengguna di Setelan.
- Untuk melihat detailnya, klik pengaturan waktu pada trek.
Menyesuaikan UI
Untuk menyesuaikan Linimasa dan Jalur, klik ikon Setelan di panel dan periksa 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.
- Pada dialog, klik Delete untuk mengonfirmasi penghapusan.