--- title: "Memperbaiki LCP, INP, dan CLS di Core Web Vitals" description: "Apa itu LCP, INP, dan CLS, berapa batas nilai baiknya, beda data lapangan dan lab, serta perbaikan paling umum untuk website bisnis." url: "https://nivelva.com/insight/core-web-vitals-lcp-inp-cls" category: "Bisnis Digital" tags: ["core web vitals","lcp","inp","cls","kecepatan website"] author: "Theresia Candiawan" published: "2026-11-07T11:13:00+07:00" updated: "2026-11-07T11:13:00+07:00" language: "id" publisher: "Nivelva (https://nivelva.com)" --- # Memperbaiki LCP, INP, dan CLS di Core Web Vitals > **Jawaban singkat:** Core Web Vitals adalah tiga metrik pengalaman pengguna dari Google: LCP (kecepatan muat konten utama, baik di bawah 2,5 detik), INP (respons interaksi, baik di bawah 200 ms), dan CLS (stabilitas tata letak, baik di bawah 0,1), diukur pada persentil ke-75 kunjungan nyata. Core Web Vitals adalah tiga metrik dari Google untuk mengukur pengalaman nyata pengunjung website: seberapa cepat konten utama muncul (LCP), seberapa cepat halaman merespons klik atau ketukan (INP), dan seberapa stabil tata letaknya saat dimuat (CLS). Ketiganya mengukur hal yang berbeda, jadi perbaikannya juga berbeda. Mengganti hosting tidak akan menolong bila penyebabnya gambar banner yang terlalu besar, dan memasang plugin optimasi tidak akan menolong bila yang lambat adalah respons server. Karena itu, pahami dulu arti tiap metrik sebelum mengeluarkan biaya. ## Apa arti LCP, INP, dan CLS? Menurut web.dev, panduan dari Google untuk developer web, sebuah halaman dianggap lolos bila ketiga metrik memenuhi batas "baik" pada persentil ke-75 kunjungan, dihitung terpisah untuk mobile dan desktop. Artinya, minimal tiga perempat pengunjung harus mengalami performa yang baik. | Metrik | Yang diukur | Baik | Perlu perbaikan | Buruk | |:--|:--|:--|:--|:--| | LCP (Largest Contentful Paint) | Waktu sampai elemen konten terbesar tampil | 2,5 detik atau kurang | 2,5 sampai 4 detik | Lebih dari 4 detik | | INP (Interaction to Next Paint) | Jeda antara interaksi dan tampilan berikutnya | 200 ms atau kurang | 200 sampai 500 ms | Lebih dari 500 ms | | CLS (Cumulative Layout Shift) | Seberapa banyak elemen bergeser tanpa diminta | 0,1 atau kurang | 0,1 sampai 0,25 | Lebih dari 0,25 | Menurut web.dev, INP menjadi Core Web Vital stabil pada 2024, menggantikan FID (First Input Delay). Bedanya, FID hanya mengukur interaksi pertama, sedangkan INP memperhatikan interaksi sepanjang kunjungan, sehingga lebih jujur menggambarkan halaman yang berat JavaScript. ### LCP: konten utama muncul Elemen terbesar biasanya gambar hero, banner, foto produk, atau blok judul besar. LCP dipengaruhi empat tahap: waktu respons server, waktu sampai browser menemukan file elemen itu, waktu mengunduhnya, dan waktu menampilkannya. ### INP: halaman terasa responsif Saat pengunjung mengetuk tombol menu atau "tambah ke keranjang", browser harus menjalankan kode lalu menggambar ulang layar. Bila thread utama browser sibuk menjalankan JavaScript, misalnya dari widget chat, pelacak iklan, atau slider, ketukan itu terasa tertunda. ### CLS: tata letak tidak melompat Contoh klasiknya: kamu hendak mengetuk tautan, lalu banner muncul di atasnya dan yang terketuk malah iklan. Pergeseran seperti ini biasanya datang dari gambar tanpa ukuran, iklan atau embed yang dimuat belakangan, dan font yang berganti saat dimuat. ## Data lapangan vs data lab: mana yang dipakai? Data lapangan (field data) berasal dari pengunjung sungguhan yang memakai Chrome, dikumpulkan dalam Chrome User Experience Report (CrUX). Inilah yang dipakai untuk menilai apakah halaman lolos Core Web Vitals. Kelemahannya, data ini butuh lalu lintas yang cukup dan mencerminkan periode beberapa minggu ke belakang, jadi perbaikan hari ini baru terlihat belakangan. Data lab berasal dari pengujian buatan, misalnya Lighthouse di PageSpeed Insights atau Chrome DevTools. Hasilnya langsung, cocok untuk mencari penyebab dan menguji perbaikan. Tetapi lab tidak bisa mengukur INP secara langsung karena tidak ada pengguna yang benar-benar mengklik. Sebagai pendekatan, lab memakai Total Blocking Time (TBT). Gunakan keduanya sesuai perannya: data lapangan untuk tahu apakah ada masalah, data lab untuk tahu kenapa. Cara membaca laporannya dijelaskan di [membaca hasil PageSpeed Insights](https://nivelva.com/insight/membaca-hasil-pagespeed-insights). ## Perbaikan paling umum untuk tiap metrik ### Memperbaiki LCP - **Kecilkan dan modernkan gambar hero.** Kompres, sajikan dalam WebP atau AVIF, dan ukurannya sesuai layar. Panduannya di [optimasi gambar](https://nivelva.com/insight/optimasi-gambar-webp-avif). - **Jangan lazy load gambar LCP.** Gambar di bagian atas halaman harus dimuat secepatnya. Tambahkan `fetchpriority="high"` pada gambar itu bila perlu. - **Percepat respons server.** Aktifkan page cache, gunakan PHP versi baru, dan pertimbangkan CDN. Lapisan cache dibahas di [caching WordPress](https://nivelva.com/insight/caching-wordpress-redis). - **Kurangi CSS dan JavaScript yang menghambat render** di bagian atas halaman. ### Memperbaiki INP - **Kurangi JavaScript pihak ketiga.** Audit widget chat, pixel iklan, dan skrip pelacak. Masing-masing menambah beban di thread utama. - **Pecah tugas panjang.** Bagi developer, kode yang berjalan lama sebaiknya dipecah agar browser sempat merespons input. - **Hindari slider dan efek animasi berat** yang menjalankan skrip terus-menerus. - **Tunda skrip yang tidak penting** dengan atribut `defer` atau memuatnya setelah interaksi. ### Memperbaiki CLS - **Selalu cantumkan `width` dan `height`** (atau `aspect-ratio` di CSS) pada gambar dan video. - **Sediakan ruang untuk iklan dan embed** sebelum kontennya dimuat. - **Atur pemuatan font** agar pergantian font tidak menggeser teks secara drastis, misalnya dengan `font-display` dan font cadangan yang ukurannya mirip. - **Jangan menyisipkan banner di atas konten** yang sudah tampil, kecuali sebagai respons atas tindakan pengguna. > **Skor 100 bukan tujuan:** > > Mengejar skor sempurna di Lighthouse sering berujung pada pengorbanan fitur yang justru dibutuhkan bisnis, seperti chat atau analitik. Targetkan ketiga metrik lolos di data lapangan, lalu fokus ke konten dan konversi. ## Kapan masalahnya di server, kapan di halaman? Bila LCP buruk dan diagnosis menunjukkan waktu respons server (TTFB) tinggi, masalahnya ada di backend: hosting yang kekurangan sumber daya, tidak ada cache, database lambat, atau server jauh dari pengunjung. Di sini perbaikan halaman tidak banyak menolong, dan langkah yang masuk akal adalah cache, CDN, atau sumber daya server yang lebih memadai. Pertimbangan spesifikasinya ada di [memilih spesifikasi VPS](https://nivelva.com/insight/memilih-spesifikasi-vps). Bila respons server cepat tetapi LCP tetap lambat, atau INP dan CLS yang bermasalah, sumbernya hampir selalu di halaman: gambar, skrip, font, dan tata letak. Mengganti hosting tidak akan memperbaiki banner tanpa ukuran atau widget yang memblokir thread utama. Jadi langkah pertamanya selalu sama: cek dulu apakah TTFB yang tinggi, baru putuskan perbaikannya. ## Pertanyaan yang sering diajukan ### Apakah Core Web Vitals memengaruhi peringkat Google? Google menyebut Core Web Vitals sebagai bagian dari sinyal pengalaman halaman. Namun relevansi konten tetap faktor utama, jadi halaman lambat dengan konten terbaik masih bisa unggul atas halaman cepat yang kurang relevan. ### Kenapa data lapangan website saya tidak muncul? Data CrUX hanya tersedia bila halaman atau domain punya cukup kunjungan dari pengguna Chrome. Website kecil sering hanya punya data tingkat domain atau belum punya sama sekali. ### Setelah perbaikan, kapan hasilnya terlihat? Data lab langsung berubah. Data lapangan memakai jendela beberapa minggu ke belakang, jadi perbaikan baru terlihat penuh setelah beberapa waktu. ### Mana yang paling dulu diperbaiki? Mulai dari metrik yang gagal di data lapangan. Untuk kebanyakan website bisnis, LCP di mobile adalah yang paling sering bermasalah, biasanya karena gambar besar atau respons server lambat. ## Sumber - - - - --- Diterbitkan oleh Nivelva Insight (https://nivelva.com/insight/). Artikel ini: https://nivelva.com/insight/core-web-vitals-lcp-inp-cls Kontak Nivelva: WhatsApp https://wa.me/6285111245007, email hello@nivelva.com