Critical CSS
HTML / CSS 🟡 MidDefinition
Technique d'inlining du CSS nécessaire au rendu above-the-fold directement dans le <head> HTML. Le reste du CSS est chargé de manière asynchrone pour ne pas bloquer le premier rendu.
Analogie
Comme mettre les ingrédients de l'entrée en premier sur le plan de travail et préparer le dessert plus tard.
Exemple de code
<head>
<style>/* Critical CSS inliné */
.header { display: flex; }
.hero { height: 100vh; }
</style>
<link rel="preload" href="full.css" as="style"
onload="this.rel='stylesheet'">
</head>Cas d'usage
Optimiser le FCP et LCP en éliminant le CSS bloquant le rendu pour le contenu visible initialement.
Anti-pattern
Inliner tout le CSS du site au lieu de seulement le CSS above-the-fold.