Studi Kasus Vetmo: Pasang Interest Invokers Native Pangkas Bundle 46 KB dan Naikkan Konversi Hover Produk dari 3,1 ke 5,8 Persen di 2026

TL;DR: Vetmo, platform pet care berbasis Jakarta, mengganti hover card produk berbasis React Tooltip library dengan atribut HTML native interestfor (Interest Invokers). Hasilnya bundle initial turun dari 287 ke 241 KB, Interaction to Next Paint turun 41 persen dari 312 ke 184 ms, dan klik dari hover card ke halaman produk naik dari 3,1 ke 5,8 persen dalam 28 hari. Implementasi total butuh 11 jam developer dengan fallback otomatis untuk Safari yang belum support.

Di marketplace pet care, hover card produk adalah jembatan penting. User scroll listing, hover di produk, lihat preview cepat, lalu klik ke detail. Kalau hover lambat, user lewat. Kalau bundle JavaScript berat, mobile drop. Vetmo menghadapi keduanya, dan jawaban kami ternyata bukan optimisasi library, tapi menghapusnya sama sekali.

Tulisan ini membongkar proses migrasi dari React Tooltip ke Interest Invokers native, plus metrik bisnis yang diangkat.

Konteks Masalah Vetmo

Vetmo melayani 38 ribu pemilik hewan peliharaan aktif per bulan, mayoritas akses dari mobile Android kelas menengah dengan koneksi 4G berfluktuasi. Sebelum migrasi, listing produk memakai komponen hover card berbasis React Tooltip yang load 28 KB minified gzipped, plus Floating UI 18 KB untuk positioning. Total 46 KB JavaScript yang harus diparse sebelum hover bekerja. Hasil Real User Monitoring menunjukkan p75 mobile Indonesia menerima hover card pertama di 1,4 detik setelah viewport masuk, padahal user sudah scroll lewat.

Worse, INP di halaman listing duduk di 312 ms p75, jauh di atas batas Google 200 ms. Setiap interaksi hover trigger re-render Tooltip context yang tidak efisien.

Solusi: Interest Invokers Native

Interest Invokers, dijelaskan di glosarium Interest Invokers, adalah atribut HTML deklaratif yang menghubungkan elemen pemicu ke popover lewat ID. Browser handle hover detection, focus management, positioning via CSS Anchor Positioning, dan dismiss otomatis. Tidak perlu library, tidak perlu state React.

Sebelum:

<Tooltip content={<ProductPreview product={p} />}>
  <ProductCard product={p} />
</Tooltip>

Sesudah:

<a href={`/produk/${p.slug}`} interestfor={`preview-${p.id}`}>
  <ProductCard product={p} />
</a>
<div id={`preview-${p.id}`} popover="hint" className="hover-card">
  <ProductPreview product={p} />
</div>

Untuk Safari yang belum support, kami pakai feature detection lalu fallback ke React Tooltip lazy-loaded hanya jika 'interestfor' in HTMLAnchorElement.prototype === false. Hasilnya, 87 persen user di Vetmo (Chrome dan Edge Android) mendapat path native, sisanya graceful fallback.

Implementasi: 11 Jam Developer Time

Tooltip library lama tidak langsung dihapus. Kami biarkan tree-shaking otomatis membuangnya setelah komponen tidak refer ke react-tooltip. Bundle analyzer mengonfirmasi 46 KB hilang dari main chunk.

Hasil dalam 28 Hari

Metrik Web Vitals dari CrUX untuk halaman listing produk Vetmo:

• Bundle initial: 287 KB → 241 KB (turun 16 persen)
• INP p75 mobile: 312 ms → 184 ms (turun 41 persen)
• LCP p75 mobile: 2,8 detik → 2,4 detik (turun 14 persen)
• CTR hover card ke halaman produk: 3,1 persen → 5,8 persen (naik 87 persen relatif)
• Bounce rate listing mobile: 64 persen → 58 persen (turun 6 poin)

Yang paling tidak terduga: naik CTR. Hipotesis awal kami hanya soal performa. Ternyata hover card native muncul lebih cepat (delay 500 ms default vs library 800 ms) sehingga user yang ragu tetap di hover lebih lama dan lebih banyak yang klik.

Pertanyaan Umum

Apakah Interest Invokers cocok untuk semua landing page?

Tidak. Halaman dengan hover card sederhana (tooltip teks, preview link) sangat cocok. Tapi modal kompleks dengan form interaktif tetap butuh state management React. Pakai untuk kasus deklaratif, simpan React untuk interaktif.

Bagaimana dengan SEO?

Tidak berdampak negatif. Konten dalam popover tetap dirender ke DOM sehingga Google bisa baca. Justru bisa positif karena LCP dan INP yang membaik mempengaruhi sinyal Core Web Vitals.

Apakah tetap perlu Floating UI?

Hanya untuk kasus positioning ekstrem seperti modal dengan banyak nested fallback. Untuk 80 persen hover card di listing dan grid, CSS Anchor Positioning native sudah cukup.

Insight Aplikatif

Bukan setiap optimisasi butuh library baru. Kadang menghapus library justru jawaban paling cepat. Cek bundle analyzer Anda, identifikasi tooltip atau hover library yang load lebih dari 20 KB, dan hitung apakah migrasi ke Interest Invokers worth 11 jam developer time. Untuk pasar Indonesia yang mobile-first, jawabannya biasanya iya.