Cara Marketer Indonesia Pasang content-visibility di Next.js untuk Pangkas LCP Halaman Panjang dari 3,8 ke 1,9 Detik di 2026

TL;DR: Pada landing page Indonesia yang berisi 8 section lebih (hero, testimonial, FAQ, pricing, dst), browser mobile menghabiskan 60-70 persen waktu render untuk konten di luar viewport. Properti CSS content-visibility: auto melewatkan rendering subtree off-screen, memangkas LCP dari 3,8 ke 1,9 detik di Moto G Power throttled 3G pada uji internal Vito Atmo per Mei 2026.

Dalam beberapa proyek terakhir, saya melihat pola yang sama berulang. Landing page B2B Indonesia rata-rata punya 10 section: hero, value proposition, social proof, fitur, demo, testimonial, pricing, FAQ, kontak, footer. Lighthouse selalu memberi skor merah di LCP dan TBT, padahal markup sudah optimal. Penyebabnya bukan gambar, tapi paint cost total seluruh DOM saat first render. Browser tidak tahu bahwa user belum tentu scroll sampai footer.

content-visibility: auto menyelesaikan ini dalam tiga baris CSS. Dukungan browser sudah di atas 90 persen pengguna global per 2025 menurut Can I Use, termasuk Safari iOS 18.0 keatas.

Masalah: Render Cost Halaman Panjang

Setiap section landing page memicu tiga fase rendering: layout, paint, dan composite. Untuk halaman dengan 10 section, browser harus menyelesaikan ketiganya untuk semua section sebelum menandai page sebagai interactive, meski user hanya melihat hero. Di mobile Indonesia rata-rata (Moto G atau setara, koneksi 4G ringan), proses ini menghabiskan 800-1500 ms hanya untuk paint.

Solusi: Render On-Demand via CSS

Lihat penjelasan rinci di glosarium content-visibility. Konsep intinya: content-visibility: auto memberi tahu browser untuk melewati layout dan paint subtree yang masih di luar viewport. Saat user scroll mendekat (sekitar 50 vh sebelum masuk viewport), browser otomatis merender bagian itu.

Kunci yang sering dilupakan adalah contain-intrinsic-size. Tanpa nilai estimasi, browser asumsikan tinggi section nol dan scrollbar jadi loncat-loncat saat konten muncul, merusak CLS.

Implementasi di Next.js

Saya pakai pendekatan utility class Tailwind v4. Di globals.css:

.cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}

Di komponen organism React, terapkan ke wrapper section non above-the-fold:

export default function PricingSection() {
  return (
    <section className="cv-auto py-24">
      {/* konten pricing */}
    </section>
  );
}

Section hero tidak diberi class ini karena harus render instan untuk LCP. Mulai dari section kedua ke bawah, semua aman dipasang.

Studi Kasus Yuanita Sekar

Saat memperbarui personal brand page Yuanita Sekar pada April 2026, landing page punya 11 section dengan rata-rata 4 gambar per section. Sebelum optimasi, LCP mobile 3,8 detik dan INP 320 ms di PageSpeed Insights. Setelah memasang content-visibility: auto di 9 section non-hero plus contain-intrinsic-size yang tepat, LCP turun ke 1,9 detik dan INP ke 140 ms dalam dua hari. Tidak ada perubahan markup, tidak ada hapus konten, tidak ada lazy load JavaScript tambahan.

Pola yang sama dipakai di proyek Atmo LMS untuk halaman katalog kursus yang berisi 40+ card. Memasang content-visibility: auto di wrapper card memangkas Time to Interactive dari 5,2 ke 2,4 detik.

Pertanyaan Umum

Apakah aman dipakai di semua browser?

Aman. Browser yang tidak mendukung (Firefox lama, beberapa browser dalam app) akan mengabaikan properti tanpa breaking. Halaman tetap render normal.

Apakah memengaruhi SEO atau crawling?

Tidak. Konten tetap ada di DOM dan tetap di-crawl Googlebot. Yang ditunda hanya rendering visual untuk user, bukan keberadaan konten di markup.

Bagaimana mengukur dampaknya?

Pakai Lighthouse mobile sebelum dan sesudah, fokus di LCP, INP, dan Total Blocking Time. Selain itu Performance tab DevTools menunjukkan "Rendering" timeline yang lebih pendek.

Apa bedanya dengan lazy loading gambar?

Lazy loading gambar hanya menunda load gambar. content-visibility menunda layout, paint, dan composite seluruh subtree DOM, termasuk teks, gambar, dan komponen interaktif. Dua optimasi ini saling melengkapi.

Apakah cocok untuk SPA atau hanya SSR/SSG?

Cocok untuk keduanya. Properti ini CSS murni, tidak bergantung framework atau strategi rendering.

Penutup

content-visibility adalah salah satu properti CSS dengan rasio effort-to-impact paling tinggi yang muncul dalam lima tahun terakhir. Tiga baris CSS, dampak terukur di Core Web Vitals, tidak ada risiko regresi. Pasang di setiap section non above-the-fold sebagai default proyek baru.