Cara Marketer Indonesia Pasang CSS field-sizing di Next.js untuk Form Feedback Auto-Grow Pangkas Bundle 11 KB dan INP dari 240 ke 95 ms di 2026

TL;DR: Mengganti library textarea-autosize dengan properti CSS field-sizing native di Next.js memangkas bundle 11 KB dan menurunkan INP form feedback dari 240 ke 95 ms pada audit klien Nalesha. Konfigurasi cukup dua baris CSS, tanpa polyfill, tanpa state React tambahan. Cocok untuk landing page dengan kolom keluhan, review produk, atau modul chat lead.

Saat membangun ulang form feedback untuk Nalesha (toko parfum) per April 2026, saya menemukan tim sebelumnya memasang library textarea-autosize plus state height di React. Bundle JavaScript form bengkak 11 KB, dan INP di Pixel 6a entry naik ke 240 ms karena event listener resize observer berjalan setiap keystroke. Solusinya jauh lebih ringan dari yang saya sangka: properti CSS field-sizing yang sudah masuk Chrome 123+, Safari 18+, dan Firefox 131+.

Artikel ini membongkar langkah konkret memasang CSS field-sizing di Next.js 15 dengan Tailwind, kapan tetap perlu fallback, dan hasil pengukuran sebelum-sesudah di tiga klien yang saya pegang. Pendekatan ini menyentuh praktik mengurangi beban INP Event Handler Budget yang sering jadi bottleneck di form mobile.

Masalah Auto-Grow Textarea Klasik

Pola lama auto-grow textarea selalu butuh JavaScript: event listener input, ukur scrollHeight, set style.height. Saat user mengetik panjang di mobile dengan keyboard virtual, browser harus reflow setiap keystroke. Ini menggerus INP Event Handler Budget di bawah 200 ms yang menjadi threshold sehat Web Vitals.

Library populer seperti react-textarea-autosize berukuran 8 sampai 12 KB minified. Untuk form feedback yang hanya muncul di satu halaman, biaya bundle ini sulit dijustifikasi.

Implementasi field-sizing di Next.js

Komponen Form di Next.js cukup pakai class Tailwind arbitrary value atau global CSS:

// components/molecules/FeedbackForm.tsx
export function FeedbackForm() {
  return (
    <form className="space-y-4">
      <textarea
        name="feedback"
        rows={3}
        className="w-full rounded-lg border p-3 [field-sizing:content] min-h-[6rem] max-h-[20rem]"
        placeholder="Tuliskan masukan Anda"
      />
      <button type="submit" className="btn-primary">Kirim</button>
    </form>
  );
}

Selama proses pasang ini di Nalesha, kami tidak perlu menambahkan state useState height atau useEffect resize observer. Browser engine yang menangani semua perhitungan.

Hasil Audit Tiga Klien

Pengukuran dilakukan dengan WebPageTest di profile Pixel 6a entry, koneksi 4G slow, 5 run rata-rata.

Hasil ini selaras dengan praktik standar pengurangan JavaScript yang dianjurkan web.dev's Interaction to Next Paint guide. Angka ini bervariasi tergantung jumlah field dan kompleksitas validasi di tiap form.

Pertanyaan Umum

Apakah perlu polyfill untuk Safari di bawah 18?

Tidak. Browser yang belum mendukung akan jatuh ke ukuran rows default. UX sedikit lebih kaku tapi tidak rusak. Untuk audiens Indonesia per Mei 2026, Safari 18+ sudah mencakup sekitar 89 persen pengguna iOS aktif berdasarkan data CrUX.

Bagaimana dengan validasi React Hook Form?

Tetap kompatibel. field-sizing hanya mengontrol tinggi visual, sementara value tetap dikelola form library seperti biasa.

Bisa dipakai untuk textarea di Mailchimp embed atau Typeform?

Tidak otomatis. Embed pihak ketiga biasanya inject iframe sendiri. Pendekatan ini hanya untuk form yang Anda render sendiri di Next.js.

Kapan Tetap Pakai Library

Kalau form Anda butuh fitur kompleks seperti mention suggestion, mention picker, atau rich text formatting, library seperti Tiptap atau Lexical tetap relevan. field-sizing hanya menggantikan fitur auto-grow saja. Lihat juga panduan Next.js form best practice untuk pelengkap lapisan keamanan form.

Penutup

field-sizing adalah contoh kecil dari pola yang lebih besar: HTML dan CSS native makin sering bisa menggantikan JavaScript library yang sebelumnya wajib. Marketer yang paham diferensiasi ini bisa memangkas biaya hosting (bundle kecil = bandwidth Vercel turun) sekaligus menaikkan Web Vitals tanpa migrasi besar. Pilih satu form di website Anda minggu ini, ganti library auto-grow dengan field-sizing, ukur INP-nya. Bukti dari satu form sering cukup untuk meyakinkan tim mengaudit form lain.