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

Sofia Emelianova
Sofia Emelianova

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

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

    Insight performa di menu.

    Atau, gunakan Menu Perintah untuk membuka panel Insight performa.

    Tampilkan perintah Insight performa di menu Perintah.

Rekam performa

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

  1. Buka halaman demo ini di tab baru dan, di halaman tersebut, buka panel Insight performa.
  2. 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:

    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 putar ulang.

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.

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. Pintasan keyboard.

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.

Panel Insight.

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.

Detail insight.

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.

Melihat metrik performa Data Web.

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.

nilai minimum LCP.

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.

Badge LCP.

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.

Panel detail.

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.

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.

Trek Layout Shifts.

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

Periode dan celah sesi.

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.

CLS.

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

Lihat detail pergeseran tata letak.

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

mengidentifikasi akar masalahnya.

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.

Memahami skor pergeseran tata letak.

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.

Nilai minimum CLS.

Grafik latar belakang jendela sesi meningkat seiring waktu. Skor kumulatif pergeseran tata letak mencerminkan peningkatan pada titik waktu tersebut.

Grafik latar belakang jendela sesi.

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

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

Lihat aktivitas GPU

Melihat aktivitas GPU dalam jalur GPU. Trek 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 informasi selengkapnya, lihat User time 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 berlalu antar-tanda dengan performance.measure().
  3. Rekam performa.
  4. Lihat pengukuran di jalur Waktu. Jika Anda tidak dapat melihat lagu tersebut, periksa Waktu pengguna di Setelan.
  5. Untuk melihat detailnya, klik pengaturan waktu pada trek. Pelacakan Waktu.

Menyesuaikan UI

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

Setelan.

Mengekspor rekaman

Untuk menyimpan rekaman, klik Ekspor .

Mengekspor rekaman.

Mengimpor rekaman

Untuk memuat rekaman, pilih Impor .

Mengimpor rekaman.

Menghapus rekaman

Untuk menghapus rekaman:

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