Cara mengaktifkan HUD benchmark Chrome untuk melacak metrik kinerja
Tim pengembangan Google Chrome baru-baru ini menambahkan tampilan peringatan (HUD) untuk membantu pengembang dan pengguna melacak metrik kinerja situs web yang berbeda. HUD melacak metrik dalam platform Core Web Vitals Google, seperti Cat Konten Terbesar (LCP), Penundaan Input Pertama (FID), dan Pergeseran Tata Letak Kumulatif (CLS). Hari ini, kita akan melihat lebih dekat bagaimana Anda dapat mengaktifkan HUD ini di Chrome, apa arti metrik ini sebenarnya, dan bagaimana hal itu memengaruhi situs Anda.
Aktifkan HUD Tolok Ukur Chrome
Ada dua metode untuk melihat benchmark Chrome sebagai tampilan notifikasi. Anda dapat mengaktifkan HUD dengan bantuan flag fitur baru di Chrome atau menggunakan ekstensi Chrome resmi.
Aktifkan HUD Benchmark Chrome menggunakan tanda fitur
Tolok ukur pengujian HUD Google sekarang berada di belakang bendera fitur di Chrome Canary terbaru. Pada artikel ini, saya menggunakan Chrome Canary 89.0.4349.3 untuk demonstrasi. Anda dapat mengikuti langkah-langkah ini untuk mengaktifkan HUD di Chrome di Mac, WindowsLinux, Chrome OS, dan Android.
1. Buka Google Chrome Canary dan buka chrome://flags. Di kotak pencarian yang tersedia di halaman ini, cari ‘Tampilkan metrik kinerja di HUD’dan pilih ‘Diaktifkan’. Atau, Anda dapat menempelkan URL yang disediakan di bawah ini ke bilah alamat browser Anda.
chrome://flags/#show-performance-metrics-hud
2. Setelah mengaktifkan bendera, restart browser. Anda sekarang perhatikan HUD benchmark baru Chrome di sudut kanan atas dari browser. Sayangnya, HUD tidak mendukung drag and drop untuk reposisi saat ini, jadi Anda harus melihatnya di tempat yang sama.
Aktifkan Chrome Benchmark HUD dengan Ekstensi Chrome
Jika Anda tidak mau hidup di ambang pendarahan dengan Chrome Canary, Anda dapat menginstal ekstensi Chrome yang dirilis oleh Google untuk mendapatkan HUD serupa. Inilah cara Anda melakukannya:
1. Buka Google Chrome dan buka Toko Web Chrome. Di kotak pencarian, ketik ‘Web Vitals’ dan instal yang disediakan oleh addyosmani. Atau, Anda dapat menggunakan tautan ini untuk langsung membuka halaman ekstensi.
2. Setelah menginstal ekstensi, Anda akan melihat metrik yang sama dengan tanda fitur. Anda dapat menggunakan salah satu dari opsi ini sesuai dengan kenyamanan dan preferensi Anda. Karena saat ini tidak ada opsi untuk menonaktifkan instance flag fitur dengan cepat, saya sarankan menggunakan ekstensi Chrome.
Fitur Chrome Benchmark HUD
HUD benchmark Chrome saat ini menawarkan fitur berikut:
- Cat dengan kandungan terbesar (LCP)
- Penundaan input pertama (FID)
- Pergeseran Tata Letak Kumulatif (CLS)
- Rata-rata Bingkai Jatuh (ADF)
Cat dengan kandungan terbesar (LCP)
Cat dengan pengukuran konten terbesar (LCP) waktu yang diperlukan untuk menampilkan gambar atau blok teks terbesar di bagian halaman web yang dapat dilihat. Google menyarankan situs mendapat LCP untuk pertama kalinya 2,5 detik untuk pengalaman pengguna yang ideal. LCP sekitar 2,5 detik sehingga 4 detik dianggap rata-rata, dan durasi lebih dari itu dihitung sebagai buruk dan dapat menyebabkan pengalaman pengguna yang buruk.
Gambar: GoogleUntuk menjaga LCP di dalam selama 2,5 detik, perusahaan mendesak pengembang mengukur persentase pemuatan halaman ke-75 pada versi seluler dan desktop. Sederhananya, yang harus Anda lakukan adalah memastikan bahwa setidaknya 75 persen tampilan halaman memenuhi ambang batas baik yang diperlukan, dalam hal ini 2,5 detik.
Penundaan input pertama (FID)
Sementara LCP adalah tentang kecepatan memuat, First Input Delay (FID) mewakili respons halaman web. Ini mengukur waktu dari saat pengguna berinteraksi dengan halaman hingga saat halaman tersebut berhasil mulai memproses sebagai respons terhadap tindakan tersebut. Perlu dicatat bahwa FID tidak termasuk waktu pemrosesan keseluruhan.
Gambar: GoogleDalam situasi ideal, nilai FID situs harus kurang dari 100 milidetik. Rentang dari 100 milidetik hingga 300 milidetik perlu ditingkatkan. Jika waktunya melebihi 300 milidetik, situs dianggap memiliki FID yang buruk. Anda dapat mengikuti pendekatan pemuatan halaman persentil ke-75 yang sama yang dibahas di atas untuk mempertahankan skor FID yang baik.
Pergeseran Tata Letak Kumulatif (CLS)
Pergeseran Tata Letak Kumulatif (CLS) melacak semua waktu yang mengganggu ketika konten halaman web tiba-tiba berubah naik atau turun tanpa peringatan apa pun. Dengan kata lain, CLS mengukur stabilitas visual sebuah situs web.
Menurut Google, perubahan tata letak terutama terjadi ketika sumber daya halaman dimuat secara tidak sinkron atau ketika elemen DOM ditambahkan secara dinamis ke halaman web. Skor CLS yang baik adalah kurang dari 0,1. Skor di atas 0,25 dianggap buruk. Anda dapat mempelajari lebih lanjut tentang bagaimana skor CLS dihitung di sini.
Rata-rata Bingkai Jatuh (ADF)
Average Frame Drop (ADF), seperti namanya, menunjukkan persentase frame yang dijatuhkan saat pengguna berinteraksi dengan situs web. Persentase ADF yang lebih rendah akan menghasilkan kinerja yang lebih baik, sementara penurunan frame yang tinggi dapat menyebabkan kelambatan dan masalah kinerja lainnya. Pada tulisan ini, ADF hanya tersedia pada versi flag fitur dari HUD.
Gunakan HUD benchmark Chrome untuk memantau kinerja situs
Dalam posting blog bulan lalu, Google mengumumkan rencananya pertimbangkan Data Web Inti – LCP, FID, dan CLS sebagai sinyal peringkat mulai Mei 2021. Jika Anda adalah pemilik atau pengembang situs web, sekarang adalah saat yang tepat untuk mengoptimalkan pengalaman pengguna situs Anda menggunakan HUD benchmark Chrome untuk menghindari dampak negatif dari pembaruan yang akan datang. Untuk tips lainnya, jangan lupa untuk membaca artikel tips dan trik Google Chrome kami.
