Core Web Vitals untuk toko online: penjelasan LCP, INP, dan CLS

Apa yang diukur LCP, INP, dan CLS, ambang baik dan buruk di persentil ke-75, data lab vs lapangan, serta perbaikan umum di toko Shopify dan WooCommerce.

Tim Redaksi FixReports12 menit baca

Core Web Vitals adalah tiga metrik Google yang menggambarkan pengalaman pengunjung sungguhan di sebuah halaman: Largest Contentful Paint (LCP) untuk kecepatan memuat, Interaction to Next Paint (INP) untuk responsivitas, dan Cumulative Layout Shift (CLS) untuk stabilitas visual. Sebuah halaman lulus jika setidaknya 75% kunjungan berada di rentang "baik": LCP dalam 2,5 detik, INP dalam 200 milidetik, dan CLS 0,1 atau kurang, yang diukur terpisah untuk seluler dan desktop. Di toko online, skor yang gagal biasanya berasal dari gambar hero dan gambar produk yang terlalu besar atau dimuat secara lazy load, skrip aplikasi dan pelacakan, font web, serta banner atau widget ulasan yang mendorong konten ke bawah setelah halaman tampil.

Poin penting

Berapa ambang batas Core Web Vitals?

Sebuah halaman memenuhi Core Web Vitals jika persentil ke-75 dari pemuatan halamannya berada di rentang baik untuk ketiga metrik.

MetrikYang diukurBaikPerlu perbaikanBuruk
LCPWaktu hingga gambar, video, atau blok teks terbesar di viewport selesai dirender2,5 detik atau kurangDi atas 2,5 detik hingga 4,0 detikDi atas 4,0 detik
INPWaktu dari klik, ketukan, atau tekan tombol hingga frame berikutnya digambar200 ms atau kurangDi atas 200 ms hingga 500 msDi atas 500 ms
CLSSeberapa banyak konten yang terlihat bergeser secara tak terduga0,1 atau kurangDi atas 0,1 hingga 0,25Di atas 0,25

Ambang batas berasal dari panduan LCP (terbuka di tab baru), INP (terbuka di tab baru), dan CLS (terbuka di tab baru) di web.dev, per Oktober 2026.

Persentil ke-75 berarti hasilnya mencerminkan sebagian besar pengunjung, bukan hanya yang tercepat, dan Google memisahkan seluler dan desktop (terbuka di tab baru). PageSpeed Insights meluluskan halaman jika ketiga metrik berada di kategori baik; jika data INP tidak cukup, penilaiannya hanya berdasarkan LCP dan CLS (dokumentasi PageSpeed Insights (terbuka di tab baru)). Google menyatakan bahwa Core Web Vitals yang sudah stabil tidak akan berubah lebih dari sekali per tahun.

Di toko online, elemen LCP sering kali adalah banner hero atau gambar produk utama, itulah sebabnya penanganan gambar sangat penting.

Mengapa INP menggantikan FID pada Maret 2024?

INP menggantikan FID karena FID hanya mengukur interaksi pertama dan hanya sebagian dari jedanya, sedangkan INP melihat interaksi sepanjang kunjungan.

Google mengumumkan pada Mei 2023 bahwa INP akan menjadi Core Web Vital, dan perubahan itu berlaku pada 12 Maret 2024 (terbuka di tab baru). FID hanya melaporkan interaksi pertama, dan hanya jeda inputnya, bukan waktu untuk menjalankan event handler atau menggambar hasilnya. INP mengamati klik, ketukan, dan tekan tombol sepanjang kunjungan dan melaporkan yang paling lama, dengan mengabaikan pencilan; scroll dan hover tidak dihitung. Pengguna API CrUX dan PageSpeed Insights diberi waktu hingga 9 September 2024 untuk beralih (web.dev (terbuka di tab baru)).

Setiap interaksi terdiri dari tiga bagian: jeda input (menunggu skrip yang sedang sibuk), durasi pemrosesan (menjalankan handler), dan jeda presentasi (menggambar frame berikutnya) (web.dev (terbuka di tab baru)).

Di toko online, interaksi tersebut adalah pemilih varian, tombol jumlah, tambahkan ke keranjang, laci keranjang (cart drawer), filter, dan menu. Sebuah halaman bisa lulus FID pada ketukan pertama yang cepat, tetapi tetap terasa lambat saat seseorang membuka filter belakangan.

Apa perbedaan data lab dan data lapangan?

Data lab berasal dari satu pengujian dalam kondisi tetap, sedangkan data lapangan dikumpulkan dari pengunjung sungguhan dari waktu ke waktu, dan Google menyarankan memakai data lapangan untuk menentukan apa yang diperbaiki lebih dulu (web.dev (terbuka di tab baru)).

Data labData lapangan
SumberSatu simulasi pemuatan halaman (Lighthouse, Chrome DevTools, bagian lab di PageSpeed Insights)Pengunjung Chrome sungguhan (Chrome UX Report), atau real user monitoring milik Anda sendiri
KondisiPerangkat dan jaringan tetap. Pengujian seluler bawaan Lighthouse (terbuka di tab baru) memakai "Slow 4G" (round trip 150 ms, unduhan 1,6 Mbps) dan perlambatan CPU 4xPerangkat, jaringan, dan lokasi apa pun yang dimiliki pengunjung Anda
INPTidak diukur pada pemuatan halaman biasa. Total Blocking Time (TBT) menjadi perkiraan kasarnyaDiukur dari interaksi sungguhan
Paling cocok untukDebugging dan memeriksa perubahan sebelum dirilisMengetahui apa yang benar-benar dialami pengunjung

TBT menjumlahkan bagian dari setiap task di main thread yang melebihi 50 ms; web.dev menyarankan di bawah 200 ms pada perangkat seluler rata-rata, tetapi menyatakan bahwa TBT bukan pengganti INP (web.dev (terbuka di tab baru)).

Tiga detail Chrome UX Report (CrUX) penting bagi toko online:

  • CrUX adalah rata-rata bergulir 28 hari (terbuka di tab baru) yang diperbarui setiap hari.
  • CrUX mencakup Chrome di desktop dan Android untuk pengguna yang memenuhi syarat pelaporan Chrome. Chrome di iOS tidak termasuk, sehingga toko yang pembelinya kebanyakan memakai iPhone hanya melihat data lapangan dari sebagian audiensnya (metodologi (terbuka di tab baru)).
  • Halaman dan origin hanya muncul jika dapat ditemukan publik dan cukup populer, sehingga toko dengan trafik rendah mungkin hanya memiliki data tingkat origin, atau tidak sama sekali.

Dasbor performa web (terbuka di tab baru) Shopify juga melaporkan LCP, INP, dan CLS dari pengguna sungguhan pada persentil ke-75, tetapi untuk periode 30 hari, bukan 28, jadi wajar jika ada sedikit perbedaan dengan CrUX.

Apa yang memperlambat LCP di halaman toko?

LCP di toko online biasanya lambat karena gambar utamanya terlalu berat, ditemukan terlambat, atau sengaja ditunda oleh lazy loading atau animasi.

  • Lazy load pada gambar LCP. web.dev menyatakan hal ini tidak boleh dilakukan (web.dev (terbuka di tab baru)). Analisisnya terhadap halaman WordPress menemukan LCP persentil ke-75 yang lebih lambat di situs yang memakai lazy loading native, dan tidak menerapkan lazy load pada gambar di paruh atas halaman menghilangkan penurunan tersebut (web.dev (terbuka di tab baru)).
  • Gambar yang ditemukan terlambat. Hero yang dipasang sebagai CSS background-image, atau disisipkan oleh skrip slider, tidak ada di HTML yang pertama kali dipindai browser. Shopify tidak menyarankan latar belakang CSS untuk konten hero maupun efek fade-in pada gambar LCP (Shopify (terbuka di tab baru)).
  • Prioritas rendah. Gambar dimuat dengan prioritas rendah sampai tata letak selesai, sehingga Shopify menyarankan fetchpriority="high" pada gambar LCP (Shopify (terbuka di tab baru)). web.dev mencatat bahwa memasangnya di lebih dari satu atau dua gambar mengurangi manfaatnya (web.dev (terbuka di tab baru)).
  • CSS dan skrip yang memblokir rendering. Stylesheet besar dan skrip sinkron di <head> menunda rendering bahkan setelah gambar tiba (web.dev (terbuka di tab baru)).
  • Ukuran file dan font. Gunakan format modern, srcset dan sizes, serta CDN. Untuk font web, gunakan nilai font-display selain auto atau block.
<!-- Main product image: real src in the HTML, eager, high priority -->
<img src="/images/linen-shirt-1200.webp"
     srcset="/images/linen-shirt-600.webp 600w, /images/linen-shirt-1200.webp 1200w"
     sizes="(min-width: 990px) 50vw, 100vw"
     width="1200" height="1500"
     fetchpriority="high"
     alt="Natural linen shirt, front view">

<!-- Gallery images below the first screen: lazy -->
<img src="/images/linen-shirt-back-600.webp" loading="lazy"
     width="600" height="750" alt="Natural linen shirt, back view">

Apa yang membuat INP lambat di halaman toko?

INP yang lambat di toko online biasanya berarti terlalu banyak JavaScript di main thread, sebagian besar dari aplikasi, tag pelacakan, dan fitur tema, sehingga ketukan harus menunggu.

Jika pembeli mengetuk "Tambahkan ke keranjang" saat skrip ulasan, chat, dan analitik masih berjalan, ketukan itu harus menunggu. Pemilih varian yang merender ulang seluruh formulir produk menambah waktu pemrosesan. Mega menu yang sangat besar dan grid koleksi dengan banyak swatch menambah jeda presentasi.

web.dev menyarankan memecah task yang panjang dan memberi jalan (yield) ke main thread, memperbarui layar lebih dulu dan menunda sisanya, serta menjaga DOM tetap kecil (web.dev (terbuka di tab baru)). Shopify menambahkan langkah khusus untuk toko: audit setiap aplikasi, pixel, dan skrip tema, tunda yang tidak penting, muat fitur saat ada interaksi, dan matikan snippet anti-flicker untuk A/B testing ketika tidak ada pengujian yang berjalan (Shopify (terbuka di tab baru)).

Apa penyebab pergeseran tata letak di halaman produk dan koleksi?

Pergeseran tata letak di toko online kebanyakan berasal dari konten yang muncul atau berubah ukuran setelah render pertama: gambar tanpa dimensi, bar pengumuman dan cookie, widget ulasan, blok aplikasi, dan pergantian font.

web.dev menyebut penyebab umumnya adalah media dengan dimensi yang tidak diketahui, konten yang ditambahkan di atas konten yang sudah ada, widget pihak ketiga yang mengubah ukurannya sendiri, dan font web yang ukurannya berbeda dari font cadangannya (web.dev (terbuka di tab baru)). Di toko online, itu berarti bar gratis ongkir yang disisipkan di bagian atas, rating bintang yang dimuat setelah judul, info cicilan di bawah harga, dan carousel rekomendasi. Shopify mencatat bahwa konten pop-up juga dapat menyebabkan pergeseran (Shopify (terbuka di tab baru)).

Pergeseran dalam 500 ms setelah input pengguna tidak dihitung, tetapi pergeseran saat scroll tetap dihitung, dan alat lab sering melewatkannya (web.dev (terbuka di tab baru)). Beri gambar width dan height atau CSS aspect-ratio, sediakan ruang untuk widget, tampilkan banner sebagai overlay, kurangi pergeseran akibat pergantian font dengan size-adjust, dan buat animasi dengan transform, bukan top atau left.

/* Reserve space for a reviews summary that loads after the page */
.product-reviews-summary { min-height: 24px; }

/* Keep product cards from jumping while images load */
.product-card img { width: 100%; height: auto; aspect-ratio: 4 / 5; }

Bagaimana cara meningkatkan Core Web Vitals di Shopify?

Di Shopify, sebagian besar peningkatan berasal dari memuat gambar pertama secara eager dengan prioritas tinggi, memangkas skrip aplikasi, dan memeriksa hasilnya di laporan performa web di admin.

Periksa data di admin Anda

Ringkasan muncul di halaman Online Store > Themes, dan laporan lengkap LCP, INP, dan CLS ada di Analytics > Reports. Datanya bisa tertunda hingga 36 jam, dan mode privat harus dinonaktifkan (Shopify Help Center (terbuka di tab baru)).

Atur pemuatan gambar di Liquid

Filter image_tag menerapkan lazy load pada gambar di section yang lebih ke bawah halaman, kecuali Anda mengatur preload (referensi image_tag (terbuka di tab baru)): eager untuk section 1 sampai 3, lazy mulai section 4. Karena section.index bernilai nil di editor tema, gunakan pengecekan > 3, bukan <= 3:

{%- if section.index == 1 -%}
  {{ section.settings.image | image_url: width: 1600 | image_tag: loading: 'eager', fetchpriority: 'high', widths: '600, 900, 1200, 1600', sizes: '100vw' }}
{%- elsif section.index > 3 -%}
  {{ section.settings.image | image_url: width: 1600 | image_tag: loading: 'lazy', sizes: '100vw' }}
{%- else -%}
  {{ section.settings.image | image_url: width: 1600 | image_tag: sizes: '100vw' }}
{%- endif -%}

Di grid produk, Shopify menyarankan memuat secara eager hanya beberapa kartu pertama (misalnya forloop.index <= 4) (Shopify (terbuka di tab baru)). Gunakan preload: true seperlunya; Shopify menyarankan preload hanya untuk satu atau dua resource yang ditemukan terlambat.

Hapus sisa-sisa yang ditinggalkan aplikasi

Matikan app embed yang tidak dipakai di Online Store > Edit theme > App embeds (Shopify Help Center (terbuka di tab baru)). Menghapus instalasi aplikasi akan menghapus blok aplikasinya, tetapi aplikasi yang mengedit file tema secara langsung bisa meninggalkan "kode hantu" (ghost code) yang menurut Shopify dapat menimbulkan masalah kualitas dan performa (Shopify (terbuka di tab baru)). Shopify juga menyatakan bahwa script tag akan berhenti berjalan pada 1 Maret 2027. Untuk font, Shopify menyarankan CDN miliknya sendiri atau font sistem dibandingkan layanan font eksternal (Shopify (terbuka di tab baru)).

Bagaimana cara meningkatkan Core Web Vitals di WooCommerce?

Di WooCommerce, pastikan plugin tidak menimpa prioritas gambar bawaan WordPress, cache semua halaman kecuali keranjang dan checkout, dan hapus skrip yang dimuat di mana-mana tanpa perlu.

  • Pertahankan penanganan gambar dari core. Sejak WordPress 6.3 (dirilis 8 Agustus 2023), core menambahkan fetchpriority="high" pada gambar yang kemungkinan menjadi LCP (secara default minimal 50.000 piksel persegi) dan tidak menerapkan lazy loading pada tiga gambar konten pertama (Make WordPress Core (terbuka di tab baru)). Jika plugin optimasi menambahkan lazy loading sendiri, pastikan plugin itu mengecualikan hero dan gambar produk utama.
  • Cache halaman, bukan keranjang. Panduan WooCommerce menyarankan page caching di server atau lewat plugin serta CDN, sambil membiarkan halaman keranjang dan checkout tanpa cache (dokumentasi developer WooCommerce (terbuka di tab baru)).
  • Periksa cart fragments. Sejak WooCommerce 7.8, skrip cart fragments hanya dimuat di tempat yang memiliki widget Cart, tetapi beberapa tema memasang widget itu secara hard-code. Blok Mini-Cart tidak memakai cart fragments (blog developer WooCommerce (terbuka di tab baru)).
  • Temukan plugin yang berat. WooCommerce menyarankan Query Monitor untuk menemukan plugin yang lambat, serta menunda JavaScript yang tidak penting.

Jika tata letak Anda menampilkan lebih dari tiga gambar di paruh atas halaman, Anda bisa menaikkan ambang batas WordPress:

// functions.php: skip lazy loading for the first 4 content images (default is 3)
add_filter( 'wp_omit_loading_attr_threshold', function () {
    return 4;
} );

Berapa lama sampai hasil perbaikan terlihat?

Pengujian lab langsung menunjukkan efek perbaikan, tetapi data lapangan membutuhkan waktu hingga sekitar empat minggu untuk mencerminkannya sepenuhnya, karena CrUX merata-ratakan 28 hari sebelumnya.

Jalankan pengujian lab beberapa kali sebelum dan sesudah perubahan, karena hasil satu kali pengujian bervariasi, lalu pantau angka lapangan di PageSpeed Insights, laporan Core Web Vitals di Search Console, atau laporan Shopify. Pemindaian gratis memberi gambaran awal dalam sekitar satu menit. Laporan Perbaikan Performa menjalankan pengujian lab seluler dengan throttling (slow 4G, CPU 4x) dan menambahkan data lapangan Chrome UX Report, termasuk INP jika Google memiliki cukup data untuk toko Anda.

Pertanyaan yang sering diajukan

Apakah Core Web Vitals memengaruhi peringkat Google?

Google menyatakan bahwa Core Web Vitals digunakan oleh sistem pemeringkatannya, tetapi skor yang baik tidak menjamin peringkat teratas, dan Google tetap menampilkan konten yang paling relevan meskipun pengalaman halamannya buruk (Google Search Central (terbuka di tab baru)).

Mengapa PageSpeed Insights tidak menampilkan data lapangan untuk toko saya?

CrUX hanya mencakup halaman dan origin yang dapat ditemukan publik dan memiliki cukup pengunjung Chrome yang memenuhi syarat. Toko dengan trafik rendah mungkin hanya memiliki data tingkat origin, atau tidak sama sekali, jadi andalkan pengujian lab dan laporan dari platform Anda sendiri.

Apakah saya butuh skor Lighthouse 90 atau lebih agar lulus?

Tidak. Skor performa Lighthouse adalah hasil lab, sedangkan penilaian Core Web Vitals memakai data lapangan pada persentil ke-75, sehingga sebuah halaman bisa lulus dengan skor Lighthouse yang biasa saja dan gagal dengan skor yang tinggi.

Apakah sebaiknya semua gambar produk memakai lazy load?

Tidak. Terapkan lazy load pada gambar di bawah layar pertama, tetapi muat gambar hero dan gambar produk utama secara eager, dengan fetchpriority="high" pada salah satunya.

Mengapa hasil seluler saya lebih buruk daripada desktop?

Google mengukur seluler dan desktop secara terpisah, dan ponsel memiliki prosesor dan jaringan yang lebih lambat. Pengujian seluler Lighthouse menyimulasikan hal itu dengan profil Slow 4G dan perlambatan CPU 4x.

Sumber

Semua panduan