Digital Transformation
Critical CSS
Critical CSS adalah subset CSS yang dibutuhkan untuk merender konten di atas viewport awal, dipasang inline di head agar halaman terlihat lebih cepat dan menaikkan skor LCP.
TL;DR: Critical CSS adalah teknik mengekstrak CSS yang hanya dibutuhkan untuk konten above-the-fold, lalu menyuntikkannya inline di
<head>HTML supaya browser tidak menunggu file CSS eksternal sebelum render. Hasilnya: First Contentful Paint dan LCP turun, terutama di koneksi 3G dan 4G yang masih dominan di Indonesia.
Apa itu Critical CSS?
Critical CSS adalah subset stylesheet yang relevan untuk bagian halaman yang langsung terlihat saat pertama kali dibuka, biasanya 600-900 piksel pertama. Sisanya dimuat secara asinkron supaya tidak memblok render. Teknik ini erat kaitannya dengan largest contentful paint dan first contentful paint, dua metrik core web vitals yang dipakai Google sebagai sinyal SEO.
Analogi sederhana: bayangkan koran. Critical CSS adalah headline halaman depan, dicetak dulu supaya pembaca langsung paham isi. Sisi belakang koran masih dicetak, tapi pembaca sudah bisa membaca tanpa menunggu seluruh edisi selesai.
Cara Kerja dan Implementasi
Langkah umum implementasi:
- Identifikasi konten above-the-fold di tiap template (homepage, produk, artikel).
- Ekstrak rule CSS yang menyentuh elemen tersebut, biasanya pakai tools seperti Critters, Penthouse, atau Next.js inline-css.
- Sisipkan inline di
<head>, ukuran ideal di bawah 14 KB supaya muat dalam paket TCP awal. - Muat sisanya dengan
<link rel="preload" as="style" onload="this.rel='stylesheet'">. - Validasi tidak ada flash of unstyled content via Lighthouse dan WebPageTest.
Kenapa Penting?
Praktik standar di industri menunjukkan critical CSS bisa memangkas LCP 0,4-1,2 detik di koneksi seluler menengah, range yang signifikan untuk pasar Indonesia di mana 4G masih dominan dan 5G belum merata. Ketika saya membantu klien parfum Nalesha mempercepat halaman koleksi, kombinasi critical CSS dan font preloading menurunkan LCP dari 3,1 detik menjadi 2,0 detik. Dokumentasi teknis bisa dibaca di web.dev: Extract critical CSS.
Pertanyaan Umum
Apakah Next.js sudah otomatis pakai critical CSS?
Sebagian. Next.js mengekstrak CSS module per halaman saat build, tapi tidak otomatis melakukan above-the-fold extraction. Untuk hasil maksimal, gabungkan dengan plugin seperti critters atau lakukan inline manual untuk template kunci.
Apakah perlu untuk semua halaman?
Prioritaskan halaman dengan trafik tinggi atau konversi tinggi (homepage, landing page kampanye, halaman produk top-seller). Halaman admin atau internal tidak perlu.