Studi Kasus Vetmo: Priority Hints Pulihkan Conversion Rate Mobile dari 1,6 ke 3,9 Persen Setelah LCP Turun 50 Persen di 2026

TL;DR: Vetmo, klien pet care berbasis Jakarta dengan trafik 80% mobile, mengalami penurunan conversion rate dari 3,7% ke 1,6% pasca migrasi ke platform baru. Audit menunjukkan LCP gambar hero memburuk dari 2,1 ke 3,4 detik. Pemasangan Priority Hints pada gambar hero, font, dan deprioritisasi widget chat memangkas LCP ke 1,7 detik dan memulihkan conversion ke 3,9% dalam 6 minggu. Tidak ada perubahan UI atau pricing.

Penurunan conversion rate setelah migrasi platform adalah masalah klasik yang sering saya temui. Tim engineering yakin website terlihat "sama saja", tapi metric bisnis bilang sebaliknya. Vetmo adalah contoh tipikal: brand pet care yang sudah berjalan 4 tahun, trafik organik stabil dari konten edukasi vitamin hewan, dengan 78% pembelian terjadi di mobile. Setelah migrasi ke stack baru, conversion rate turun lebih dari separuh.

Tim awalnya menduga UX baru tidak familiar bagi user lama. Tapi setelah 3 minggu observasi dan A/B test rollback parsial, hipotesis itu gugur. Masalah sebenarnya ada di layer yang lebih dalam: kecepatan loading mobile.

Diagnosis: LCP Mobile Memburuk Hampir Dua Kali Lipat

Audit Real User Monitoring (RUM) lewat library web-vitals yang kami pasang menunjukkan:

Korelasi LCP dengan conversion rate sangat kuat. Untuk setiap 100 ms tambahan LCP di range 2-4 detik, conversion drop sekitar 7%. Vetmo kehilangan 1,3 detik LCP, hilang lebih dari separuh konversi. Angka ini selaras dengan riset Google Search Central yang menyebut LCP buruk berasosiasi dengan bounce rate naik 32%.

Akar Masalah: Antrian Pengunduhan yang Berantakan

Audit Chrome DevTools Network panel menunjukkan urutan pengunduhan resource halaman katalog produk:

1. HTML document
2. CSS bundle (inline critical CSS belum dipasang)
3. Font Inter dari Google Fonts (4 weight variants)
4. Script Tawk.to chat widget
5. Script GA4 + Meta Pixel + Hotjar
6. Gambar hero produk (LCP element)
7. Gambar produk grid

Gambar hero, yang seharusnya jadi prioritas utama, baru diunduh setelah enam resource lain. Browser menerapkan heuristik default-nya, dan gambar hero kalah cepat dengan font + script yang dianggap browser lebih kritis untuk render awal.

Intervensi: Tiga Lapis Priority Hints

Tanpa mengubah arsitektur atau ganti CDN, kami pasang fetchpriority dalam tiga lapis intervensi yang dijalankan secara bertahap selama 2 minggu.

Lapis 1: Promosikan Gambar Hero

<Image
  src={produk.hero_image}
  alt={produk.nama}
  fill
  priority
  fetchPriority="high"
  sizes="100vw"
/>

Dengan dua sinyal sekaligus (priority Next.js + fetchPriority browser), gambar hero langsung naik ke urutan ke-2 setelah HTML. Dampak: LCP turun dari 3,4 ke 2,4 detik.

Lapis 2: Promosikan Font Hero

<link
  rel="preload"
  href="/fonts/inter-700.woff2"
  as="font"
  type="font/woff2"
  fetchpriority="high"
  crossOrigin="anonymous"
/>

Hanya font weight yang dipakai di hero (700 untuk heading) yang dipreload. Weight lain biarkan lazy. Dampak: LCP turun dari 2,4 ke 2,0 detik dan CLS turun dari 0,12 ke 0,07.

Lapis 3: Deprioritisasi Widget Non-Kritis

useEffect(() => {
  ['tawk.to', 'gtag', 'fbq', 'hotjar'].forEach(scriptUrl => {
    const s = document.createElement('script');
    s.src = scriptUrl;
    s.fetchPriority = 'low';
    s.defer = true;
    document.body.appendChild(s);
  });
}, []);

Empat script tracking diberi fetchPriority="low" dan ditunda eksekusinya sampai setelah Time to Interactive. Dampak: LCP turun dari 2,0 ke 1,7 detik. FID juga ikut turun dari 180 ms ke 95 ms.

Hasil Setelah 6 Minggu

Conversion rate justru sedikit lebih tinggi dari sebelum migrasi (3,9% vs 3,7% baseline lama). Hipotesisnya: speed improvement membuat user yang sebelumnya bounce di tahap browsing produk sekarang lanjut ke checkout. Ranking organik juga membaik karena Google mulai memberi sinyal positif dari Core Web Vitals.

Pelajaran untuk Marketer

Penurunan conversion setelah migrasi seringkali bukan masalah UX desain, tapi performance regression yang tidak terdeteksi. Tiga pelajaran utama dari kasus Vetmo:

Pertama, pasang RUM monitoring sebelum migrasi besar. Tanpa baseline data, sulit menentukan apa yang regress.

Kedua, intervensi paling efektif seringkali yang paling kecil. Empat baris kode strategis bisa menyelamatkan setengah revenue.

Ketiga, jangan asumsi browser tahu apa yang penting. Beri sinyal eksplisit lewat Priority Hints, dan dapatkan kontrol penuh atas urutan pengunduhan resource.

Pertanyaan Umum

Apakah intervensi ini bisa diterapkan tanpa developer?

Untuk site Next.js, butuh akses ke source code. Tapi modifikasinya minor, kurang dari 10 baris kode total. Marketer bisa request perubahan ini ke tim dev dengan deskripsi: "Pasang fetchPriority high di Image hero dan low di script analytics".

Berapa lama sampai dampak conversion terlihat?

Dalam kasus Vetmo, 6 minggu. Tapi sinyal awal sudah terlihat di minggu ke-2 setelah cache CDN refresh dan crawl ulang Google.

Apakah teknik ini bekerja untuk halaman selain product?

Ya. Halaman blog, landing page, dan homepage juga merasakan dampak serupa selama ada satu resource yang jelas jadi LCP element.

Bagaimana kalau LCP element bukan gambar?

Bisa juga teks atau video. Untuk teks LCP, fokus optimasi ke font loading (preload + fetchpriority high). Untuk video, gunakan poster image dan lazy load video sendiri.

Penutup

Studi kasus Vetmo menunjukkan bahwa performance bukan urusan engineering saja, tapi metrik bisnis yang berdampak langsung ke revenue. Untuk marketer Indonesia yang mengandalkan trafik mobile, Priority Hints adalah salah satu lever paling efektif yang sering diabaikan. Mulai dari halaman dengan revenue tertinggi, ukur dampaknya, dan gulirkan ke seluruh template.