Critical CSS — Performance

Critical CSS Critical CSS adalah CSS minimum yang dibutuhkan untuk merender konten above the fold (yang langsung terlihat). Dengan inline-kan critical CSS…

Critical CSS adalah CSS paling sedikit yang dibutuhkan untuk menggambar bagian halaman yang langsung kelihatan waktu dibuka, disebut above the fold (di atas "lipatan", batas bawah layar pertama). CSS itu ditulis langsung di <style> di dalam HTML, dan sisanya dimuat belakangan tanpa menahan render. Bayangin pindahan rumah. Barang untuk malam pertama, seperti sikat gigi dan baju ganti, kamu bawa sendiri di koper kecil. Sisanya diangkut truk yang baru datang besok. Kamu bisa langsung tidur malam itu tanpa menunggu truk. Koper kecil itu CSS kritis, truknya styles.css.

🧪 Tebakan cepat: di halaman contoh, styles.css (120 KB) menahan render sampai 1.200 ms. Kalau kamu meng-inline CSS header dan hero ke <style>, tapi <link rel="stylesheet">-nya masih biasa, first paint jadi berapa: 350 ms, 800 ms, atau tetap 1.250 ms? Jawabannya ada di bagian "Dua langkah, bukan satu".

Kenapa CSS menahan render

Di pelajaran Critical Rendering Path kamu sudah tahu: <link rel="stylesheet"> itu render-blocking. Browser gak mau menggambar halaman sebelum semua CSS-nya datang, supaya halaman gak tampil polos lalu tiba-tiba berubah bentuk. Masalahnya, styles.css biasanya berisi style untuk seluruh situs: footer, modal, halaman lain. Layar pertama cuma butuh sebagian kecilnya.

Halaman contoh di Lab, toko kopi dengan header, hero, dan daftar produk (angka simulasi, jaringan HP yang lambat):

Dua langkah, bukan satu

Cara First paint Header dan hero di first paint
link biasa, tanpa CSS kritis 1.250 ms rapi
CSS kritis di <style>, link masih biasa 1.250 ms rapi
link ditunda, tanpa CSS kritis 350 ms polos, lalu loncat di 1.250 ms
CSS kritis di <style> dan link ditunda 350 ms rapi

Itu jawaban tebakannya: tetap 1.250 ms. Selama <link rel="stylesheet"> masih biasa, browser tetap menunggu styles.css, berapa pun CSS yang sudah di-inline. Sebaliknya, menunda link tanpa CSS kritis bikin halaman tampil polos lalu meloncat waktu styles.css datang. Loncatan ini disebut FOUC (flash of unstyled content), dan pergeserannya dihitung CLS. Critical CSS butuh dua langkah sekaligus: inline yang kritis, lalu tunda sisanya.

Kode: CSS kritis, lalu sisanya ditunda

<head>
  <style>
    /* CSS kritis: cuma header dan hero, 6 KB */
    body { margin: 0; font-family: system-ui, sans-serif; }
    .header { display: flex; height: 56px; padding: 0 16px; background: #1e293b; color: #fff; }
    .hero { padding: 48px 16px; text-align: center; background: #fef3c7; }
  </style>

  <!-- Sisanya: di-download tanpa menahan render -->
  <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">
  <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>

Cara kedua yang sama-sama non-blocking, pakai salah satu saja:

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

Apa yang masuk CSS kritis

Jangan memilihnya dengan tangan. Tool critical (npm) membuka halaman di browser tanpa tampilan (headless) pada ukuran layar tertentu, lalu mengambil CSS yang dipakai elemen di atas lipatan. Beasties (penerus Critters) bekerja saat build: membaca HTML hasil build, meng-inline CSS yang dipakai HTML itu, dan memuat sisanya tanpa menahan render.

Untung ruginya

⚠️ Jebakan yang sering ketemu

TL;DR: Critical CSS adalah CSS minimum untuk menggambar konten above the fold. Taruh CSS itu di <style> di <head>, lalu muat sisanya tanpa menahan render: <link rel="stylesheet" media="print" onload="this.media='all'"> atau <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">, ditambah <noscript> sebagai cadangan. Dua langkah itu harus bareng: inline saja gak mengubah first paint (tetap 1.250 ms), tunda saja bikin FOUC. Di contoh ini keduanya menurunkan first paint dari 1.250 ms ke 350 ms. Jaga CSS kritis kecil, HTML plus CSS kritis sekitar 14 KB, dan ekstrak pakai tool seperti critical atau Beasties.

Yang akan kamu pelajari