CSS yang tidak efisien membuat halaman lambat terlihat dan terasa. Section ini menjelaskan alur rendering yang dipicu CSS, strategi loading stylesheet dan font, optimasi animasi, serta cara mengukur dampaknya.

# CSS Rendering Overview

Ikuti perjalanan CSS dari teks yang diunduh hingga menjadi piksel: parsing, CSSOM, style, layout, paint, dan composite.

Buka → # Reducing Unused CSS

Kenali dampak CSS yang tidak terpakai dan terapkan strategi audit, pembersihan, serta pengurangan varian gaya.

Buka → # Stylesheet Loading

Atur kapan dan bagaimana file CSS dimuat: link render-blocking, media query pada link, dan preload.

Buka → # Font Loading

Kelola pemuatan web font dengan font-display, preload, dan penyesuaian ukuran agar teks tampil cepat tanpa lompatan.

Buka → # Animation Performance

Ukur animasi yang berat lalu kendalikan dengan contain, content-visibility, dan will-change secara hemat.

Buka → # Avoiding Layout Thrashing

Kenali pola baca-tulis bergantian yang memaksa layout dihitung berulang dan perbaiki dengan pengelompokan lewat rAF.

Buka → # Measuring CSS Performance

Baca metrik render halaman dengan panel Performance DevTools dan PerformanceObserver untuk menemukan biaya CSS.

Buka →