File CSS yang ramping saja belum cukup — urutan dan cara memuatnya turut menentukan seberapa cepat halaman tampil. Karena CSS di <head> bersifat render-blocking, setiap <link rel="stylesheet"> yang tidak perlu menunda piksel pertama seluruh halaman. Pada Chapter ini kita menata urutan pemuatan: apa yang harus tiba lebih dulu, apa yang bisa ditunda, dan trik media="print" yang membuat stylesheet tertentu keluar dari jalur kritis. Dasar penyambungan file CSS telah kita bahas pada Chapter Menghubungkan File CSS ; di sini fokusnya adalah waktu muat.

Aturan Dasar: Kritis Dulu, Sisanya Menyusul #

Semua <link rel="stylesheet"> di <head> menahan render sampai selesai diunduh dan di-parse. Dua konsekuensi praktisnya. Pertama, letakkan <link> di <head> — bukan di akhir <body> — untuk CSS yang menentukan tampilan awal, agar pengunduhan dimulai sesegera mungkin. Kedua, pisahkan CSS kritis dari CSS yang tidak dibutuhkan pada tampilan pertama.

Pemisahan paling sederhana memakai atribut media pada link. Browser tetap mengunduh stylesheet dengan media query yang tidak cocok, tetapi tidak menjadikannya render-blocking karena aturan itu tidak berlaku untuk kondisi saat ini:

html urutan-muat.html 
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="gaya-utama.css">
  <link rel="stylesheet" href="gaya-cetak.css" media="print">
</head>

Mari kita telaah kedua baris <link>:

  1. gaya-utama.css tanpa atribut media: berlaku untuk semua kondisi, sehingga bersifat render-blocking — piksel pertama menunggu file ini selesai. Inilah tempat gaya tampilan awal.
  2. gaya-cetak.css dengan media="print": berlaku hanya saat pencetakan. Browser tetap mengunduhnya (cache bisa dipakai ketika pengguna mencetak), tetapi tidak menahan tampilan di layar.

Hasil di Browser:

text 
Panel tampil selebar 420px dengan sudut 8px dari gaya-utama.css; badge
biru rgb(2, 132, 199) berstatus inline-block. Kotak cetak yang hanya
diatur gaya-cetak.css tidak menerima gayanya di layar: warna teksnya
kembali ke nilai warisan body rgb(51, 65, 85) dan latar tetap transparan
rgba(0, 0, 0, 0). Saat halaman dicetak, gaya ungu media="print" baru
diterapkan.

Pola yang sama berlaku untuk media query layar: stylesheet khusus ponsel dapat diberi media="(max-width: 600px)" sehingga desktop tidak menunggunya. Perhatikan bahwa penghematan terjadi pada jalur render, bukan pada ukuran unduhan — file tetap diunduh.

Memuat Lebih Awal dengan preload #

Ada kasus di mana file penting baru ditemukan terlambat: CSS yang dimuat dari JavaScript, atau font yang dinyatakan jauh di dalam stylesheet. preload memberi tahu browser untuk mengunduh sumber daya itu segera, sebelum parser menemukan pemakainya:

html 
<link rel="preload" href="tema.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="tema.css"></noscript>

Pola di atas memuat tema.css tanpa menahan render: atribut as="style" menyatakan jenis sumber daya, dan ketika unduhan selesai, handler onload mengubah rel menjadi stylesheet sehingga gaya diterapkan. Elemen <noscript> menjaga halaman tetap bergaya bila JavaScript dimatikan. Gunakan pola ini hanya untuk stylesheet yang benar-benar tidak dibutuhkan pada gambar pertama; stylesheet kritis tetap lebih baik dimuat secara normal agar urutannya pasti.

Memeriksa Jalur Muat di DevTools #

Prosedur singkat untuk memeriksa strategi muat pada halaman kita sendiri:

  1. Buka panel Network, lalu saring berdasarkan tipe css.
  2. Muat ulang halaman dengan cache dimatikan (kotak Disable cache aktif).
  3. Perhatikan kolom Waterfall: stylesheet render-blocking berada di jalur sebelum event FCP (first contentful paint).
  4. Bandingkan prioritas (kolom Priority): file kritis berprioritas Highest, sedangkan media="print" atau preload yang belum dipakai berprioritas lebih rendah.

Demo chapter ini meniru pola dasarnya: satu stylesheet utama dimuat sebagai link biasa dan diterapkan di layar, satu stylesheet cetak dimuat dengan media="print" dan dapat dibuktikan tidak aktif di layar melalui nilai computed pada kotak cetak.

Setelah jalur muat tertata, satu jenis sumber daya masih sering menjadi titik lambat terbesar: web font. Strategi memuatnya kita bahas pada Chapter berikutnya.