Mengumpulkan data tentang Metrik Web situs Anda adalah langkah pertama untuk meningkatkannya. Analisis yang menyeluruh akan mengumpulkan data performa dari lingkungan dunia nyata dan lab. Pengukuran Metrik Web memerlukan perubahan kode minimal dan dapat dilakukan menggunakan alat gratis.
Mengukur Data Web menggunakan data RUM
Data Real User Monitoring (RUM), yang juga dikenal sebagai data lapangan, merekam performa yang dialami oleh pengguna sebenarnya di situs. Data RUM adalah data yang digunakan Google untuk menentukan apakah sebuah situs memenuhi nilai minimum Data Web Inti yang direkomendasikan.
Memulai
Jika Anda tidak memiliki penyiapan RUM, alat berikut akan dengan cepat memberi Anda 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 dalam tampilan metrik aktif di panel Performa. Dengan membandingkan pengalaman lokal Anda dengan pengalaman pengguna sebenarnya di halaman yang sama, Anda dapat membuat keputusan yang lebih tepat tentang tempat untuk memfokuskan upaya penelusuran bug. Jika Anda mencari satu tindakan yang perlu dilakukan untuk mulai mengukur dan meningkatkan kualitas Data Web situs Anda, sebaiknya gunakan panel Performa Chrome DevTools.
- PageSpeed Insights (PSI) melaporkan performa tingkat halaman dan tingkat asal yang digabungkan 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 berdasarkan per halaman. Hal ini menjadikannya sangat cocok untuk mengidentifikasi halaman tertentu yang perlu ditingkatkan. Tidak seperti PageSpeed Insights, pelaporan Search Console mencakup data performa historis. Search Console hanya dapat digunakan dengan situs yang Anda miliki dan telah Anda verifikasi kepemilikannya.
- CrUX Vis adalah dasbor bawaan yang menampilkan data histori CrUX untuk URL atau asal pilihan Anda (jika tersedia dalam set data CrUX). Laporan ini dibuat berdasarkan CrUX History API dan proses penyiapannya memerlukan waktu sekitar satu menit. Dibandingkan dengan PageSpeed Insights dan Search Console, CrUX Vis menyertakan lebih banyak contoh data, subbagian LCP, jenis navigasi, dan sebagainya.
- CrUX Vis adalah dasbor historis yang menampilkan data CrUX untuk asal atau URL pilihan Anda. API ini dibangun di atas CrUX History API. Dibandingkan dengan PageSpeed Insights dan Search Console, pelaporan CrUX Vis mencakup lebih banyak detail—misalnya, jenis navigasi dan data LCP dan RTT tersedia di CrUX Vis.
Perlu diperhatikan bahwa meskipun alat yang tercantum sebelumnya sangat cocok untuk "memulai" pengukuran Metrik 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 adalah titik awal yang baik untuk menyelidiki performa Web Vitals, sebaiknya Anda melengkapinya dengan RUM Anda sendiri. Data RUM yang Anda kumpulkan sendiri dapat memberikan masukan yang lebih mendetail dan langsung tentang performa situs Anda. Hal ini mempermudah identifikasi masalah dan pengujian kemungkinan solusi.
Anda dapat mengumpulkan data RUM sendiri dengan menggunakan penyedia RUM khusus, atau dengan menyiapkan alat Anda sendiri.
Penyedia RUM khusus berspesialisasi dalam mengumpulkan dan melaporkan data RUM. Untuk menggunakan Core Web Vitals dengan layanan ini, tanyakan kepada penyedia RUM Anda tentang cara mengaktifkan pemantauan Core Web Vitals untuk situs Anda.
Jika tidak memiliki penyedia RUM, Anda dapat melengkapi penyiapan analisis yang ada untuk mengumpulkan dan melaporkan metrik ini menggunakan library JavaScript web-vitals. Metode ini dijelaskan lebih mendetail di bagian berikutnya.
Library JavaScript web-vitals
Jika Anda menerapkan penyiapan RUM 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 praktis untuk mengumpulkan dan melaporkan setiap metrik Vitals Web yang dapat diukur di lapangan.
Metrik yang membentuk Data Web Inti tidak semuanya diekspos secara langsung oleh API performa bawaan browser, tetapi dibangun di atasnya. Misalnya, Pergeseran Tata Letak Kumulatif (CLS) diimplementasikan menggunakan Layout Instability API. Dengan menggunakan web-vitals, Anda tidak perlu khawatir tentang penerapan metrik ini sendiri; hal ini juga memastikan bahwa data yang Anda kumpulkan sesuai 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 Web Vitals 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 mencakup contoh yang menunjukkan cara mengirim data ke endpoint API umum, 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 peningkatan performa terbesar saat seluruh perusahaan, bukan hanya satu departemen, tertarik 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 ujung distribusi. Data RUM sering kali mengungkapkan bahwa performa sangat bervariasi—beberapa pengguna mendapatkan pengalaman yang cepat, sementara yang lain mendapatkan pengalaman yang lambat. Namun, penggunaan median untuk meringkas data dapat menyembunyikan perilaku ini.
Terkait Metrik Web, Google menggunakan persentase pengalaman "baik", bukan statistik seperti median atau rata-rata, untuk menentukan apakah situs atau halaman memenuhi nilai minimum yang direkomendasikan. Secara khusus, agar situs atau halaman dianggap memenuhi nilai minimum Data Web Inti, 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 yang terkontrol, bukan dari pengguna sebenarnya. Tidak seperti data RUM, data lab dapat dikumpulkan dari lingkungan praproduksi sehingga dapat dimasukkan ke dalam alur kerja developer dan proses continuous integration. Contoh alat yang mengumpulkan data sintetis adalah Lighthouse dan WebPageTest.
Pertimbangan
Akan selalu ada perbedaan antara data RUM dan data lab—terutama jika kondisi jaringan, jenis perangkat, atau lokasi lingkungan lab berbeda secara signifikan dengan pengguna. Namun, saat mengumpulkan data lab pada metrik Web Vitals khususnya, ada beberapa pertimbangan khusus yang penting untuk diperhatikan:
- Largest Contentful Paint (LCP) yang diukur di lingkungan lab dapat berbeda dengan yang diukur di lapangan dengan data RUM karena penundaan dalam memuat halaman (melalui pengalihan, latensi yang terhubung ke server, atau data yang tidak di-cache), konten yang berbeda yang ditampilkan kepada pengguna yang berbeda bergantung pada layar, atau karena alasan lain (termasuk, banner cookie, personalisasi).
- Cumulative Layout Shift (CLS) yang diukur di lingkungan lab dapat secara artifisial lebih rendah daripada CLS yang diamati dalam data RUM. Banyak alat lab hanya memuat halaman—tidak berinteraksi dengannya. Akibatnya, metrik ini hanya mencatat pergeseran tata letak yang terjadi selama pemuatan halaman awal. Sebaliknya, CLS yang diukur oleh alat RUM mencatat 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 Waktu Pemblokiran (TBT) adalah proksi lab yang direkomendasikan untuk INP. TBT mengukur "total waktu antara First Contentful Paint dan Time to Interactive saat halaman diblokir untuk merespons input pengguna". Meskipun INP dan TBT dihitung secara berbeda, keduanya mencerminkan pemblokiran thread utama selama proses bootstrap. Saat thread utama diblokir, browser tertunda dalam merespons interaksi pengguna.
Alat
Alat ini dapat digunakan untuk mengumpulkan pengukuran lab tentang Metrik Web:
- Chrome DevTools mengukur dan melaporkan Data Web Inti untuk halaman tertentu dalam tampilan metrik langsung di panel Performa. Tampilan ini memberikan masukan performa real-time kepada developer saat mereka membuat perubahan kode.
- Lighthouse Lighthouse melaporkan LCP, CLS, dan TBT, serta menyoroti kemungkinan peningkatan performa. Lighthouse tersedia di Chrome DevTools, sebagai paket npm, dan juga dapat dimasukkan ke dalam alur kerja continuous integration menggunakan Lighthouse CI.
- WebPageTest menyertakan Web Vitals sebagai bagian dari pelaporan standarnya. WebPageTest berguna untuk mengumpulkan informasi tentang Metrik Web dalam kondisi jaringan dan perangkat tertentu.