Ekstensi Web Vitals kini menampilkan lebih banyak informasi proses debug untuk membantu Anda mengidentifikasi akar masalah Core Web Vitals.
Dipublikasikan: 4 Mei 2023
Ekstensi Web Vitals memberikan akses mudah ke informasi diagnostik Core Web Vitals untuk membantu developer mengukur dan mengatasi masalah Core Web Vitals. Alat ini melengkapi alat lain yang disediakan oleh tim Chrome untuk membantu developer meningkatkan pengalaman di situs mereka.
Kami telah memperbarui ekstensi untuk memberikan informasi debug tambahan kepada developer agar lebih mudah memahami dan mengatasi masalah performa mereka.
Menampilkan informasi debug di konsol
Ekstensi Web Vitals memiliki opsi debug "Log Konsol" selama beberapa waktu. Fitur ini dapat diaktifkan di layar Opsi:
Sebelum upgrade terakhir ini, tindakan ini mencatat output dari web-vitals library (yang mendukung ekstensi) dalam objek JSON:
Objek ini kemudian dapat diluaskan untuk mendapatkan detail lengkap, dan elemen seperti gambar LCP, dapat diarahkan kursor untuk menyorotinya di panel utama:
Hal ini sangat membantu, tetapi format output-nya tidak terlalu mudah digunakan, dan kami merasa dapat memberikan pengalaman developer yang lebih baik. Jadi, kami telah meningkatkan ekstensi ini untuk membuat informasi terpenting lebih terlihat—sambil tetap menyertakan objek lengkap bagi pengguna yang menginginkan detail selengkapnya.
Informasi proses debug baru untuk setiap metrik
Dengan rilis baru ini, kami telah menambahkan informasi debug baru dalam format yang lebih mudah dibaca untuk membantu Anda menemukan dan mengatasi masalah. Informasi yang berbeda diberikan untuk setiap metrik, karena setiap metrik berbeda.
Informasi debug LCP
Untuk Largest Contentful Paint (LCP), kami menampilkan elemen dan perincian 4 fase yang diuraikan dalam panduan Mengoptimalkan LCP:
Waktu LCP (2.876 milidetik—atau sekitar 2,9 detik) ditandai dengan warna kuning karena berada dalam kategori "Perlu Peningkatan".
Dalam contoh ini, kita melihat Resource load time adalah waktu yang paling lama, jadi untuk mengoptimalkan waktu LCP, Anda akan berusaha mengoptimalkannya - mungkin dengan menghindari hosting-nya di domain terpisah, atau dengan menggunakan gambar yang lebih kecil atau format yang lebih efisien. Dalam hal ini, prosesnya diperlambat secara artifisial untuk menunjukkan output—web.dev adalah situs yang cepat 😀
Elemen juga dapat diarahkan kursor untuk menyoroti gambar:
Mengklik kanan pada elemen juga memungkinkan Anda untuk memunculkannya di panel elemen.
Di sini, elemen LCP adalah sebuah gambar, dan jika kursor diarahkan ke gambar tersebut di konsol di sebelah kanan, elemen tersebut juga akan disorot di situs sebelah kiri.
Informasi debug CLS
Pergeseran yang berkontribusi pada Cumulative Layout Shift (CLS) kini juga tercantum, dan dapat diarahkan kursor untuk menandai elemen yang relevan:
Screenshot di atas menunjukkan 2 pergeseran, yang pertama terdiri dari dua elemen (saat gambar banner dimuat dan konten di bawahnya digeser untuk didownload), dan yang kedua terdiri dari 4 elemen (saat iklan dinamis dimuat dan sebagian besar halaman digeser ke bawah).
Elemen h2 diarahkan ke atas dalam screenshot ini pada konsol di sebelah kanan, dan Anda dapat melihat elemen ini menyoroti elemen di situs di sebelah kiri.
Informasi debug FID
Untuk Penundaan Input Pertama (FID), kami menampilkan elemen yang terpengaruh (yang lagi-lagi, dapat diarahkan kursor untuk menandainya di halaman) dan jenis interaksi, beserta objek JSON lengkap seperti biasa:
Informasi debug INP
Untuk Interaction to Next Paint (INP), kami telah menambahkan dua log baru:
- INP - interaksi terpanjang
- Interaksi - semua interaksi
Metrik INP
Pertama, kita akan menandai metrik INP saat berubah:
Serupa dengan LCP, ekstensi ini mengelompokkan waktu INP untuk menampilkan tiga fase:
- Penundaan input
- Durasi pemrosesan
- Penundaan presentasi
Hal ini membantu Anda mengidentifikasi apakah peristiwa lambat karena tertunda oleh peristiwa lain (input delay), karena pengendali peristiwa itu sendiri lambat karena kode Anda (processing duration), apakah penyebabnya adalah penundaan render pasca-pemrosesan (presentation delay), atau kombinasi dari dua atau beberapa hal tersebut.
Interaksi
INP dapat lambat karena interaksi sebelumnya memblokir thread utama, sehingga menyebabkan penundaan input yang tinggi. Oleh karena itu, kami mencantumkan semua interaksi dalam format yang mirip dengan logging INP:
Hal ini memungkinkan Anda untuk "melakukan pelacakan langsung" situs dengan berinteraksi dengannya dan melihat di konsol mana interaksi, dalam kombinasi mana, yang cenderung menyebabkan masalah INP.
Hal ini juga memungkinkan Anda mengidentifikasi beberapa interaksi lambat, bukan hanya interaksi INP terbesar untuk membantu Anda menghindari perasaan mengejar ekor saat meningkatkan responsivitas.
Memfilter log konsol
Meskipun berguna, semua informasi tambahan ini dapat mengganggu jika Anda melakukan pengembangan lain yang tidak terkait dengan Data Web Inti, atau hanya tertarik pada satu Data Web Inti tertentu pada saat itu.
Anda dapat menggunakan opsi pemfilteran Konsol di DevTools untuk memfilter sebagian atau semua pesan:
- Untuk menghapus semua pesan ekstensi, Anda dapat menonaktifkannya di opsi atau menggunakan filter
-Extension. - Untuk melihat LCP saja, Anda dapat menggunakan filter
Web Vitals Extension LCP. - Untuk melihat hanya INP dan interaksi, Anda dapat menggunakan filter
Web Vitals Extension -LCP -CLS -FID.
Kami mencoba mengurangi jumlah opsi untuk ekstensi ini, tetapi beri tahu kami dengan melaporkan masalah GitHub jika pemfilteran DevTools tidak memadai dan Anda lebih memilih opsi di sini.
Kesimpulan
Kami harap opsi debug baru di ekstensi versi terbaru ini bermanfaat bagi Anda dan opsi ini mempermudah identifikasi dan penyelesaian masalah Core Web Vitals, sehingga meningkatkan pengalaman pengguna di situs Anda.
Ingatlah bahwa pengalaman Anda, di komputer developer, mungkin tidak mewakili pengalaman pengguna yang sebenarnya. Baca postingan blog sebelumnya tentang cara melihat data kolom CrUX untuk situs Anda di ekstensi untuk mengetahui seberapa selaras pengalaman Anda dengan pengguna.
Kami akan berterima kasih jika Anda memberikan masukan tentang peningkatan ini, atau saran lainnya di pelacak masalah GitHub kami.