Critical CSS Extraction
CSS-in-JS 🔴 SeniorDefinition
Technique qui extrait le CSS necessaire au rendu initial (above the fold) et l'inline dans le HTML. Le reste est charge en asynchrone pour accelerer le First Paint.
Analogie
Mettre les vetements essentiels dans ton bagage a main et le reste en soute.
Exemple de code
<!-- HTML inline critical CSS -->
<head>
<style>.hero{display:flex;height:100vh;}</style>
<link rel="preload" href="/styles.css" as="style"
onload="this.rel='stylesheet'">
</head>
Cas d'usage
Ameliorer les metriques FCP et LCP en evitant le blocage du rendu par le CSS externe.