Mengumpulkan data tentang Data Web situs Anda adalah langkah pertama untuk meningkatkannya. Analisis yang menyeluruh akan mengumpulkan data performa dari lingkungan dunia nyata dan lab. Pengukuran Web Vitals memerlukan perubahan kode minimal dan dapat dilakukan menggunakan alat gratis.
Mengukur Data Web menggunakan data RUM
Data Pemantauan Pengguna Nyata (RUM), yang juga dikenal sebagai data kolom, merekam performa yang dialami oleh pengguna sebenarnya di situs. Data RUM adalah data yang digunakan Google untuk menentukan apakah situs memenuhi nilai minimum Data Web Inti yang direkomendasikan.
Memulai
Jika Anda tidak memiliki penyiapan RUM, alat berikut akan dengan cepat memberikan data tentang performa situs Anda di dunia nyata. Semua alat ini didasarkan pada set data pokok yang sama (Laporan Pengalaman Pengguna Chrome), tetapi memiliki kasus penggunaan yang sedikit berbeda:
- Chrome DevTools terintegrasi dengan set data CrUX di tampilan metrik live pada panel Performance. Dengan membandingkan pengalaman lokal Anda dengan pengalaman pengguna nyata di halaman yang sama, Anda dapat membuat keputusan yang lebih tepat tentang di mana harus memfokuskan upaya proses debug Anda. Jika Anda mencari satu tindakan yang harus dilakukan untuk mulai mengukur dan meningkatkan Data Web situs, sebaiknya gunakan panel Performa Chrome DevTools.
- PageSpeed Insights (PSI) melaporkan performa gabungan tingkat halaman dan tingkat origin selama 28 hari terakhir. Selain itu, alat ini memberikan saran tentang cara meningkatkan performa. PSI tersedia di web dan sebagai API.
- Search Console melaporkan data performa per halaman. Hal ini membuatnya sangat cocok untuk mengidentifikasi halaman tertentu yang perlu ditingkatkan. Tidak seperti PageSpeed Insights, pelaporan Search Console menyertakan data performa historis. Search Console hanya dapat digunakan dengan situs milik Anda yang telah diverifikasi kepemilikannya.
- Dasbor CrUX adalah dasbor bawaan yang menampilkan data CrUX untuk origin yang Anda pilih. Aplikasi ini dibuat di atas Data Studio dan proses penyiapannya memerlukan waktu sekitar satu menit. Dibandingkan dengan PageSpeed Insights dan Search Console, pelaporan dasbor CrUX menyertakan lebih banyak dimensi—misalnya, data dapat dikelompokkan menurut perangkat dan jenis koneksi.
Perlu diperhatikan bahwa meskipun alat yang tercantum sebelumnya sangat cocok untuk "memulai" pengukuran Data Web, alat tersebut juga dapat berguna dalam konteks lain. Secara khusus, CrUX dan PSI tersedia sebagai API dan dapat digunakan untuk membuat dasbor dan pelaporan lainnya.
Mengumpulkan data RUM
Meskipun alat berbasis CrUX merupakan titik awal yang baik untuk menyelidiki performa Data Web, sebaiknya Anda melengkapinya dengan RUM Anda sendiri. Data RUM yang Anda kumpulkan sendiri dapat memberikan masukan yang lebih mendetail dan cepat tentang performa situs Anda. Hal ini mempermudah identifikasi masalah dan pengujian kemungkinan solusi.
Anda dapat mengumpulkan data RUM sendiri menggunakan penyedia RUM khusus, atau, dengan menyiapkan alat sendiri.
Penyedia RUM khusus berspesialisasi dalam mengumpulkan dan melaporkan data RUM. Untuk menggunakan Core Web Vitals dengan layanan ini, tanyakan kepada penyedia RUM tentang mengaktifkan pemantauan Core Web Vitals untuk situs Anda.
Jika tidak memiliki penyedia RUM, Anda mungkin dapat meningkatkan konfigurasi analisis yang ada untuk mengumpulkan dan melaporkan metrik ini dengan menggunakan library JavaScript web-vitals. Selanjutnya, metode ini akan dijelaskan secara lebih mendetail.
Library JavaScript web-vitals
Jika Anda menerapkan penyiapan RUM Anda sendiri untuk Data Web Inti, cara termudah untuk mengumpulkan pengukuran Data Web Inti adalah dengan menggunakan library JavaScript web-vitals. web-vitals adalah library modular kecil (~2 KB) yang menyediakan API yang mudah digunakan untuk mengumpulkan dan melaporkan setiap metrik Data Web yang dapat diukur di lapangan.
Tidak semua metrik yang membentuk Data Web diekspos secara langsung oleh API performa bawaan browser, tetapi dibuat di atasnya. Misalnya, Pergeseran Tata Letak Kumulatif (CLS) diterapkan menggunakan Layout Instability API. Dengan menggunakan web-vitals, Anda tidak perlu khawatir untuk menerapkan metrik ini sendiri; metrik ini juga memastikan bahwa data yang Anda kumpulkan cocok dengan metodologi dan praktik terbaik untuk setiap metrik.
Untuk mengetahui informasi selengkapnya tentang cara menerapkan web-vitals, lihat dokumentasi dan panduan Praktik terbaik untuk mengukur Data Web di lapangan.
Agregasi data
Anda harus melaporkan pengukuran yang dikumpulkan oleh web-vitals. Jika data ini diukur tetapi tidak dilaporkan, Anda tidak akan pernah melihatnya. Dokumentasi web-vitals menyertakan contoh yang menunjukkan cara mengirim data ke endpoint API generik, Google Analytics, atau Google Tag Manager.
Jika Anda sudah memiliki alat pelaporan favorit, pertimbangkan untuk menggunakannya. Jika tidak, Google Analytics gratis dan dapat digunakan untuk tujuan ini.
Saat mempertimbangkan alat yang akan digunakan, sebaiknya pikirkan siapa yang perlu memiliki akses ke data. Bisnis biasanya mencapai keunggulan performa terbesar saat seluruh perusahaan, bukan satu departemen, berminat untuk meningkatkan performa. Lihat Memperbaiki kecepatan situs secara lintas fungsi untuk mempelajari cara mendapatkan dukungan dari berbagai departemen.
Interpretasi data
Saat menganalisis data performa, penting untuk memperhatikan ekor distribusi. Data RUM sering kali mengungkapkan bahwa performa sangat bervariasi—beberapa pengguna memiliki pengalaman yang cepat, sementara pengguna lainnya memiliki pengalaman yang lambat. Namun, penggunaan median untuk meringkas data dapat menyamarkan perilaku ini.
Sehubungan dengan Web Vitals, Google menggunakan persentase pengalaman "baik", bukan statistik seperti median atau rata-rata, untuk menentukan apakah situs atau halaman memenuhi nilai minimum yang direkomendasikan. Khususnya, agar situs atau halaman dianggap memenuhi nilai minimum Core Web Vitals, 75% kunjungan halaman harus memenuhi nilai minimum "baik" untuk setiap metrik.
Mengukur Data Web menggunakan data lab
Data lab, yang juga dikenal sebagai data sintetis, dikumpulkan dari lingkungan terkontrol, bukan dari pengguna sebenarnya. Tidak seperti data RUM, data lab dapat dikumpulkan dari lingkungan praproduksi sehingga dapat digabungkan ke dalam alur kerja developer dan proses continuous integration. Contoh alat yang mengumpulkan data sintetis adalah Lighthouse dan WebPageTest.
Pertimbangan
Selalu akan ada perbedaan antara data RUM dan data lab—terutama jika kondisi jaringan, jenis perangkat, atau lokasi lingkungan lab berbeda secara signifikan dengan kondisi pengguna. Namun, saat mengumpulkan data lab tentang metrik Data Web secara khusus, ada beberapa pertimbangan khusus yang penting untuk diperhatikan:
- Largest Contentful Paint (LCP) yang diukur di lingkungan lab dapat berbeda dengan yang diukur di kolom dengan data RUM karena adanya keterlambatan pemuatan halaman (melalui pengalihan, latensi yang terhubung ke server, atau data yang tidak disimpan dalam cache), konten yang berbeda ditampilkan kepada pengguna yang berbeda bergantung pada layar, atau karena alasan lain (termasuk banner cookie, personalisasi).
- Pergeseran Tata Letak Kumulatif (CLS) yang diukur di lingkungan lab dapat lebih rendah daripada CLS yang diamati di data RUM. Banyak alat lab hanya memuat halaman, dan tidak berinteraksi dengan halaman tersebut. Akibatnya, alat ini hanya merekam pergeseran tata letak yang terjadi selama pemuatan halaman awal. Sebaliknya, CLS yang diukur oleh alat RUM menangkap pergeseran tata letak yang tidak terduga yang terjadi selama masa aktif halaman.
- Interaction to Next Paint (INP) tidak dapat diukur di lingkungan lab karena memerlukan interaksi pengguna dengan halaman. Oleh karena itu, Total Blocking Time (TBT) adalah proxy lab yang direkomendasikan untuk INP. TBT mengukur "jumlah total waktu antara First Contentful Paint dan Waktu untuk Interaktif selama halaman diblokir agar tidak merespons input pengguna". Meskipun INP dan TBT dihitung secara berbeda, keduanya merupakan refleksi dari thread utama yang diblokir selama proses bootstrap. Saat thread utama diblokir, browser akan tertunda dalam merespons interaksi pengguna.
Alat
Alat ini dapat digunakan untuk mengumpulkan pengukuran lab Data Web:
- Chrome DevTools mengukur dan melaporkan Data Web Inti untuk halaman tertentu dalam tampilan metrik langsung di panel Performa. Tampilan ini memberi developer masukan performa real-time saat mereka membuat perubahan kode.
- Lighthouse Laporan Lighthouse tentang LCP, CLS, dan TBT, serta menyoroti kemungkinan peningkatan performa. Lighthouse tersedia di Chrome DevTools, sebagai paket npm, dan juga dapat digabungkan ke dalam alur kerja integrasi berkelanjutan menggunakan Lighthouse CI.
- WebPageTest menyertakan Web Vitals sebagai bagian dari pelaporan standarnya. WebPageTest berguna untuk mengumpulkan informasi tentang Data Web berdasarkan kondisi jaringan dan perangkat tertentu.