Critical CSS Extraction

CSS-in-JS 🔴 Senior

Définition

Technique qui extrait le CSS nécessaire au rendu initial (above the fold) et l'inline dans le HTML. Le reste est charge en asynchrone pour accélérer le First Paint.

Analogie

Mettre les vêtements 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

Améliorer les métriques FCP et LCP en évitant le blocage du rendu par le CSS externe.

Termes liés

#styling#interview#css-in-js