Cara Mengaktifkan Benchmark HUD Chrome untuk Melacak Metrik Kinerja

Tim pengembangan Google Chrome baru-baru ini menambahkan tampilan pendahuluan (HUD) untuk membantu pengembang dan pengguna melacak metrik kinerja situs web yang berbeda. HUD melacak metrik yang merupakan bagian dari platform Core Web Vitals Google seperti Largest Contentful Paint (LCP), First Input Delay (FID), dan Cumulative Layout Shift (CLS). Hari ini, kita akan melihat lebih dekat bagaimana Anda dapat mengaktifkan HUD ini di Chrome, apa arti sebenarnya dari metrik ini, dan bagaimana hal itu memengaruhi situs web Anda.

Aktifkan HUD Tolok Ukur Chrome

Ada dua metode untuk melihat benchmark Chrome sebagai tampilan awal. Anda dapat mengaktifkan HUD dengan bantuan flag fitur baru di dalam Chrome atau menggunakan ekstensi Chrome resmi.

Daftar isi

Aktifkan HUD Benchmark Chrome Menggunakan Fitur Bendera

HUD benchmark eksperimental Google saat ini ada di belakang bendera fitur di Chrome Canary terbaru. Pada artikel ini, saya telah menggunakan Chrome Canary 89.0.4349.3 untuk demonstrasi. Anda dapat mengikuti langkah-langkah ini untuk mengaktifkan HUD di Chrome di Mac, Windows, Linux, Chrome OS, dan Android.

1. Buka Google Chrome Canary dan kunjungi chrome://flags. Di kotak telusur yang tersedia di laman ini, telusuri ‘Tampilkan metrik kinerja di HUD’ , dan pilih ‘Diaktifkan’. Atau, Anda dapat menempelkan URL yang diberikan di bawah ini ke bilah alamat browser Anda.

chrome://flags/#show-performance-metrics-hud

2. Setelah mengaktifkan bendera, restart browser. Anda sekarang akan melihat HUD benchmark baru Chrome di sudut kanan atas browser. Sayangnya, HUD tidak mendukung drag and drop untuk memposisikan ulang saat ini, jadi Anda dibiarkan melihatnya di tempat yang sama.

Aktifkan HUD Benchmark Chrome Menggunakan Ekstensi Chrome

Jika Anda tidak ingin hidup di ujung tombak 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 kunjungi Toko Web Chrome. Di kotak pencarian, ketik ‘Web Vitals’ dan instal yang ditawarkan oleh addyosmani. Atau, Anda dapat menggunakan tautan ini untuk langsung membuka halaman ekstensi.

2. Setelah menginstal ekstensi, Anda akan melihat metrik yang sama yang ditawarkan dengan tanda fitur. Anda dapat menggunakan salah satu dari ini berdasarkan kenyamanan dan preferensi Anda. Karena tidak ada opsi untuk menonaktifkan versi flag fitur dengan cepat, saya sarankan menggunakan ekstensi Chrome.

Fitur HUD Tolok Ukur Chrome

HUD benchmark Chrome saat ini menawarkan fitur berikut:

  • Cat Contentful Terbesar (LCP)
  • Penundaan Input Pertama (FID)
  • Pergeseran Tata Letak Kumulatif (CLS)
  • Bingkai Jatuh Rata-Rata (ADF)

Cat Contentful Terbesar (LCP)

Largest Contentful Paint (LCP) mengukur waktu yang dibutuhkan untuk merender gambar atau blok teks terbesar di bagian halaman web yang dapat dilihat . Google merekomendasikan situs web untuk memiliki LCP dalam 2,5 detik pertama untuk pengalaman pengguna yang ideal. LCP di suatu tempat sekitar 2,5 detik hingga 4 detik dianggap rata-rata dan durasi di luar itu dianggap buruk dan dapat menghasilkan UX yang buruk.

Gambar: Google

Untuk menjaga LCP dalam 2,5 detik, perusahaan mendesak pengembang untuk mengukur persentil ke-75 dari pemuatan halaman di seluruh versi seluler dan desktop . Sederhananya, yang harus Anda lakukan adalah memastikan bahwa setidaknya 75 persen tampilan halaman memenuhi ambang batas baik yang diperlukan, yang dalam hal ini adalah 2,5 detik.

Penundaan Input Pertama (FID)

Sementara LCP adalah tentang kecepatan memuat, First Input Delay (FID) mewakili daya tanggap halaman web. Ini mengukur waktu dari saat pengguna berinteraksi dengan halaman hingga saat halaman mengelola untuk mulai memproses untuk merespons tindakan. Perlu dicatat bahwa FID tidak termasuk waktu pemrosesan keseluruhan .

Gambar: Google

Dalam skenario ideal, nilai FID situs web harus kurang dari 100 milidetik . Kisaran antara 100 milidetik hingga 300 milidetik perlu ditingkatkan. Jika waktunya melebihi 300 milidetik, halaman web 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 situs web tiba-tiba bergeser ke atas atau ke bawah tanpa peringatan apa pun. Dengan kata lain, CLS mengukur stabilitas visual sebuah situs web.

Menurut Google, pergeseran tata letak terutama terjadi ketika sumber daya halaman dimuat secara tidak sinkron atau ketika unsur 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 .

Bingkai Jatuh Rata-Rata (ADF)

Average Dropped Frame (ADF), seperti namanya, menunjukkan persentase frame yang dijatuhkan saat pengguna berinteraksi dengan halaman web. Persentase ADF yang lebih rendah akan menghasilkan kinerja yang lebih baik, sementara penurunan bingkai yang tinggi dapat menyebabkan kelambatan dan masalah kinerja lainnya. Pada tulisan ini, ADF hanya tersedia pada versi flag fitur dari HUD.

Gunakan HUD Tolok Ukur Chrome untuk Melacak Kinerja Situs Web

Dalam posting blog bulan lalu, Google mengumumkan rencananya untuk mempertimbangkan Core Web Vitals – LCP, FID, dan CLS sebagai sinyal peringkat mulai Mei 2021 . Jika Anda adalah pemilik situs web atau pengembang, sekarang adalah saat yang tepat untuk mengoptimalkan pengalaman pengguna situs web Anda menggunakan Benchmark HUD Chrome untuk menghindari dampak negatif dari pembaruan yang akan datang. Untuk tips lainnya, jangan lupa untuk membaca artikel tips dan trik Google Chrome kita .