Belajar CSS - Performance CSS dan Rendering Optimal

#Pendahuluan

CSS yang indah namun lambat tetap buruk. Episode 22 menutup rangkaian teknik styling dengan performance CSS: cara browser merender halaman, bagaimana CSS memperlambat atau mempercepat proses itu, dan apa yang bisa kalian lakukan agar stylesheet siap produksi. Browser mengubah HTML dan CSS menjadi piksel melalui beberapa tahap — parse, build CSSOM, hitung layout, catat, dan komposit. Setiap properti yang kalian animasikan atau ubah memicu tahapan yang berbeda, dan sebagian jauh lebih mahal daripada yang lain. Mengapa penting? Performa adalah pengalaman pengguna. Halaman yang lambat membuang konversi dan memperburuk peringkat pencarian. Dengan memahami pipeline render, kalian bisa menulis CSS yang halus sekaligus cepat.

#Alur Render Browser

Pipeline render berjalan bertingkat, dan properti yang dipakai menentukan tahap mana yang terpicu:

pipeline.css

/* Memicu layout: mahal */
.kotak { width: 50%; top: 20px; }
/* Memicu paint: sedang */ .bayangan { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
/* Hanya komposit: murah */ .gerak { transform: translateX(24px); opacity: 0.5; }

Mengubah width, top, atau margin memaksa browser menghitung ulang layout seluruh subtree — paling mahal. Mengubah warna atau bayangan memicu paint. transform dan opacity hanya berjalan pada tahap komposit, sehingga animasi tetap mulus di 60 frame per detik.

transisi-aman.css

.geser {
  transition: transform 0.2s ease;
}
.geser:hover {
  transform: translateY(-4px);
}

Untuk animasi, selalu utamakan transform dan opacity. Bila harus mengubah ukuran, pertimbangkan scale dari transform alih-alih width dan height agar tidak memicu layout.

#Menghindari Reflow dan Layout Thrashing

Reflow terjadi saat layout dihitung ulang. Membaca lalu menulis dimensi secara bergantian memperparahnya menjadi layout thrashing:

thrashing.js

// Buruk: baca, tulis, baca, tulis
const items = document.querySelectorAll(".item");
for (const item of items) {
  const tinggi = item.offsetHeight;
  item.style.height = tinggi + "px";
}

Kode di atas membaca dan menulis offset di tiap iterasi, memaksa browser menghitung ulang layout berulang kali. Perbaiki dengan memisahkan baca dan tulis:

batch.js

const items = document.querySelectorAll(".item");
const tinggiSemua = [];
for (const item of items) {
  tinggiSemua.push(item.offsetHeight);
}
for (let i = 0; i < items.length; i++) {
  items[i].style.height = tinggiSemua[i] + "px";
}

Baca semua nilai dulu, lalu tulis semua perubahan. Browser menggabungkan penulisan dalam satu pass layout, menghindari kalkulasi ganda. Hindari juga membaca dimensi di dalam event seperti scroll dan resize.

#Memuat Font dengan Cepat

Font besar menghambat rendering pertama. Properti font-display mengontrol perilakunya:

font.css

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
}
body {
  font-family: "Inter", system-ui, sans-serif;
}

font-display: swap menampilkan fallback segera lalu menukarnya saat font siap — teks tetap terbaca tanpa blok kosong. Gunakan format woff2 yang jauh lebih kecil, dan minta hanya subset karakter yang benar-benar dibutuhkan.

font-size.css

p {
  font-size: 1rem;
  line-height: 1.6;
}
h1,
h2,
h3 {
  font-wrap: balance;
}

Ukuran font dan ruang baris yang stabil membantu browser menyusun teks sekali saja. font-wrap: balance merapikan baris terakhir judul agar layout tidak melompat saat font tertukar.

#Minifikasi dan Bundling

Stylesheet produksi harus sekecil dan secepat mungkin:

kecil.css

/* Kode sumber yang ditulis rapi */
.card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
}

Minifier menghapus spasi, komentar, dan menyusutkan nama:

bunx lightningcss --minify style.css -o style.min.css
bunx lightningcss --minify --targets '>= 0.5%' style.css -o style.min.css

LightningCSS, esbuild, dan PostCSS meminifikasi serta menandai properti yang perlu prefix vendor. Gunakan media query yang sama untuk menggabungkan aturan, dan pertimbangkan membagi file CSS agar tiap halaman hanya memuat yang dibutuhkan.

gzip -k style.min.css
brotli -k style.min.css

Sajikan CSS dengan kompresi gzip atau brotli di server. Bersama cache header yang tepat, file yang sudah dimuat tidak diunduh ulang pada kunjungan berikutnya.

#Content-Visibility dan Containment

Untuk halaman panjang, content-visibility menunda rendering area di luar layar:

content-visibility.css

.artikel {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}
.diagram {
  content-visibility: hidden;
  contain-intrinsic-size: 0 0;
}

content-visibility: auto membuat browser melewati pekerjaan render untuk bagian yang belum terlihat, lalu merendernya saat di-scroll. contain-intrinsic-size memberi tahu perkiraan ukuran sehingga scrollbar tidak melompat. Fitur ini mempercepat halaman konten panjang secara dramatis.

#Latihan: Mengukur dan Memperbaiki

css/style.css

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; }
.hero { min-height: 60vh; display: flex; align-items: center; justify-content: center; background-color: #0f172a; color: white; padding-inline: 24px; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-wrap: balance; }
.daftar { display: grid; gap: 16px; padding: 24px; }
.item { content-visibility: auto; contain-intrinsic-size: auto 120px; padding: 24px; border: 1px solid #e2e8f0; border-radius: 12px; }
@media (min-width: 700px) { .daftar { grid-template-columns: repeat(2, 1fr); } }

index.html

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Performance CSS</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <section class="hero">
      <h1>Halaman yang Cepat</h1>
    </section>
    <main class="daftar">
      <div class="item">Konten pertama</div>
      <div class="item">Konten kedua</div>
      <div class="item">Konten ketiga</div>
      <div class="item">Konten keempat</div>
    </main>
  </body>
</html>

Jalankan npx serve . lalu buka panel Performance di DevTools dan rekam interaksi scroll. Bandingkan waktu sebelum dan sesudah menerapkan content-visibility. Jalankan juga bunx lightningcss --minify css/style.css -o css/style.min.css dan bandingkan ukuran file keduanya.

#Kesalahan Umum dan Solusinya

#Menganimasikan Properti yang Mahal

width, height, dan top memicu layout di tiap frame. Gunakan transform dan opacity untuk gerakan, dan simpan nilai layout untuk perubahan yang jarang.

#Font Tanpa Font-Display

Tanpa font-display, browser bisa menampilkan teks tak terlihat sambil menunggu font. Set font-display: swap agar teks selalu terbaca.

#Mengabaikan Ukuran Intrinsik

content-visibility tanpa contain-intrinsic-size membuat scrollbar melompat saat konten dirender. Selalu sertakan perkiraan ukuran.

#Penutup

Inti yang harus dibawa pulang:

• Pipeline render berjalan dari CSSOM, layout, paint, hingga komposit.
• transform dan opacity hanya memicu komposit dan paling murah untuk animasi.
• Pisahkan pembacaan dan penulisan dimensi untuk mencegah layout thrashing.
• font-display: swap dan format woff2 mempercepat pemuatan teks.
• Minifikasi, kompresi, dan cache header memperkecil transfer CSS.
• content-visibility menunda rendering bagian di luar layar. Series Belajar CSS memasuki babak akhir. Di episode terakhir selanjutnya kita akan membahas membuat stylesheet siap produksi dan gaya maintenance-friendly — menyusun design system, memvalidasi aksesibilitas, dan menetapkan proses kerja agar seluruh kemampuan yang kalian pelajari di series ini terangkum dalam proyek nyata yang siap diluncurkan.