Critical CSS
Critical CSS adalah CSS minimum yang dibutuhkan untuk merender konten above the fold (yang langsung terlihat). Dengan inline-kan critical CSS, halaman bisa ditampilkan tanpa menunggu file CSS eksternal selesai di-download.
Masalah CSS Blocking
CSS adalah render-blocking resource. Browser tidak akan menampilkan apapun sampai semua CSS file di-download dan di-parse. Jika file CSS besar (100KB+), ini menambah delay signifikan.
Solusi: Inline Critical CSS
<head>
<!-- Critical CSS inline di head -->
<style>
/* CSS minimum untuk above-the-fold content */
body { margin: 0; font-family: sans-serif; }
.header { background: #333; color: white; padding: 1rem; }
.hero { padding: 2rem; text-align: center; }
</style>
<!-- Sisa CSS di-load async -->
<link rel="preload" href="styles.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>Tools untuk Extract Critical CSS
critical— npm package yang otomatis extract critical CSScritters— Webpack plugin dari Google- Vite plugin:
vite-plugin-critical
