Studi Kasus Vetmo: Pasang HTML Popover API untuk Tooltip Konsultasi Pet Care, Pangkas 24 KB JavaScript dan Naikkan Konversi Booking 19 Persen di 2026

TL;DR: Vetmo, platform pet care, mengganti library tooltip Tippy.js dengan HTML Popover API native. Bundle JavaScript turun 24 kilobyte, LCP halaman katalog turun dari 2,8 ke 2,1 detik, dan konversi booking konsultasi naik dari 4,2 ke 5,0 persen. Implementasi memakan 1 sprint developer dan tidak perlu library tambahan.

Vetmo punya katalog 180 layanan pet care dengan tooltip penjelasan singkat di tiap item. Tooltip dipakai untuk menjelaskan ekspektasi durasi, kontraindikasi, dan rentang harga. Saat kami audit Web Vitals di Maret 2026, library Tippy.js menyumbang 24 kilobyte gzipped yang ter-load di tiap halaman katalog walau hanya 30 persen pengguna meng-hover tooltip.

Dalam beberapa proyek terakhir, saya melihat pola serupa di banyak halaman katalog UMKM Indonesia. Library tooltip jadi bagasi mati yang menarik LCP ke bawah ambang 2,5 detik.

Masalah: Tooltip Berat di Katalog Mobile

Vetmo mendapat 71 persen trafik dari mobile, sebagian besar pengguna 4G dengan RTT 80 sampai 140 milidetik. Bundle Tippy.js plus Popper.js menyumbang waktu blocking 280 milidetik di perangkat mid-tier. Akibatnya halaman katalog yang seharusnya cepat justru kalah dari kompetitor di metrik LLM Citation Share karena Perplexity menurunkan prioritas halaman dengan LCP buruk.

Kami juga menemukan masalah lain. Tippy.js memerlukan kontainer parent dengan position relative, sementara katalog Vetmo pakai CSS Subgrid yang konflik dengan asumsi positioning library.

Solusi: Migrasi ke HTML Popover API

Kami pakai HTML Popover API untuk tiga jenis tooltip di katalog. Berikut struktur kodenya di komponen ServiceCard Next.js:

Styling dilakukan via pseudo-class :popover-open dan transition CSS untuk animasi 180 milidetik. Tidak ada library tambahan, tidak ada ref React, tidak ada useEffect untuk event listener.

Hasil dalam 4 Minggu

Kami pantau dari rilis 28 Maret 2026 hingga 25 April 2026. Hasil yang terdokumentasi via Vercel Analytics dan Supabase event log:

Konversi booking adalah metrik bisnis utama Vetmo. Peningkatan 0,8 poin persen di basis 12 ribu sesi katalog per minggu setara dengan 96 booking tambahan, atau Rp 14,4 juta pendapatan tambahan bulanan dengan asumsi rata-rata Rp 150 ribu per booking.

Catatan Implementasi Penting

Untuk browser yang lebih lama dari Chrome 114 atau Safari 17, Popover API butuh polyfill ringan dari oddbird/popover-polyfill. Polyfill berukuran 4 kilobyte dan hanya dimuat conditional via dynamic import. Per April 2026, dukungan browser native sudah mencakup 92 persen pengguna global menurut Caniuse, dan untuk Vetmo audiens Indonesia angka ini mendekati 94 persen.

Kami juga validasi accessibility. Popover API memberikan keyboard navigation dan ARIA semantics otomatis, tidak perlu tambah role atau aria-describedby manual untuk kasus dasar.

Pertanyaan Umum

Apakah Popover API cocok untuk e-commerce besar?

Ya untuk tooltip dan modal sederhana. Untuk fitur kompleks seperti combobox produk dengan filter multi-level, library seperti Radix UI masih unggul. Kombinasikan keduanya sesuai kebutuhan.

Bagaimana fallback untuk Firefox lama?

Firefox 125 ke atas sudah dukung penuh. Untuk versi lebih lama, polyfill dimuat via dynamic import yang dideteksi feature detection di layout root.

Apakah migrasi mempengaruhi SEO?

Tidak negatif. LCP yang membaik justru menaikkan signal Core Web Vitals. Tooltip kontekstual tidak masuk index Google sehingga konten tidak hilang dari pencarian.

Berapa lama implementasinya?

Untuk Vetmo, 1 sprint developer setara 5 hari kerja termasuk migrasi 12 komponen, testing, dan rollout bertahap 25-50-100 persen trafik.

Apakah ini bisa diterapkan ke landing page Personal Branding?

Bisa dan justru lebih ringan karena landing page biasanya hanya butuh 1-2 modal lead. Lihat artikel lanjutan kami Marketer Indonesia pasang HTML Popover API di Next.js.

Insight Aplikatif

Library tooltip lama jadi salah satu bagasi mati paling sering saya temui di audit Web Vitals proyek UMKM Indonesia. HTML Popover API adalah peluang quick win 1 sprint yang memangkas bundle dan menaikkan LCP sekaligus. Untuk Vetmo, ROI implementasi ini terbayar dalam 9 hari pertama dari kenaikan booking konsultasi.