Digital Transformation
content-visibility (CSS Property)
TL;DR: Properti CSS
content-visibility: automembuat browser melewatkan layout dan paint untuk elemen yang masih di luar viewport, kemudian merender ulang otomatis saat elemen mendekat. Pada halaman panjang dengan banyak section, properti ini memangkas initial rendering hingga 30-60 persen, langsung memperbaiki LCP dan INP tanpa perubahan markup.
Apa itu content-visibility?
content-visibility adalah properti CSS dari spesifikasi CSS Containment Module Level 2 yang memungkinkan browser menunda rendering subtree DOM sampai diperlukan. Nilai auto paling umum digunakan: browser otomatis melewati rendering subtree yang ada di luar viewport, lalu memunculkannya saat user scroll mendekat. Properti ini berbeda dari display: none karena konten tetap dapat ditemukan untuk Find on Page, screen reader, dan accessibility tree, tetapi rendering-nya ditunda. Dampak utamanya adalah perbaikan Core Web Vitals di halaman panjang.
Cara Pakai dan Trade-off
| Skenario | Rekomendasi | Catatan |
|---|---|---|
| Section panjang di landing | content-visibility: auto + contain-intrinsic-size: 0 500px | Beri estimasi tinggi agar scrollbar stabil |
| Card grid panjang | content-visibility: auto di tiap card wrapper | Kurangi paint cost |
| Modal/overlay tersembunyi | Gunakan display: none | Bukan target content-visibility |
| Elemen above-the-fold | Jangan dipakai | Tetap render normal |
contain-intrinsic-size wajib disertakan agar browser tahu tinggi placeholder. Tanpa itu, browser asumsikan tinggi nol dan scrollbar jadi loncat-loncat saat konten muncul. Properti ini didukung Chrome, Edge, dan Safari (sejak 18.0 di 2024). Di browser yang tidak mendukung, halaman tetap berfungsi normal.
Kenapa Penting?
Untuk halaman panjang berisi banyak section seperti artikel, dokumentasi, atau katalog, content-visibility adalah optimasi paling murah dengan dampak paling besar. Cukup tambahkan beberapa baris CSS. Bagi marketer Indonesia yang punya landing page panjang dengan testimonial, FAQ, dan pricing tier, properti ini sering memangkas Time to Interactive di Lighthouse mobile lebih dari 40 persen. Untuk integrasi di Next.js, cukup tambahkan utility class Tailwind atau styled-jsx, tidak perlu library tambahan.
Pertanyaan Umum
Apakah content-visibility memengaruhi SEO?
Tidak. Konten di dalam subtree tetap ada di DOM, tetap di-crawl Googlebot, dan tetap terindeks. Yang ditunda hanya rendering visual, bukan keberadaan konten.
Apakah aman dipakai di production sekarang?
Aman. Dukungan browser sudah di atas 90 persen pengguna global per 2025. Browser lama akan abaikan properti tanpa breaking.
Istilah Terkait