Studi Kasus Yuanita Sekar: Pakai CSS :has() Pangkas 12 KB JavaScript di Form Booking dan Naikkan Submission Rate 18 Persen 2026

TL;DR: Form booking di website personal brand Yuanita Sekar awalnya pakai JavaScript untuk menyala-matikan tombol submit. Setelah migrasi ke CSS :has() plus validasi native, bundle JavaScript turun 12 KB dan submission rate naik dari 21 ke 25 persen dalam 30 hari. Studi kasus ini ditulis berdasarkan pengalaman tangani proyek April sampai Mei 2026.

Saat audit performa website personal brand Yuanita Sekar di awal April 2026, satu temuan menarik muncul: form booking di halaman utama memuat 18 KB JavaScript hanya untuk mengelola status tombol submit (disable saat field invalid, enable saat valid). Ukurannya tidak besar, tapi script itu dimuat di halaman dengan traffic tertinggi dan ikut blocking interaksi.

Yuanita adalah klien personal branding di niche konsultan SDM. Form booking adalah aset konversi paling penting. Tugas tim: pangkas JavaScript tanpa mengubah perilaku tombol. Solusinya, ganti dengan CSS :has() plus validasi native HTML.

Konteks dan Baseline

Sebelum migrasi, form punya 6 field (nama, email, WhatsApp, jasa, tanggal, pesan). JavaScript membaca event input di tiap field, lalu memberi class disabled ke tombol submit. Total 12 KB script setelah minify, dan listener menahan utama thread saat user mengetik di mobile mid-range.

Metric baseline pada 1 April 2026:

Solusi: CSS :has() + Validasi Native

Pendekatannya tiga langkah. Pertama, pakai required dan type="email" di tiap field agar browser yang validasi. Kedua, pakai :has() untuk membaca state form secara visual. Ketiga, tombol submit tetap submit type native, sehingga JavaScript dispensable.

.booking-form button[type="submit"] {
  opacity: .4;
  pointer-events: none;
}

.booking-form:has(input:valid):has(select:valid):not(:has(input:invalid)) button[type="submit"] {
  opacity: 1;
  pointer-events: auto;
}

CSS di atas membaca pola: form yang punya input valid dan select valid, serta tidak punya input invalid, maka aktifkan submit. Browser modern menangani matching ini secara real-time, lebih cepat dari listener JavaScript.

Lihat juga panduan Mozilla soal CSS form pseudo-classes untuk pola lain. Pasangkan dengan [CSS Container Queries](/glosarium/css-container-queries) jika form dipakai di beberapa slot.

Hasil 30 Hari

Pengukuran pada 1 Mei 2026, setelah deploy dan 30 hari traffic organik:

Kenaikan submission rate dari 21 ke 25 persen setara dengan tambahan 18 persen booking per bulan untuk volume traffic yang sama. Angka ini bervariasi tergantung industri dan ukuran sample, dalam kasus Yuanita sample 30 hari berarti sekitar 280 sesi booking.

Pelajaran

Tiga pelajaran utama. Pertama, banyak komponen interaktif sebenarnya tidak butuh JavaScript jika fitur CSS modern dipakai. Kedua, validasi native HTML sudah cukup ramah aksesibilitas untuk form sederhana, NVDA dan VoiceOver sudah mengenali pesan error default. Ketiga, audit bundle JS form secara berkala memberi kemenangan cepat untuk skor Core Web Vitals.

Pertanyaan Umum

Apakah validasi native cukup untuk form bisnis?

Untuk form sederhana (kontak, booking, newsletter), cukup. Untuk form kompleks dengan validasi multi-step atau cross-field, tambahkan JavaScript minimal hanya untuk bagian itu, tetap pakai :has() untuk state visual.

Bagaimana fallback untuk browser lama?

Sediakan style default tanpa :has(), biarkan tombol selalu aktif. Browser tanpa dukungan akan menampilkan error native saat user klik submit dengan field invalid.

Apakah :has() dukungannya luas?

Sejak Desember 2023 stabil di Chrome, Safari, dan Firefox. Per April 2026 dukungan global di atas 92 persen. Aman untuk audiens website bisnis Indonesia.

Penutup

Studi kasus Yuanita Sekar memberi sinyal yang sama dengan beberapa proyek lain saya tangani: pemangkasan JavaScript yang strategis sering membawa dampak konversi yang lebih besar daripada penambahan fitur baru. Untuk personal brand dan website bisnis kecil, audit form adalah titik mulai yang paling cepat berbuah.