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

Jecelyn Yeen

Sofia Emelianova

Gunakan panel Insight performa untuk mendapatkan insight berbasis kasus penggunaan dan yang dapat ditindaklanjuti tentang performa situs Anda.

Catatan: Fitur ini hanya tersedia di Chrome, bukan Chromium.

Catatan: Ini adalah fitur pratinjau di Chrome 102. Tim kami secara aktif berupaya meningkatkan fitur ini dan kami menantikan masukan Anda untuk peningkatan kualitas lebih lanjut.

Mengapa panel baru?

Panel Insight performa yang baru adalah eksperimen untuk mengatasi 3 titik masalah developer ini saat bekerja dengan panel Performa yang sudah ada:

• Informasi terlalu banyak. Dengan UI yang didesain ulang, panel Insight performa menyederhanakan data dan hanya menampilkan informasi yang relevan.
• Sulit untuk membedakan berbagai kasus penggunaan. Panel Insight performa mendukung analisis berbasis kasus penggunaan. Saat ini, fitur ini hanya mendukung kasus penggunaan pemuatan halaman, dan akan menghadirkan fitur lain pada masa mendatang berdasarkan masukan Anda, misalnya, interaktivitas.
• Memerlukan keahlian mendalam tentang cara browser bekerja agar dapat digunakan secara efektif. Panel Insight performa menyoroti 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 di atas.

Membuka panel Insight performa

1. Buka DevTools.

2. Klik More options > More tools > Performance insights.

   

   Atau, gunakan Command Menu untuk membuka panel Performance insights.

   

Mencatat 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 buka panel Insight performa.

2. Anda dapat membatasi jaringan dan CPU saat merekam. Untuk tutorial ini, lihat Disable cache dan tetapkan CPU ke 4x pelambatan di menu drop-down:

   

   Poin penting: Throttling bersifat relatif terhadap kemampuan komputer Anda. Misalnya, opsi perlambatan 4x membuat CPU Anda beroperasi 4 kali lebih lambat dari biasanya. DevTools tidak dapat benar-benar menyimulasikan CPU perangkat seluler karena arsitektur perangkat seluler sangat berbeda dari desktop dan laptop.

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

   

   Poin penting: Jika ingin mengukur performa umum halaman web Anda, gunakan Mulai merekam. Buka halaman dan klik Stop recording secara manual untuk berhenti merekam.

Memutar ulang rekaman pertunjukan

Gunakan kontrol di bagian bawah untuk mengontrol pemutaran ulang rekaman.

Berikut adalah contoh cara melakukannya.

• Klik Putar untuk memutar rekaman.
• Klik Jeda untuk menjeda replay.
• Sesuaikan kecepatan pemutaran dengan menu drop-down.
• Klik Aktifkan/nonaktifkan pratinjau visual untuk menampilkan atau menyembunyikan pratinjau visual.

Menavigasi rekaman performa

DevTools akan otomatis diperkecil untuk menampilkan linimasa perekaman secara lengkap. Anda dapat melihat rekaman dengan zoom dan memindahkan rentang waktu.

Untuk memperbesar 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 Zoom in dan Zoom out di bagian bawah untuk memperbesar. Dalam hal ini, Anda memperbesar 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 memperbesar 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 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

Data Web adalah inisiatif dari Google untuk memberikan panduan terpadu terkait sinyal kualitas yang penting untuk memberikan pengalaman pengguna yang luar biasa di web.

Anda dapat melihat metrik ini di panel Linimasa dan Insights.

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

Temukan penundaan Large Contentful Paint

Largest Contentful Paint (LCP) adalah salah satu metrik Core Web Vitals. Kolom ini melaporkan waktu render gambar atau blok teks terbesar yang terlihat dalam area pandang, relatif terhadap waktu pemuatan halaman pertama kali.

Skor LCP yang baik adalah 2,5 detik atau kurang.

Jika Large Contentful Paint di halaman Anda memerlukan waktu lebih lama untuk dirender, dalam linimasa, Anda akan melihat badge LCP dengan persegi 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 penting secara inline untuk memperbaikinya. Untuk mempelajari lebih lanjut, lihat Menghilangkan resource yang memblokir render.

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
Waktu ke byte pertama (TTFB)	Waktu dari saat pengguna mulai memuat 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.
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.

Lihat aktivitas pergeseran tata letak

Melihat aktivitas pergeseran tata letak di jalur Layout Shifts.

Pergeseran tata letak dikelompokkan dalam jendela sesi. Pada contoh tersebut, ada dua periode sesi. Terdapat celah di antara jendela sesi.

Poin penting: Pikirkan tentang pergeseran tata letak seperti kembang api. Ada kalanya beberapa shift terjadi sekaligus, kemudian dijeda beberapa saat, kemudian beberapa shift terjadi lagi. Setiap kumpulan beberapa shift adalah periode sesi. Untuk informasi selengkapnya, lihat Jendela sesi.

Pergeseran Tata Letak Kumulatif (CLS) adalah salah satu metrik data web inti. Gunakan pelacakan 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 terdampak.

Dalam contoh kami, akar masalah potensial 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. Window menampilkan jendela sesi mana yang memiliki pergeseran tata letak saat ini.

Jika seluruh halaman digeser, skor maksimum setiap pergeseran tata letak adalah 1. Dalam contoh kita, pergeseran tata letak pertama memiliki skor 0.15. Pergeseran tata letak kedua memiliki skor 0.041.

Skor total untuk periode sesi ini adalah 0.19. Berdasarkan batas CLS, terdapat peningkatan. Warna latar belakang jendela sesi mencerminkan hal yang sama.

Grafik latar belakang periode sesi meningkat dari waktu ke waktu. Skor kumulatif pergeseran tata letak mencerminkan peningkatan pada titik waktu tersebut.

Lihat aktivitas jaringan

Melihat 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 Renderer. Anda dapat meluaskan setiap perender untuk melihat aktivitas dan mengklik setiap item untuk melihat detailnya.

Lihat aktivitas GPU

Lihat aktivitas GPU di 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 API waktu pengguna.

Lihat halaman demo ini yang menghitung waktu pemuatan teks yang telah berlalu.

Untuk melihat waktu pengguna:

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

Menyesuaikan UI

Untuk menyesuaikan Linimasa dan Jalur, klik ikon Setelan panel dan periksa opsi yang Anda inginkan.

Mengekspor rekaman

Untuk menyimpan rekaman, klik Ekspor .

Mengimpor rekaman

Untuk memuat rekaman, pilih Import .

Menghapus rekaman

Untuk menghapus rekaman:

1. Klik Delete. Dialog konfirmasi akan terbuka.
2. Pada dialog, klik Delete untuk mengonfirmasi penghapusan.