Critical Path CSS

Definition

Le chemin critique de rendu CSS identifie les ressources CSS qui bloquent le premier affichage. Optimiser ce chemin implique d'inliner le CSS critique et de différer le reste.

Analogie

Comme le chemin critique en gestion de projet : les tâches sur ce chemin déterminent le délai total.

Exemple de code

<!-- 1. CSS critique inliné -->
<style>/* Above-the-fold styles */</style>
<!-- 2. CSS non-critique en async -->
<link rel="preload" href="styles.css" as="style">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

Cas d'usage

Réduire le temps de First Contentful Paint en éliminant le CSS render-blocking.

Termes lies