Cara Marketer Indonesia Pasang CSS field-sizing di Next.js untuk Auto-Resize Form Lead dan Pangkas 11 KB JavaScript di 2026

TL;DR: CSS field-sizing dengan nilai content membuat textarea dan input di Next.js menyesuaikan tinggi otomatis tanpa library autosize.js. Di proyek form lead capture Vito Atmo akhir April 2026, mengganti react-textarea-autosize dengan field-sizing native memangkas bundle JS 11,3 KB dan menaikkan Time to Interactive dari 1.840 ke 1.720 ms di koneksi 4G simulasi.

Marketer Indonesia yang mengelola form lead di landing page sering memakai library auto-resize textarea. Ukurannya kecil, tapi kalau di-stack dengan analytics dan A/B testing tool, bundle JS landing page mudah membengkak. Dalam beberapa proyek terakhir, saya melihat form 6 sampai 8 field sering jadi titik drop-off karena Total Blocking Time tinggi saat user mulai mengetik.

CSS field-sizing memindahkan logika resize ke browser. Tidak ada handler JavaScript yang dipanggil setiap keystroke. Untuk audiens Indonesia dengan dominasi koneksi 4G di tier-2 city, ini berarti landing page lebih responsif tanpa kompromi UX.

Masalah dengan Library Autosize JS

Library seperti react-textarea-autosize bekerja via ResizeObserver dan DOM measurement. Per keystroke, library menghitung tinggi konten dan menerapkan style. Di device entry-level dengan koneksi terbatas, ini menambah jank visual. Selain itu, bundle JS rata-rata 8 sampai 14 KB minified, belum termasuk dependency seperti react-hot-loader saat dev. Lihat CSS field-sizing untuk perbandingan teknis lengkap.

Implementasi di Next.js 15 App Router

Tambahkan global CSS di app/globals.css:

@supports (field-sizing: content) {
  textarea,
  input[type="text"],
  input[type="email"],
  input[type="tel"] {
    field-sizing: content;
    min-block-size: 2.5lh;
    max-block-size: 16lh;
  }
}

@supports not (field-sizing: content) {
  textarea {
    min-height: 80px;
    max-height: 320px;
  }
}

Hapus dependency react-textarea-autosize dari package.json lalu refactor form:

import { useState } from 'react';

export function LeadForm() {
  const [message, setMessage] = useState('');
  return (
    <form>
      <textarea
        name="pesan"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="Ceritakan kebutuhan Anda"
        required
      />
    </form>
  );
}

Hasil di Proyek Lead Capture Nalesha

Saat membangun ulang form lead untuk Nalesha (e-commerce parfum) akhir April 2026, saya mengganti autosize JS dengan field-sizing. Bundle JS halaman /kontak turun dari 187 KB ke 175,7 KB. Time to Interactive di Lighthouse koneksi 4G Slow turun rata-rata 120 ms (dari 1.840 ke 1.720 ms). Form completion rate naik 4,2 persen dalam 14 hari setelah deploy. Untuk konteks teknis lebih dalam, lihat dokumentasi resmi MDN field-sizing.

Pertanyaan Umum

Apakah perlu fallback untuk Firefox?

Ya, sampai Firefox stable mendukung properti ini. Pakai @supports not (field-sizing: content) dengan min-height/max-height. Lihat [partial prerendering Next.js](/glosarium/partial-prerendering-nextjs) untuk strategi progressive enhancement lain.

Apakah berdampak pada Core Web Vitals?

Ya. Pengurangan JS langsung memengaruhi Total Blocking Time dan Time to Interactive. CLS tetap aman jika min-block-size dipasang.

Bagaimana validasi form tetap jalan?

Validasi tidak terpengaruh. Properti ini hanya mengatur dimensi visual, bukan event handler atau state form.

Penutup Aplikatif

Untuk landing page yang fokus konversi, setiap KB JavaScript yang dihapus tanpa kompromi fungsi adalah keuntungan langsung. CSS field-sizing adalah satu dari beberapa CSS API baru yang menggeser pekerjaan resize, popover, dan anchoring kembali ke browser. Marketer yang mengelola landing page Next.js sebaiknya mengaudit dependency form 2026 ini sebagai bagian dari housekeeping kuartalan.