Digital Transformation
CSS content-visibility (Property auto & hidden)
TL;DR: CSS content-visibility adalah property yang memberi browser izin melewati layout, style, dan paint untuk elemen di luar viewport. Nilai auto paling sering dipakai karena element tetap searchable dan accessible. Pada halaman panjang dengan banyak section, property ini bisa memangkas rendering time sampai 50 persen tanpa mengubah markup.
Apa itu content-visibility?
content-visibility adalah property CSS standar yang mengontrol apakah browser merender konten sebuah elemen atau menundanya. Nilai utama: visible (default), auto, dan hidden. Nilai auto memberi browser sinyal bahwa elemen boleh dilewati saat di luar viewport, tapi tetap ikut find-in-page dan dapat diakses pembaca layar. Property ini sering dipasangkan dengan contain-intrinsic-size untuk reservasi ruang agar tidak terjadi layout shift, mirip prinsip yang dipakai Partial Prerendering Next.js.
Analogi sederhananya seperti kursi lipat di belakang ruangan. Browser hanya membuka kursi yang benar-benar diduduki pengunjung. Sisanya tetap ada, tapi tidak memakan biaya rendering sampai pengguna scroll ke sana.
Tiga Nilai Utama
| Nilai | Perilaku | Kapan dipakai |
|---|---|---|
| visible | Render normal | Default, tidak ada penghematan |
| auto | Skip render kalau di luar viewport, tapi tetap dalam DOM | Section panjang seperti FAQ, daftar produk, comment |
| hidden | Skip render total seperti display:none, tapi state DOM dipertahankan | Tab konten yang sering diaktifkan ulang |
Wajib pasang contain-intrinsic-size saat memakai auto agar scrollbar tetap stabil. Tanpa itu, scroll bar bisa lompat ketika konten mulai dipaint.
Kenapa Penting?
Halaman bisnis Indonesia sering panjang, mulai dari testimoni, FAQ, sampai katalog produk. Browser membuang waktu memproses elemen yang belum dilihat pembaca. Dengan content-visibility auto, time-to-paint dan input responsiveness bisa naik tanpa restrukturisasi besar. Ini menambah ruang anggaran kinerja yang berguna saat dipadukan dengan teknik seperti scheduler.yield() atau Adaptive Loading Strategy.
Pertanyaan Umum
Apakah aman untuk SEO?
Aman. Mesin pencari tetap membaca konten di dalam elemen content-visibility: auto karena nilainya tetap searchable. Yang ditunda hanya rendering visual.
Bedanya dengan lazy loading gambar?
Lazy loading hanya menunda load resource. content-visibility menunda layout dan paint seluruh section, jauh lebih hemat untuk DOM yang berat.
Istilah Terkait