Menemukan masalah terkait performa rendering

Sofia Emelianova

Kayce Basques

Temukan masalah performa rendering dengan referensi opsi terkait performa ini pada tab Rendering.

Sorot area yang dicat ulang dengan flash cat

Dengan mengaktifkan opsi ini, Chrome akan mengedipkan layar menjadi hijau setiap kali pengecatan ulang terjadi.

Untuk melihat area yang sedang dicat ulang:

1. Buka tab Rendering pada demo ini dan centang Paint flashing.
2. Amati pengecatan ulang yang ditandai dengan warna hijau.

Jika, di halaman lainnya, Anda melihat seluruh layar berkedip hijau atau area layar yang menurut Anda tidak seharusnya digambar, pertimbangkan untuk menyelidikinya lebih lanjut.

Menyoroti area pergeseran tata letak

Pergeseran tata letak menyebabkan penggambaran ulang yang tidak terduga dan tidak hanya mengganggu, tetapi juga berbahaya.

Untuk melihat lokasi dan waktu pergeseran tata letak di halaman:

1. Buka tab Rendering dan centang Layout Shift Regions.

2. refresh Muat ulang halaman. Area pergeseran tata letak disorot singkat dengan warna ungu.

Lapisan tampilan dan ubin dengan batas lapisan

Gunakan Batas Lapisan untuk melihat overlay batas lapisan dan ubin di bagian atas halaman.

Untuk mengaktifkan batas lapisan:

1. Buka tab Rendering dan centang Layer Borders.
2. Amati batas lapisan dalam warna oranye dan zaitun, serta ubin dalam warna sian.

Lihat komentar di debug_colors.cc untuk mengetahui penjelasan tentang kode warna.

Lihat frame per detik secara real time dengan statistik rendering frame

Statistik rendering frame adalah overlay yang muncul di sudut kanan atas area pandang Anda.

Untuk membuka Statistik rendering frame:

1. Buka tab Rendering dan aktifkan kotak centang Frame rendering statistics.
2. Amati statistik di sudut kanan atas halaman.

Overlay Statistik rendering frame menampilkan:

• Estimasi real-time dari frame per detik saat halaman berjalan.
• Frame linimasa sebagai plot dengan tiga jenis frame:
  • Frame berhasil dirender (garis biru)
  • Frame yang ditampilkan sebagian (garis kuning)
  • Frame jatuh (garis merah).
• Status raster GPU: aktif atau nonaktif. Untuk informasi selengkapnya, lihat Cara mendapatkan rasterisasi GPU.
• Penggunaan memori GPU: jumlah memori yang digunakan dan maksimum MB.

Mengidentifikasi masalah performa scroll

Gunakan Masalah Performa Scrolling untuk mengidentifikasi elemen halaman yang memiliki pemroses peristiwa terkait scroll yang dapat membahayakan performa halaman.

Untuk melihat elemen yang berpotensi bermasalah:

1. Buka tab Rendering dan periksa Scrolling Performance Issues.
2. Amati elemen yang berpotensi bermasalah dan ditandai.

Melihat Data Web Inti

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

Data Web Inti adalah subkumpulan Data Web yang berlaku untuk semua halaman web. Setiap Data Web Inti mewakili faset pengalaman pengguna yang berbeda, dapat diukur di lapangan, dan mencerminkan pengalaman dunia nyata dari hasil penting yang berpusat pada pengguna. Data Web Inti adalah:

• Largest Contentful Paint (LCP): mengukur performa pemuatan. Untuk memberikan pengalaman pengguna yang baik, LCP akan muncul dalam waktu 2,5 detik saat halaman pertama kali mulai dimuat.
• Interaction to Next Paint (INP): mengukur interaktivitas. Untuk memberikan pengalaman pengguna yang baik, halaman harus memiliki INP 200 milidetik atau kurang.
• Pergeseran Tata Letak Kumulatif (CLS): mengukur stabilitas visual. Untuk memberikan pengalaman pengguna yang baik, halaman harus mempertahankan CLS 0.1. atau kurang.

Gunakan ekstensi Chrome Data Web untuk melihat nilai Data Web Inti halaman Anda.