Reducing Unused CSS

Seiring berkembangnya proyek, file CSS menumpuk aturan yang tidak pernah cocok dengan elemen mana pun: sisa eksperimen, komponen yang telah diganti, atau utilitas yang di-copy dari template. CSS semacam itu tetap diunduh, tetap di-parse menjadi CSSOM, dan tetap menambah pekerjaan tahap style — semuanya sebelum piksel pertama digambar. Pada Chapter ini kita mengukur dampaknya, mencari aturan yang tidak terpakai dengan alat audit, dan menyusun kebiasaan yang membuat file CSS tetap ramping sejak awal.

Dampak CSS yang Tidak Terpakai #

Biaya CSS tak terpakai terjadi di tiga tempat. Pertama pada jaringan: byte yang diunduh tetap dibayar meskipun aturannya tidak berlaku. Kedua pada parsing: browser tetap memproses setiap selector dan deklarasi menjadi CSSOM. Ketiga pada tahap style: jumlah selector yang dicocokkan bertambah, dan rule matching untuk selector panjang semakin mahal.

Perlu juga diluruskan satu dugaan umum: browser tidak menghapus aturan yang tidak cocok secara otomatis saat halaman dimuat. Selector .kartu-promo tetap tersimpan di CSSOM berhari-hari meskipun tidak ada satu pun elemen dengan class tersebut — browser tidak tahu apakah JavaScript akan menambahkannya nanti. Pembersihan adalah tanggung jawab kita.

Mencari CSS yang Tidak Terpakai #

Cara tercepat untuk melihat masalahnya adalah panel Coverage di DevTools: buka menu More tools, pilih Coverage, muat ulang halaman, lalu amati kolom Unused Bytes pada file CSS — angka itu menunjukkan porsi aturan yang tidak terpakai pada muatan awal. Lighthouse menyediakan laporan serupa bernama “Reduce unused CSS” beserta estimasi penghematannya. Prosedur auditnya:

1. Buka halaman yang ingin diaudit, tekan F12, lalu buka panel Coverage.
2. Tekan ikon muat ulang di panel tersebut agar pengukuran dimulai sejak awal.
3. Baca baris file CSS: persentase unused adalah aturan yang tidak cocok dengan elemen mana pun selama sesi.
4. Klik baris file untuk melihat kode yang ditandai — bagian bergaris merah tidak pernah terpakai.

Setelah daftarnya jelas, pembersihan dilakukan di sumbernya: hapus aturan pada file CSS asli, bukan dengan menyembunyikannya. Untuk proyek yang memakai framework CSS besar, alat purge (misalnya pada tahap build) memangkas class yang tidak muncul di kode sumber secara otomatis; konfigurasinya perlu diarahkan ke seluruh file HTML, JavaScript, dan template agar aturan yang dibuat dinamis tidak ikut terpangkas.

Mencegah Menumpuk Kembali #

Pembersihan tanpa pencegahan hanya menunda masalah. Tiga kebiasaan berikut menjaga file tetap ramping:

Baris terakhir layak ditekankan: tanpa container query , tim sering membuat varian gaya seperti .kartu-besar, .kartu-sedang, dan .kartu-kecil untuk setiap breakpoint; dengan container query, satu komponen menyesuaikan dirinya sendiri sehingga varian-varian itu tidak pernah ditulis. Dasarnya telah kita pelajari pada Section Container Queries .

Contoh berikut adalah CSS yang dipakai demo chapter ini — tiga aturan, tanpa satu pun selector yang menganggur:

/* Gaya kartu yang benar-benar dipakai halaman demo Chapter Reducing Unused CSS. */
.kartu {
  width: 320px;
  padding: 16px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(226, 232, 240);
  border-radius: 8px;
}

.kartu .judul {
  color: rgb(15, 23, 42);
  font-size: 18px;
  margin: 0 0 8px;
}

.badge {
  display: inline-block;
  padding: 4px 12px;
  background-color: rgb(2, 132, 199);
  color: rgb(255, 255, 255);
  border-radius: 9999px;
  font-size: 13px;
}

Hasil di Browser:

Kartu tampil selebar 320px dengan padding 16px dan sudut membulat 8px,
judul kartu berwarna gelap rgb(15, 23, 42) berukuran 18px, dan badge
biru rgb(2, 132, 199) tampil inline-block. Seluruh nilai computed
sesuai karena setiap aturan pada file benar-benar dipakai.

Dengan file yang sudah ramping, langkah lanjutannya mengatur kapan dan dalam urutan apa file itu dimuat — topik Chapter berikutnya.

/* Gaya kartu yang benar-benar dipakai halaman demo Chapter Reducing Unused CSS. */
.kartu {
  width: 320px;
  padding: 16px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(226, 232, 240);
  border-radius: 8px;
}

.kartu .judul {
  color: rgb(15, 23, 42);
  font-size: 18px;
  margin: 0 0 8px;
}

.badge {
  display: inline-block;
  padding: 4px 12px;
  background-color: rgb(2, 132, 199);
  color: rgb(255, 255, 255);
  border-radius: 9999px;
  font-size: 13px;
}