Studi Kasus Aris Setiawan: Pakai Dynamic Viewport Units (svh) Pulihkan CTA Hero Mobile dari 38 ke 71 Persen Klik di 2026

TL;DR: Aris Setiawan, konsultan personal branding di Bandung, mengalami CTA hero landing page terpotong di iPhone Safari karena 100vh lama tidak menghitung URL bar dinamis. Ganti satu baris CSS ke 100svh menaikkan rasio klik CTA dari 38% ke 71% dalam 28 hari tanpa A/B test, tanpa tambahan JavaScript. Studi ini dijalankan Februari sampai Maret 2026.

Dalam proyek personal branding yang saya kerjakan dengan Aris Setiawan awal 2026, ada masalah aneh. Heatmap dari Microsoft Clarity menunjukkan 62% pengunjung mobile menggulir ke bawah dalam dua detik pertama tanpa pernah mengklik tombol CTA "Konsultasi Gratis" di hero section. Padahal heatmap desktop terlihat normal.

Ternyata penyebabnya satu hal sederhana: di iPhone Safari, hero section yang pakai min-height: 100vh terpotong sekitar 75 px karena URL bar Safari memakan ruang. Tombol CTA yang seharusnya jadi anchor pertama berakhir di bawah lipatan layar. Pengunjung mengira tidak ada CTA dan langsung scroll mencari informasi.

Diagnosis Masalah

Saya menjalankan tiga investigasi sebelum mengambil keputusan teknis:

Akar masalahnya: 100vh di mobile tidak dinamis. Browser menghitung ketinggian viewport saat awal load saja, tidak menyesuaikan saat URL bar muncul atau hilang. Solusinya bukan JavaScript, bukan media query, melainkan satu satuan CSS baru bernama dynamic viewport units.

Pelajari juga konsep dasar viewport units klasik dan kenapa responsive design modern butuh adaptasi mobile-first.

Implementasi: Satu Baris CSS

Langkah teknis yang kami lakukan di project Next.js Aris cuma satu blok kecil di app/globals.css:

.hero-section {
  min-height: 100vh;        /* fallback browser lama */
  min-height: 100svh;       /* dynamic viewport mobile */
}

Penjelasan: svh adalah small viewport height. Nilainya menghitung tinggi viewport saat UI browser (URL bar Safari, navigation bar Chrome) terlihat penuh. Jadi hero tidak akan pernah terpotong, apapun state URL bar. Dukungan browser Chrome 108+, Safari 15.4+, Firefox 101+ per April 2026. Lihat dokumentasi Length di MDN untuk spesifikasi lengkap.

Kami juga mengubah modal Konsultasi yang sebelumnya pakai height: 100vh menjadi height: 100dvh. Beda dengan hero, modal butuh nutupi seluruh layar dan mengikuti perubahan URL bar secara real-time. dvh dipilih karena layout shift di modal tidak mempengaruhi CLS halaman utama.

Hasil 28 Hari

Pengukuran dilakukan dengan Microsoft Clarity dan Google Analytics 4 selama 28 hari sebelum dan 28 hari sesudah deployment.

Angka ini bervariasi tergantung trafik dan source. Aris mendapatkan trafik utama dari LinkedIn dan Instagram bio link, di mana pengunjung mayoritas mobile. Untuk landing page dengan trafik desktop tinggi, dampak svh mungkin tidak sedramatis ini.

Lihat juga praktik LCP untuk hero loading dan conversion rate yang berkaitan langsung dengan klik CTA di atas fold.

Pertanyaan Umum

Apakah harus ganti semua vh ke svh?

Tidak. Ganti hanya pada elemen yang harus utuh terlihat di mobile seperti hero section, sticky banner, dan first-screen modal. Elemen di tengah halaman tidak terdampak URL bar dan tetap aman pakai vh biasa.

Apa beda svh, lvh, dvh?

svh memakai tinggi viewport terkecil (UI browser terlihat). lvh memakai terbesar (UI browser tersembunyi). dvh menyesuaikan dinamis. Pakai svh untuk hero karena paling aman, dvh untuk modal full-screen, lvh untuk hero gambar background yang ingin selalu maksimal.

Bagaimana cara test dampaknya?

Pakai Microsoft Clarity untuk heatmap dan scroll depth. Bandingkan periode sebelum dan sesudah deployment minimal 14 hari untuk meredam efek hari libur dan kampanye iklan. Lihat juga panduan Web Vitals di web.dev untuk metrik teknis.

Apakah svh berdampak ke SEO?

Tidak langsung. Tapi penurunan bounce rate dan kenaikan time on page yang kami catat menjadi sinyal positif untuk algoritma Google. Plus, LCP lebih stabil karena hero tidak shift saat URL bar berubah.

Bagaimana fallback untuk browser lama?

Pakai dua deklarasi seperti contoh kode di atas. Browser lama membaca 100vh dan modern memakai 100svh. Tidak ada layout rusak.

Penutup: Detail Mobile yang Sering Dilupakan

Studi kasus Aris Setiawan ini bukan tentang trik konversi rahasia. Ini tentang detail yang sering dilupakan: bahwa landing page mobile-first di Indonesia, di mana 78% trafik datang dari HP, harus selalu memperhitungkan URL bar Safari dan Chrome. Ganti 100vh ke 100svh di project Next.js Anda hari ini. Tidak ada A/B test yang dibutuhkan, hasilnya akan terlihat dalam 14 hari pertama.