Menemukan masalah terkait performa rendering

Sofia Emelianova

Kayce Basques

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

Soroti area yang dicat ulang dengan cat berkedip

Dengan mengaktifkan opsi ini, Chrome akan berkedip hijau pada layar setiap kali terjadi penggambaran ulang.

Untuk melihat area yang sedang dicat ulang:

1. Buka tab Rendering di demo ini, lalu centang Paint flashing.
2. Amati proses pengecatan ulang yang ditandai dengan warna hijau.

Jika, di halaman lain, Anda melihat seluruh layar berisi warna hijau atau area layar yang menurut Anda seharusnya tidak digambar, pertimbangkan untuk menyelidiki lebih lanjut.

Menyoroti area pergeseran tata letak

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

Screencast yang menggambarkan bagaimana ketidakstabilan tata letak dapat berdampak negatif terhadap pengguna.

Untuk melihat lokasi dan waktu pergeseran tata letak di halaman:

1. Buka tab Rendering, lalu periksa Layout Shift Region.

2. Muat ulang halaman. Area pergeseran tata letak ditandai dengan warna ungu.

Melihat lapisan dan ubin dengan batas lapisan

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

Untuk mengaktifkan batas lapisan:

1. Buka tab Rendering, lalu periksa Batas Lapisan.
2. Amati batas lapisan berwarna oranye dan olive serta ubin berwarna cyan.

Lihat komentar di debug_colors.cc untuk 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 tampilan.

Untuk membuka Statistik rendering frame:

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

Overlay Statistik rendering frame menampilkan:

• Perkiraan waktu nyata frame per detik saat halaman berjalan.
• Bingkai linimasa sebagai plot dengan tiga jenis bingkai:
  • Frame berhasil dirender (garis biru)
  • Frame yang ditampilkan sebagian (garis kuning)
  • Frame yang dihapus (garis merah).
• Status raster GPU: aktif atau nonaktif. Untuk informasi selengkapnya, lihat Cara mendapatkan raster GPU.
• Penggunaan memori GPU: jumlah memori MB yang digunakan dan maksimum.

Mengidentifikasi masalah performa scroll

Gunakan Masalah Performa Scroll 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, lalu periksa Masalah Performa Scrolling.
2. Amati elemen yang berpotensi bermasalah yang ditandai.

Lihat Core Web Vitals

Web Vitals adalah inisiatif dari Google untuk memberikan panduan terpadu terkait sinyal kualitas yang penting dalam menghadirkan pengalaman pengguna yang memuaskan di web.

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

• Largest Contentful Paint (LCP): mengukur performa pemuatan. Untuk memberikan pengalaman pengguna yang baik, LCP harus muncul dalam waktu 2,5 detik sejak 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 sebesar 0,1. atau kurang.

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