Kesalahan yang Bikin Skor Core Web Vitals Anda Palsu
Banyak pemilik bisnis melihat skor PageSpeed Insights hijau semua, lalu berpikir urusan Core Web Vitals sudah selesai. Padahal ada satu metrik baru yang sering luput dari radar: Interaction to Next Paint (INP).
Sejak 12 Maret 2024, Google resmi menggantikan First Input Delay (FID) dengan INP sebagai bagian dari Core Web Vitals. Artinya, skor FID lama Anda tidak relevan lagi. Jika situs Anda belum diaudit ulang setelah tanggal itu, besar kemungkinan ada masalah performa yang diam-diam menekan ranking.
Di artikel ini kita akan bahas apa itu INP, kenapa ia lebih keras dari FID, dan bagaimana cara memperbaikinya langkah demi langkah — termasuk tool gratis yang bisa Anda pakai hari ini.
Apa Itu INP dan Kenapa Lebih Sulit Dipenuhi dari FID
FID hanya mengukur waktu respons pertama saat pengguna mengklik sesuatu. INP jauh lebih ketat: ia mengukur semua interaksi selama sesi pengguna — klik, tap, ketikan — lalu mengambil nilai terburuk (atau mendekati terburuk) sebagai skor akhir.
Ambang batas INP Google:
- ✅ Baik: ≤ 200 milidetik
- ⚠️ Perlu perbaikan: 201–500 ms
- ❌ Buruk: > 500 ms
Implikasinya untuk bisnis Indonesia: situs e-commerce dengan filter produk, form pemesanan, atau pop-up promo yang berat hampir pasti punya INP buruk — bahkan jika LCP dan CLS-nya sudah oke.
Data dari Chrome UX Report (CrUX) menunjukkan bahwa sekitar 35% situs di Asia Tenggara masih memiliki INP di zona "perlu perbaikan" atau "buruk" per Q1 2025. Ini peluang kompetitif nyata: perbaiki INP lebih cepat dari kompetitor, dan Anda mendapat sinyal ranking yang lebih kuat.
Kenapa INP Penting untuk Bisnis Anda
Google menggunakan Core Web Vitals sebagai page experience signal. Ini bukan faktor tunggal penentu ranking, tapi ia menjadi tiebreaker ketika dua halaman memiliki konten dan backlink yang setara.
Yang lebih langsung terasa adalah konversi. Studi internal Google menunjukkan bahwa setiap peningkatan 100 ms pada respons interaksi bisa meningkatkan konversi hingga 7%. Untuk toko online dengan omzet Rp 500 juta per bulan, angka itu bukan teori — itu uang nyata.
Selain itu, INP yang buruk langsung dirasakan pengguna sebagai "situs lemot" atau "tombol tidak responsif" — terutama di perangkat Android kelas menengah yang masih dominan di Indonesia (Redmi, Samsung A-series, Realme). Perangkat ini punya CPU terbatas, sehingga JavaScript berat sangat terasa.
Checklist Audit INP: 7 Langkah yang Bisa Dikerjakan Minggu Ini
Berikut urutan audit yang saya pakai untuk klien sebelum masuk ke fase perbaikan:
✅ Langkah 1 — Cek Data Field (Real User) di Search Console
- Buka Google Search Console → pilih properti situs Anda.
- Klik menu "Pengalaman" → "Pengalaman Halaman".
- Lihat kolom INP. Jika belum muncul, berarti situs Anda belum punya cukup data CrUX (biasanya butuh minimal 1.000 pengguna Chrome per bulan).
- Klik "Buka laporan Core Web Vitals" untuk melihat URL mana yang masuk kategori buruk.
Catatan penting: Data di Search Console adalah data field (pengguna nyata), bukan simulasi. Ini yang dipakai Google untuk ranking. Jangan hanya percaya skor PageSpeed Insights yang merupakan data lab.
✅ Langkah 2 — Identifikasi Interaksi Bermasalah dengan Chrome DevTools
- Buka halaman yang bermasalah di Chrome (gunakan mode Incognito agar ekstensi tidak mengganggu).
- Buka DevTools (F12) → tab "Performance".
- Klik "Start profiling and reload page", lalu lakukan interaksi normal: klik menu, isi form, scroll.
- Setelah stop, cari blok berwarna merah/kuning di timeline — itu adalah Long Tasks (tugas JS yang memblokir main thread > 50 ms).
- Klik blok tersebut untuk melihat fungsi JavaScript mana yang menjadi biang kerok.
✅ Langkah 3 — Gunakan Web Vitals Extension untuk Monitoring Cepat
Instal ekstensi Web Vitals (oleh Google, gratis di Chrome Web Store). Ekstensi ini menampilkan INP real-time saat Anda berinteraksi dengan halaman. Cocok untuk audit cepat tanpa buka DevTools.
✅ Langkah 4 — Audit JavaScript Pihak Ketiga
Ini sering menjadi penyebab utama INP buruk di situs Indonesia:
- Plugin live chat (Tawk.to, Crisp, Tidio) yang load script besar
- Pixel Facebook & TikTok yang berjalan di main thread
- Google Tag Manager dengan terlalu banyak tag aktif
- Slider/carousel berbasis jQuery
Cara cek: buka tab "Network" di DevTools, filter by "JS", sort by "Size". Script pihak ketiga yang > 100 KB dan load synchronous adalah kandidat masalah.
✅ Langkah 5 — Ukur INP per Segmen Perangkat
Buka PageSpeed Insights (pagespeed.web.dev), masukkan URL, dan perhatikan tab "Mobile". INP di mobile hampir selalu lebih buruk dari desktop. Jika skor mobile Anda > 300 ms, ini prioritas perbaikan.
Alternatif lebih detail: gunakan CrUX Dashboard (lookerstudio.google.com, template resmi Google) untuk melihat tren INP per bulan dan per tipe koneksi.
✅ Langkah 6 — Identifikasi Input Delay vs. Processing Time vs. Presentation Delay
INP terdiri dari tiga komponen:
- Input Delay — waktu dari klik hingga browser mulai memproses event handler
- Processing Time — waktu JavaScript event handler berjalan
- Presentation Delay — waktu browser me-render perubahan visual
Di DevTools Performance tab, Anda bisa melihat breakdown ini. Solusi berbeda tergantung komponen mana yang dominan (lihat bagian berikutnya).
✅ Langkah 7 — Dokumentasi Baseline Sebelum Perbaikan
Catat skor INP saat ini (dari Search Console dan PageSpeed Insights) beserta tanggal. Ini penting untuk membuktikan dampak perbaikan ke klien atau atasan. Screenshot, simpan di spreadsheet.
Cara Memperbaiki INP: Solusi per Penyebab
Jika penyebabnya adalah Long Tasks di JavaScript
Solusi: pecah tugas dengan setTimeout atau scheduler.yield()
Alih-alih menjalankan satu fungsi besar yang memblokir main thread, pecah menjadi potongan kecil:
// Sebelum: satu fungsi berat
function prosesData(items) {
items.forEach(item => hitungBerat(item));
}
// Sesudah: dipecah per chunk
async function prosesDataChunk(items) {
for (const item of items) {
hitungBerat(item);
await scheduler.yield(); // beri napas ke browser
}
}
Teknik ini disebut "yielding to the main thread" dan merupakan rekomendasi resmi Google untuk memperbaiki INP.
Jika penyebabnya adalah script pihak ketiga
Solusi: load dengan defer atau pindahkan ke Web Worker
Untuk pixel tracking:
<!-- Ganti ini -->
<script src="fbpixel.js"></script>
<!-- Dengan ini -->
<script defer src="fbpixel.js"></script>
Untuk live chat: aktifkan opsi "lazy load" yang biasanya tersedia di dashboard Tawk.to atau Crisp. Chat widget baru muncul setelah halaman selesai load.
Jika penyebabnya adalah rendering framework (React, Vue, Next.js)
Gunakan React 18 Concurrent Features atau Vue 3 Suspense untuk memecah rendering menjadi unit yang bisa di-interrupt. Jika menggunakan WordPress dengan Elementor atau Divi, pertimbangkan untuk mengurangi jumlah widget per halaman atau beralih ke theme yang lebih ringan seperti GeneratePress atau Blocksy.
Jika penyebabnya adalah Presentation Delay
Hindari animasi CSS yang memicu layout reflow (width, height, top, left). Gunakan properti yang hanya memicu compositing: transform dan opacity. Contoh:
/* Hindari */
.animasi { transition: width 0.3s; }
/* Gunakan */
.animasi { transition: transform 0.3s; }
Tools yang Saya Rekomendasikan untuk Monitoring INP Rutin
| Tool | Fungsi | Biaya |
|---|---|---|
| Google Search Console | Data field real user, laporan URL | Gratis |
| PageSpeed Insights | Skor lab + field per URL | Gratis |
| Web Vitals Chrome Extension | INP real-time saat browsing | Gratis |
| CrUX Dashboard (Looker Studio) | Tren historis per bulan | Gratis |
| SpeedVitals | Monitoring otomatis + alert | Berbayar (ada free tier) |
| Calibre | Monitoring CI/CD untuk tim dev | Berbayar |
Untuk bisnis kecil-menengah, kombinasi Search Console + PageSpeed Insights + Web Vitals Extension sudah cukup untuk mulai.
Kesalahan Umum yang Harus Dihindari
⚠️ Kesalahan #1: Hanya mengoptimasi skor PageSpeed Insights (data lab) tanpa mengecek data field di Search Console. Google ranking menggunakan data field.
⚠️ Kesalahan #2: Mengaktifkan caching agresif tanpa memperbaiki JavaScript yang berat. Cache mempercepat load, tapi tidak memperbaiki interaksi yang lambat.
⚠️ Kesalahan #3: Menginstal plugin "speed optimizer" WordPress terlalu banyak (WP Rocket + W3 Total Cache + Autoptimize bersamaan). Konflik antar plugin justru menambah Long Tasks.
⚠️ Kesalahan #4: Mengukur INP hanya dari laptop kantor dengan koneksi fiber. Selalu tes dari perangkat Android kelas menengah dengan koneksi 4G atau gunakan Chrome DevTools CPU throttling 4x slowdown.
Prioritas Pertama yang Harus Anda Kerjakan Sekarang
Dari semua langkah di atas, mulai dari Langkah 1: cek data field INP di Google Search Console.
Alasannya sederhana: jika situs Anda belum punya data CrUX (karena traffic rendah), Anda perlu tahu lebih awal agar bisa fokus menaikkan traffic terlebih dahulu atau menggunakan data lab sebagai proxy. Jika data sudah ada dan INP Anda di zona merah, Anda langsung tahu URL mana yang perlu diprioritaskan — tidak perlu audit semua halaman sekaligus.
Setelah tahu URL bermasalah, baru jalankan Langkah 2 (DevTools profiling) untuk mendiagnosis penyebab spesifiknya. Dengan urutan ini, Anda tidak buang waktu memperbaiki sesuatu yang mungkin bukan masalah utama Anda.
INP bukan metrik yang bisa diperbaiki dengan satu klik plugin. Tapi dengan audit yang sistematis dan perbaikan yang tepat sasaran menggunakan OpenTelemetry Collector Configuration Tutorial, skor 200 ms ke bawah sangat bisa dicapai — bahkan untuk situs WordPress dengan traffic tinggi sekalipun.