Phase 5 — Outillage & production
#19 Performance
CSS critique, lazy loading, minification
Pourquoi la performance CSS compte
Le CSS peut impacter significativement la vitesse de chargement et l'expérience utilisateur. Du CSS non optimisé provoque du blocage de rendu, des décalages de mise en page et des temps de peinture lents.
CSS critique
Le CSS critique est le CSS minimal nécessaire pour afficher le contenu visible. Intégrez-le en ligne pour un premier affichage plus rapide :
Stratégie CSS critique
<!-- CSS critique en ligne dans <head> -->
<style>
body { font-family: system-ui, sans-serif; margin: 0; }
.hero { min-height: 100vh; display: grid; place-items: center; }
</style>
<!-- Charger le reste du CSS de manière asynchrone -->
<link rel="preload" href="style.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>Minification CSS
Minifier avec cssnano
npm install cssnano
// postcss.config.js
module.exports = {
plugins: [
require('autoprefixer'),
require('cssnano')({ preset: 'default' }),
],
}Chargement paresseux des images
Lazy loading natif
<!-- Lazy loading natif -->
<img src="photo.jpg" alt="Photo" loading="lazy" width="800" height="600">
<!-- Charger immédiatement les images au-dessus de la ligne de flottaison -->
<img src="hero.jpg" alt="Hero" loading="eager" fetchpriority="high">Éviter les décalages de mise en page
Prévenir le CLS
/* Toujours définir width et height sur les images */
img {
max-width: 100%;
height: auto;
}
/* Utiliser aspect-ratio */
.video-wrapper {
aspect-ratio: 16 / 9;
width: 100%;
}Sélecteurs efficaces
Performance des sélecteurs
/* ✓ Bien : sélecteurs simples */
.card-title { }
.nav-link { }
/* ✗ Éviter : sélecteurs profondément imbriqués */
.page .content .sidebar .widget .title { }À vous de jouer
Essayez les commandes ci-dessous :
terminal — npm