Apa Itu CrUX dan Hubungannya dengan Core Web Vitals?

Ketika membahas performa website, kita sering menemukan istilah CrUX dan Core Web Vitals. Keduanya sangat berkaitan karena CrUX menjadi salah satu sumber penting untuk memahami bagaimana website benar-benar dirasakan oleh pengguna di dunia nyata.

Banyak pemilik website hanya mengandalkan hasil pengujian seperti skor performa di komputer sendiri. Padahal, pengalaman pengguna dapat berbeda tergantung perangkat, jaringan internet, lokasi, kemampuan hardware, dan kondisi penggunaan sebenarnya.

Di sinilah Chrome UX Report atau CrUX menjadi penting. CrUX menyediakan data pengalaman pengguna nyata yang telah diagregasi sehingga developer dan pemilik website dapat melihat gambaran performa website berdasarkan pengalaman pengguna sebenarnya.

Artikel ini membahas secara lengkap apa itu CrUX, bagaimana cara kerjanya, hubungannya dengan Core Web Vitals, perbedaan field data dan lab data, serta bagaimana data tersebut dapat digunakan untuk meningkatkan performa website.

Apa Itu CrUX?

CrUX adalah singkatan dari Chrome User Experience Report, yaitu dataset publik dari Google yang berisi data pengalaman pengguna nyata terhadap website yang dikumpulkan dari browser Chrome.

Berbeda dengan pengujian performa yang dilakukan pada lingkungan laboratorium, CrUX menggambarkan pengalaman pengguna berdasarkan kondisi nyata. Artinya, data tersebut dapat mencerminkan berbagai kombinasi perangkat, koneksi jaringan, dan kondisi penggunaan.

Google menjelaskan bahwa metrik dalam CrUX berasal dari API platform web yang tersedia pada browser. Data tersebut kemudian diproses dan diagregasi sebelum tersedia melalui berbagai layanan CrUX.

CrUX dapat digunakan untuk menganalisis performa pada tingkat origin maupun halaman tertentu melalui CrUX API, tergantung jenis data dan layanan yang digunakan.

Mengapa CrUX Penting untuk Website?

Salah satu masalah dalam pengujian performa website adalah hasil pengujian belum tentu sama dengan pengalaman pengguna sebenarnya.

Sebagai contoh, sebuah website mungkin terlihat sangat cepat ketika diuji menggunakan komputer developer dengan koneksi internet cepat. Namun pengguna yang mengakses website melalui perangkat dengan kemampuan lebih rendah dan jaringan yang lebih lambat dapat mengalami pengalaman yang berbeda.

Dengan data pengguna nyata, pemilik website dapat memperoleh perspektif yang lebih realistis mengenai performa.

CrUX membantu menjawab pertanyaan seperti:

• Apakah website cepat ketika digunakan oleh pengguna sebenarnya?
• Apakah konten utama tampil dengan cepat?
• Apakah halaman responsif ketika pengguna berinteraksi?
• Apakah layout website stabil?
• Apakah sebagian besar pengguna mendapatkan pengalaman yang baik?

CrUX dan Core Web Vitals: Apa Hubungannya?

Hubungan CrUX dan Core Web Vitals sangat erat.

Core Web Vitals merupakan sekumpulan metrik yang digunakan untuk mengukur aspek penting pengalaman pengguna, sedangkan CrUX merupakan salah satu sumber field data yang dapat digunakan untuk melihat bagaimana metrik tersebut dialami pengguna nyata.

Saat ini tiga metrik utama Core Web Vitals adalah:

• LCP (Largest Contentful Paint) mengukur performa pemuatan konten utama.
• INP (Interaction to Next Paint) mengukur responsivitas halaman terhadap interaksi pengguna.
• CLS (Cumulative Layout Shift) mengukur stabilitas visual halaman.

Google mencatat metrik LCP, INP, dan CLS dalam dataset CrUX. Data tersebut dapat digunakan untuk melihat distribusi pengalaman pengguna, termasuk persentil seperti p75.

Apa Itu LCP?

LCP atau Largest Contentful Paint digunakan untuk mengukur kapan elemen konten terbesar yang terlihat di viewport selesai ditampilkan.

Dalam praktiknya, elemen tersebut dapat berupa gambar utama, heading besar, video poster, atau blok teks utama.

Semakin cepat konten utama muncul, semakin cepat pengguna dapat memahami isi halaman.

Beberapa penyebab LCP buruk antara lain:

• Server membutuhkan waktu lama memberikan respons.
• Gambar hero terlalu besar.
• Resource penting terlambat dimuat.
• CSS atau JavaScript menghambat rendering.
• Font menyebabkan proses rendering tertunda.
• Struktur halaman terlalu kompleks.

Apa Itu INP?

INP atau Interaction to Next Paint mengukur responsivitas halaman terhadap interaksi pengguna sepanjang siklus hidup halaman.

Contoh interaksi yang dapat memengaruhi pengalaman tersebut antara lain klik tombol, input pada form, membuka menu, memilih filter, atau melakukan tindakan lain yang menyebabkan halaman harus merespons.

INP menggantikan FID sebagai metrik Core Web Vitals pada tahun 2024.

Masalah INP biasanya berkaitan dengan JavaScript yang terlalu berat, pekerjaan panjang di main thread, event handler yang tidak efisien, atau proses rendering yang membutuhkan waktu lama.

Apa Itu CLS?

CLS atau Cumulative Layout Shift digunakan untuk mengukur stabilitas visual halaman.

CLS menjadi buruk ketika elemen halaman berpindah posisi secara tidak terduga ketika halaman sedang digunakan.

Contohnya adalah ketika pengguna hendak menekan tombol tetapi tiba-tiba tombol tersebut bergeser karena gambar, iklan, font, atau elemen lain baru selesai dimuat.

Beberapa penyebab CLS antara lain:

• Gambar tidak memiliki dimensi yang jelas.
• Konten dinamis disisipkan tanpa menyediakan ruang.
• Font menyebabkan perubahan layout.
• Elemen iklan tidak memiliki ruang yang ditentukan.
• Animasi mengubah layout secara tidak tepat.

Bagaimana Data CrUX Dikumpulkan?

CrUX berasal dari data pengalaman pengguna nyata yang dikumpulkan melalui browser Chrome pada kondisi yang memenuhi persyaratan dataset.

Data kemudian diproses, difilter, dan diagregasi sebelum ditampilkan melalui layanan CrUX.

Karena merupakan data agregat, CrUX bukanlah rekaman aktivitas individu. Data tersebut digunakan untuk memberikan gambaran statistik mengenai pengalaman pengguna.

CrUX Menggunakan Data 28 Hari

Salah satu karakteristik penting CrUX adalah penggunaan rolling 28-day average untuk data yang disajikan melalui CrUX API.

Artinya, angka yang terlihat pada suatu waktu bukan hanya mencerminkan performa pada hari tersebut. Data tersebut merupakan agregasi pengalaman pengguna selama periode 28 hari terakhir.

Hal ini penting ketika melakukan optimasi website.

Jika developer baru saja memperbaiki performa website hari ini, perubahan tersebut tidak selalu langsung terlihat sebagai perubahan besar pada data CrUX. Diperlukan waktu hingga data pengguna yang lebih baru menggantikan data sebelumnya.

Apakah CrUX Sama dengan PageSpeed Insights?

Tidak. CrUX dan PageSpeed Insights memiliki fungsi yang berbeda meskipun keduanya sangat berkaitan.

CrUX merupakan dataset pengalaman pengguna nyata, sedangkan PageSpeed Insights adalah alat analisis performa yang dapat menampilkan data lapangan apabila tersedia sekaligus menjalankan pengujian laboratorium menggunakan Lighthouse.

Dengan demikian, PageSpeed Insights dapat memberikan dua perspektif yang sangat berguna:

• Field data: bagaimana pengguna nyata mengalami website.
• Lab data: bagaimana halaman bekerja dalam kondisi pengujian tertentu.

Inilah alasan hasil Lighthouse dan data CrUX tidak harus identik.

Field Data vs Lab Data

Keduanya sebaiknya digunakan bersama.

Field data membantu menjawab “apa yang dialami pengguna?”, sedangkan lab data membantu menjawab “masalah teknis apa yang dapat diperbaiki?”

Bagaimana Mengetahui Website Memiliki Data CrUX?

Tidak semua website otomatis memiliki data CrUX yang dapat ditampilkan pada setiap tingkat detail.

CrUX memiliki persyaratan eligibility dan data minimum tertentu agar pengalaman pengguna dapat dimasukkan dalam dataset yang tersedia.

Karena itu, tidak adanya data CrUX tidak otomatis berarti website buruk.

Website baru, website dengan jumlah pengguna Chrome yang belum mencukupi, atau halaman tertentu dapat saja tidak memiliki data yang tersedia pada tingkat yang diharapkan.

CrUX pada PageSpeed Insights

Salah satu cara paling mudah bagi pemilik website untuk melihat informasi performa berbasis field data adalah menggunakan PageSpeed Insights.

Ketika data tersedia, PageSpeed Insights dapat menampilkan informasi pengalaman pengguna nyata bersama hasil analisis Lighthouse.

Ini membuat PageSpeed Insights sangat berguna sebagai titik awal audit performa.

Misalnya:

1. Periksa apakah data field tersedia.
2. Lihat status Core Web Vitals.
3. Identifikasi metrik yang bermasalah.
4. Jalankan analisis Lighthouse.
5. Periksa detail teknis menggunakan Chrome DevTools.
6. Lakukan optimasi.
7. Uji ulang.
8. Monitor perubahan field data setelah data baru terkumpul.

CrUX dan Google Search Console

CrUX juga memiliki hubungan dengan laporan Core Web Vitals pada Google Search Console.

Search Console dapat membantu pemilik website melihat URL atau kelompok URL yang memiliki masalah Core Web Vitals berdasarkan data lapangan.

Hal ini berbeda dengan sekadar menjalankan tes terhadap satu halaman.

Search Console lebih berguna untuk memahami kondisi website secara lebih luas, sedangkan PageSpeed Insights dan Chrome DevTools dapat digunakan untuk investigasi teknis yang lebih spesifik.

Mengapa Skor CrUX Bisa Berbeda dengan Hasil Lighthouse?

Perbedaan tersebut normal karena keduanya mengukur kondisi yang berbeda.

Lighthouse menjalankan pengujian dalam lingkungan tertentu. Sementara itu, CrUX menggambarkan data agregat dari pengguna nyata.

Misalnya sebuah halaman mendapatkan hasil Lighthouse yang sangat baik pada komputer developer, tetapi pengguna sebenarnya dapat mengalami LCP yang lebih lambat.

Penyebabnya bisa berupa:

• Perbedaan kemampuan perangkat.
• Perbedaan kecepatan jaringan.
• Lokasi pengguna.
• Cache browser.
• Jenis perangkat.
• Perbedaan pola penggunaan.
• Perbedaan kondisi server.

Karena itu, jangan hanya mengejar skor Lighthouse. Perhatikan pula pengalaman pengguna nyata.

Apakah CrUX Sama dengan RUM?

CrUX dan Real User Monitoring atau RUM sama-sama berkaitan dengan data pengguna nyata, tetapi bukan berarti keduanya identik.

CrUX menyediakan dataset pengalaman pengguna yang telah diagregasi, sedangkan RUM yang diterapkan sendiri oleh pemilik website dapat memberikan data yang lebih spesifik sesuai kebutuhan sistem.

RUM internal dapat digunakan untuk mendapatkan informasi yang lebih detail mengenai aplikasi, pengguna, route, perangkat, atau kondisi tertentu sesuai implementasi pengukuran.

Untuk website dengan kebutuhan monitoring performa yang lebih kompleks, kombinasi CrUX dan RUM dapat memberikan perspektif yang lebih lengkap.

Bagaimana CrUX Membantu Optimasi Core Web Vitals?

CrUX dapat digunakan sebagai indikator apakah perbaikan performa benar-benar memberikan dampak terhadap pengalaman pengguna.

Misalnya sebuah website mengalami masalah LCP.

Developer kemudian melakukan beberapa optimasi:

• Mengompresi gambar hero.
• Menggunakan format gambar yang lebih efisien.
• Mengurangi resource yang menghambat rendering.
• Memperbaiki response time server.
• Mengoptimalkan CSS.
• Meningkatkan caching.

Hasil optimasi dapat diperiksa terlebih dahulu menggunakan lab tools untuk memastikan masalah teknis telah diperbaiki.

Setelah perubahan digunakan oleh pengguna nyata, data field dapat digunakan untuk melihat apakah pengalaman pengguna juga mengalami perbaikan.

Core Web Vitals Tidak Hanya Tentang Kecepatan

Salah satu kesalahan umum adalah menganggap Core Web Vitals hanya mengukur seberapa cepat website dibuka.

Padahal ketiga metrik utamanya mencakup aspek yang berbeda:

• LCP: loading performance.
• INP: responsiveness.
• CLS: visual stability.

Sebuah website dapat memiliki loading yang cukup cepat tetapi tetap memberikan pengalaman buruk jika tombol sulit merespons atau layout sering berpindah.

Oleh karena itu, optimasi Core Web Vitals harus melihat pengalaman pengguna secara menyeluruh.

Apa Arti Nilai p75 pada CrUX?

CrUX banyak menggunakan distribusi metrik dan persentil untuk menggambarkan pengalaman pengguna.

Salah satu nilai yang penting adalah p75 atau persentil ke-75.

Secara sederhana, nilai p75 membantu menggambarkan bahwa sekitar 75% pengalaman berada pada atau di bawah nilai tersebut, tergantung cara metrik tersebut dinyatakan.

Karena Core Web Vitals menggunakan threshold tertentu, evaluasi biasanya tidak hanya melihat satu angka rata-rata.

Distribusi pengalaman pengguna justru lebih berguna untuk mengetahui apakah mayoritas pengguna mendapatkan pengalaman yang baik.

Apakah CrUX Berpengaruh terhadap SEO?

CrUX dan Core Web Vitals berkaitan dengan pengalaman halaman yang merupakan bagian dari sistem evaluasi pengalaman halaman Google.

Namun, penting untuk memahami bahwa performa website bukan satu-satunya faktor yang menentukan ranking.

Website tidak otomatis mendapatkan ranking tinggi hanya karena Core Web Vitals bagus.

Konten yang relevan, kualitas informasi, search intent, struktur website, technical SEO, otoritas, internal linking, dan berbagai faktor lainnya tetap memiliki peran.

Karena itu, optimasi Core Web Vitals sebaiknya dipandang sebagai bagian dari strategi kualitas website secara keseluruhan.

Hubungan CrUX, Core Web Vitals, Lighthouse, dan PageSpeed Insights

Workflow Audit Website Menggunakan CrUX

Jika ingin menggunakan CrUX secara efektif, jangan hanya melihat angka tanpa melakukan diagnosis.

1. Periksa Data Field

Lihat apakah website memiliki data pengalaman pengguna yang tersedia.

2. Periksa Core Web Vitals

Identifikasi apakah masalah utama berada pada LCP, INP, atau CLS.

3. Tentukan Prioritas

Jangan memperbaiki semua hal secara acak. Fokus terlebih dahulu pada masalah yang memiliki dampak terbesar.

4. Gunakan Lighthouse

Jalankan audit laboratorium untuk menemukan kemungkinan penyebab teknis.

5. Gunakan Chrome DevTools

Jika masalah membutuhkan investigasi lebih dalam, gunakan panel Performance, Network, Elements, Console, dan fitur debugging lainnya.

6. Lakukan Perbaikan

Optimalkan resource, server, JavaScript, CSS, gambar, font, caching, dan struktur halaman sesuai akar masalah.

7. Uji Kembali

Pastikan perubahan benar-benar memberikan perbaikan dalam pengujian laboratorium.

8. Monitor Field Data

Setelah perubahan berjalan dan digunakan oleh pengguna, pantau data lapangan untuk melihat dampak aktualnya.

Contoh Kasus Optimasi

Misalnya sebuah website memiliki masalah LCP pada perangkat mobile.

Hasil audit menunjukkan bahwa elemen LCP adalah gambar hero berukuran sangat besar.

Developer kemudian melakukan:

• Resize gambar sesuai kebutuhan tampilan.
• Menggunakan format gambar modern.
• Mengoptimalkan ukuran file.
• Memprioritaskan resource penting.
• Mengurangi resource yang tidak diperlukan.

Setelah optimasi, Lighthouse menunjukkan perbaikan.

Namun pekerjaan belum selesai.

Data CrUX kemudian dapat digunakan untuk melihat apakah pengalaman pengguna nyata juga bergerak ke arah yang lebih baik setelah perubahan tersebut mendapatkan cukup data baru.

Inilah perbedaan antara mengoptimalkan berdasarkan simulasi dan mengoptimalkan berdasarkan pengalaman pengguna nyata.

Bagaimana dengan Website WordPress?

CrUX juga relevan untuk website WordPress karena performa WordPress dapat dipengaruhi oleh tema, plugin, gambar, script pihak ketiga, hosting, database, dan konfigurasi caching.

Beberapa area yang dapat diperiksa antara lain:

• Ukuran gambar.
• Plugin yang tidak diperlukan.
• JavaScript pihak ketiga.
• CSS yang terlalu besar.
• Font eksternal.
• Response time server.
• Cache halaman.
• Lazy loading.
• Layout yang berubah ketika resource dimuat.

Namun, jangan menghapus plugin atau fitur hanya demi mendapatkan skor tertentu. Optimasi harus mempertimbangkan fungsi website dan pengalaman pengguna secara keseluruhan.

Perkembangan CrUX di Era Web Modern

CrUX terus berkembang mengikuti perubahan teknologi web.

Pada 2026, Chrome juga mulai menyediakan versi eksperimental metrik Core Web Vitals yang memperhitungkan soft navigation, terutama relevan untuk aplikasi Single Page Application atau SPA.

Hal ini penting karena aplikasi web modern tidak selalu melakukan full page reload ketika pengguna berpindah halaman. Perpindahan route dapat terjadi secara dinamis di dalam aplikasi.

Perkembangan ini menunjukkan bahwa pengukuran performa web semakin diarahkan untuk mencerminkan cara aplikasi modern benar-benar digunakan.

Apakah Pemilik Website Harus Memantau CrUX?

Jika website memiliki traffic yang cukup dan performa menjadi bagian penting dari pengalaman pengguna, CrUX sangat berguna untuk dipantau.

Terutama untuk:

• Website bisnis.
• E-commerce.
• Portal berita.
• Website perusahaan.
• Website layanan publik.
• Aplikasi web.
• Landing page dengan traffic tinggi.
• Website yang mengandalkan traffic organik.

Untuk website kecil atau baru, data CrUX mungkin belum tersedia secara lengkap. Dalam kondisi tersebut, lab testing, monitoring performa, dan RUM dapat menjadi pelengkap.

Checklist Optimasi CrUX dan Core Web Vitals

• Periksa LCP.
• Periksa INP.
• Periksa CLS.
• Gunakan data field ketika tersedia.
• Gunakan Lighthouse untuk diagnosis laboratorium.
• Gunakan Chrome DevTools untuk debugging teknis.
• Optimalkan gambar.
• Optimalkan CSS.
• Optimalkan JavaScript.
• Kurangi script pihak ketiga yang tidak diperlukan.
• Perbaiki response time server.
• Gunakan caching secara tepat.
• Sediakan ukuran gambar untuk mencegah layout shift.
• Perhatikan performa mobile.
• Monitor perubahan setelah optimasi.

Kesimpulan

CrUX atau Chrome User Experience Report adalah dataset pengalaman pengguna nyata yang sangat berguna untuk memahami performa website di dunia nyata.

Hubungannya dengan Core Web Vitals sangat erat karena CrUX menyediakan data lapangan untuk metrik seperti LCP, INP, dan CLS.

CrUX tidak menggantikan Lighthouse, PageSpeed Insights, Chrome DevTools, atau Search Console. Masing-masing memiliki fungsi yang berbeda dan justru dapat digunakan secara bersama-sama.

Pendekatan terbaik adalah menggunakan data field untuk mengetahui apa yang benar-benar dialami pengguna, kemudian menggunakan tools audit dan debugging untuk menemukan mengapa masalah tersebut terjadi.

Dengan pendekatan tersebut, optimasi website tidak hanya berorientasi pada skor, tetapi benar-benar berorientasi pada pengalaman pengguna, performa teknis, dan kualitas website secara keseluruhan.