Digital Transformation
Above-the-Fold CSS
TL;DR: Above-the-fold CSS adalah subset gaya yang hanya dibutuhkan untuk merender area yang langsung terlihat di layar sebelum pengguna menggulir. Mengirim CSS ini secara inline mempercepat render awal dan memperbaiki LCP, konsep yang erat dengan critical CSS.
Apa itu Above-the-Fold CSS?
Above-the-fold CSS adalah kumpulan aturan gaya yang diperlukan untuk menampilkan konten di "lipatan" pertama layar, yaitu bagian yang terlihat tanpa scroll. Istilah ini sering dipakai bergantian dengan critical CSS. Idenya: jangan biarkan browser menunggu seluruh file CSS terunduh sebelum menampilkan apa pun.
Secara default, CSS adalah render-blocking. Browser menunda menggambar halaman sampai stylesheet selesai diunduh dan diproses. Dengan menyalin gaya above-the-fold langsung ke dalam tag <style> di head, konten pertama bisa tampil lebih cepat tanpa menunggu request CSS eksternal.
Cara Menerapkannya
| Teknik | Penjelasan |
|---|---|
| Inline critical CSS | Sisipkan gaya above-the-fold di <style> dalam head |
| Defer sisanya | Muat CSS penuh secara async setelah render awal |
| Hindari over-inlining | Inline terlalu banyak justru membengkakkan HTML |
Banyak framework modern punya alat ekstraksi otomatis. Pada proyek Jamstack dengan headless CMS, proses build bisa mengekstrak critical CSS per halaman, sehingga setiap rute hanya membawa gaya yang relevan.
Kenapa Penting?
CSS yang render-blocking adalah penyebab umum konten lambat muncul, yang langsung memukul skor Core Web Vitals. Memisahkan gaya above-the-fold memberi pengguna sesuatu untuk dilihat lebih cepat, mengurangi kesan halaman kosong yang lama.
Pertanyaan Umum
Apakah above-the-fold CSS sama dengan critical CSS?
Praktis sama. Keduanya merujuk gaya minimal untuk render awal. Critical CSS adalah istilah teknis yang lebih luas dipakai.
Berapa besar idealnya?
Sebaiknya di bawah sekitar 14 KB agar muat dalam paket data pertama koneksi, walau angka ini bergantung kondisi jaringan.
Istilah Terkait