Critical CSS Extraction

CSS-in-JS 🔴 Senior

Definition

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.

Termes lies

#styling#interview#css-in-js