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

Sofia Emelianova
Sofia Emelianova

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

Mengapa panel baru?

Panel Insight performa yang baru merupakan eksperimen untuk mengatasi 3 kendala developer ini saat bekerja dengan panel Performa yang sudah ada:

  • Informasi terlalu banyak. Dengan UI yang didesain ulang, panel Insight performa akan menyederhanakan data dan hanya menampilkan informasi yang relevan.
  • Sulit membedakan beberapa kasus penggunaan. Panel Insight performa mendukung analisis berbasis kasus penggunaan. Saat ini, fitur ini hanya mendukung kasus penggunaan pemuatan halaman, dan akan didukung di 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 menunjukkan cara mengukur dan memahami performa pemuatan halaman dengan panel Insight performa. Lanjutkan membaca atau tonton video versi tutorial di atas.

Membuka panel Insight performa

  1. Buka DevTools.
  2. Klik Opsi lainnya > Alat lainnya > Insight performa.

    Insight performa di menu.

    Atau, gunakan Menu Perintah untuk membuka panel Analisis performa.

    Tampilkan perintah Insight performa di menu Perintah.

Rekam performa

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

  1. Buka halaman demo ini di tab baru, lalu buka panel Insight performa di halaman ini.
  2. Anda dapat men-throttle jaringan dan CPU saat merekam. Untuk tutorial ini, periksa Disable cache dan setel CPU ke 4x pelambatan di menu drop-down:

    Throttling.

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

    Opsi mulai.

Memutar ulang rekaman pertunjukan

Gunakan kontrol di bagian bawah untuk mengontrol pemutaran ulang rekaman.

Kontrol replay.

Berikut adalah contoh cara melakukannya.

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

DevTools akan otomatis memperkecil tampilan untuk menampilkan linimasa perekaman secara lengkap. Anda dapat membuka rekaman dengan zoom dan memindahkan linimasa.

Untuk memperbesar/memperkecil 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 dan Zoom out 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. Pintasan keyboard.

Saat menggunakan pintasan, Anda memperbesar/memperkecil berdasarkan kursor mouse.

Melihat insight performa

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

Insight.

Arahkan kursor ke setiap insight untuk menandainya di jalur utama.

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

Detail insight.

Melihat metrik performa Data Web

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

Anda dapat melihat metrik ini di panel Linimasa dan Insight.

Melihat metrik performa Data Web.

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

Temukan penundaan pada Large Contentful Paint

Largest Contentful Paint (LCP) adalah salah satu metrik Data Web Inti. Class ini melaporkan waktu render gambar atau blok teks terbesar yang terlihat dalam area pandang, relatif terhadap waktu halaman pertama kali mulai dimuat.

Nilai minimum LCP.

Skor LCP yang baik adalah maksimal 2,5 detik.

Jika proses rendering terbesar di halaman Anda memerlukan waktu yang lebih lama, maka di linimasa, Anda akan melihat badge LCP dengan kotak kuning atau segitiga merah.

Badge LCP.

Untuk membuka panel Details, klik badge LCP di linimasa atau di panel Insights di sebelah kanan. Di panel, Anda dapat menemukan kemungkinan penyebab penundaan dan saran tentang cara memperbaikinya.

Panel detail.

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.

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 sampai saat browser menerima byte pertama dari respons dokumen HTML.
Penundaan pemuatan resource Delta di antara TTFB dan saat browser mulai memuat resource LCP.
Waktu pemuatan sumber daya 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 dalam jalur Layout Shifts.

Trek Layout Shifts.

Pergeseran tata letak dikelompokkan dalam periode sesi. Dalam contoh, ada dua periode sesi. Jendela sesi memiliki celah di antara keduanya.

Jeda dan interval 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.

CLS.

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

Melihat detail pergeseran tata letak.

Dalam contoh ini, kemungkinan akar masalahnya adalah media tidak berukuran. Untuk mempelajari cara memperbaikinya, lihat Mengoptimalkan Pergeseran Tata Letak Kumulatif.

mengidentifikasi 
akar penyebab potensial.

Memahami skor pergeseran tata letak

Untuk memahami cara penghitungan skor, gunakan bagian Window di panel Details. Window menampilkan jendela sesi tempat pergeseran tata letak saat ini berada.

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 mendapatkan skor 0.041.

Memahami skor pergeseran tata letak.

Total skor untuk periode sesi ini adalah 0.19. Berdasarkan nilai minimum CLS, terdapat peningkatan kualitas. Warna latar belakang jendela sesi mencerminkan hal yang sama.

Nilai minimum CLS.

Grafik latar belakang periode sesi meningkat seiring waktu. Skor kumulatif pergeseran tata letak mencerminkan peningkatan pada saat itu.

Grafik latar belakang jendela penghentian.

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 jaringan.

Lihat aktivitas perender

Melihat aktivitas render di jalur Renderer. Anda dapat memperluas setiap perender untuk melihat aktivitas dan mengklik setiap item untuk melihat detailnya.

Lihat aktivitas perender.

Melihat aktivitas GPU

Lihat aktivitas GPU di jalur GPU. Jalur GPU disembunyikan secara default. Untuk mengaktifkannya, periksa GPU di Setelan.

Melihat aktivitas GPU.

Melihat waktu pengguna

Untuk mendapatkan ukuran performa kustom, Anda dapat menggunakan Waktu Pengguna dan memvisualisasikan waktu dengan pelacakan Waktu. Untuk mengetahui informasi selengkapnya, lihat API waktu pengguna.

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 antartanda dengan performance.measure().
  3. Merekam performa.
  4. Lihat pengukuran di jalur Waktu. Jika Anda tidak dapat melihat jalur, periksa Waktu pengguna di Setelan.
  5. Untuk melihat detailnya, klik waktu pada trek. Pelacakan Waktu.

Menyesuaikan UI

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

Setelan.

Mengekspor rekaman

Untuk menyimpan rekaman, klik Export .

Mengekspor rekaman.

Mengimpor rekaman

Untuk memuat rekaman, pilih Import .

Mengimpor rekaman.

Menghapus rekaman

Untuk menghapus rekaman:

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