Digital Transformation
content-visibility (Properti CSS Skip Render)
TL;DR: content-visibility adalah properti CSS yang memberi tahu browser untuk melewatkan layout dan paint pada area yang belum terlihat di viewport. Untuk halaman panjang seperti blog dan landing page bisnis, properti ini bisa memangkas waktu render awal 20-50%. Dampak utamanya pada metrik LCP dan INP di Core Web Vitals.
Apa itu content-visibility?
content-visibility adalah properti CSS yang membuat browser menunda kerja render untuk elemen yang belum tampak. Dengan nilai auto, browser otomatis melewatkan elemen off-screen, dan baru memprosesnya saat hampir terlihat. Pendekatan ini melengkapi strategi lazy load, tapi bekerja di tingkat layout, bukan hanya media.
Nilai dan Pemakaian Umum
| Nilai | Efek | Kapan Dipakai |
|---|---|---|
auto | Browser otomatis lewati render off-screen | Section panjang, list panjang |
hidden | Sembunyikan total tanpa hapus DOM | Tab konten, modal |
visible | Default, semua dirender | Hero, area above-the-fold |
Pasangkan dengan contain-intrinsic-size untuk mencegah pergeseran tata letak saat browser membuka konten yang sebelumnya dilewati.
Kenapa Penting?
Untuk website bisnis Indonesia yang banyak diakses lewat 4G dengan perangkat mid-range, halaman dengan banyak section panjang sering tersangkut di main thread. Browser harus menghitung layout puluhan section sekaligus. Dengan content-visibility: auto, hanya section near-viewport yang dihitung. Implementasi yang dijelaskan di web.dev tentang content-visibility menunjukkan potensi pemangkasan waktu render awal yang signifikan, terutama untuk halaman blog panjang dan landing page dengan banyak komponen.
Pertanyaan Umum
Apakah aman untuk SEO?
Aman. Konten tetap ada di DOM dan dapat di-crawl Google. Yang ditunda hanya proses render di browser pengguna.
Apakah perlu polyfill?
Tidak ada polyfill resmi. Browser yang belum mendukung properti ini akan mengabaikan saja, jadi aman dipakai progressive enhancement.
Istilah Terkait