Optimisation performance Astro : 15 techniques essentielles

Les fondamentaux de l’optimisation Astro

Astro excelle en performance par défaut, mais quelques optimisations peuvent faire la différence entre un site rapide et un site exceptionnellement rapide.

1. Images optimisées

<Image 
  src={image}
  alt="Description"
  width={800}
  height={600}
  loading="lazy"
  format="webp"
/>

2. CSS critique inline

Astro inline automatiquement le CSS critique, mais vous pouvez optimiser avec :

/* Critical CSS pour above-the-fold */
@media (min-width: 768px) {
  .hero { display: block; }
}

3. Preload des ressources critiques

<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

Techniques avancées

React Islands optimisées

Utilisez client:load uniquement quand nécessaire :

<!-- Charge immédiatement -->
<SearchComponent client:load />

<!-- Charge à l'idle -->
<Newsletter client:idle />

<!-- Charge au scroll -->
<Comments client:visible />

Bundle splitting intelligent

Astro split automatiquement, mais vous pouvez optimiser :

// Dynamic imports pour gros composants
const HeavyComponent = lazy(() => import('./HeavyComponent'))

Monitoring et métriques

Core Web Vitals tracking

import { onLCP, onFID, onCLS } from 'web-vitals'

onLCP(metric => console.log('LCP:', metric.value))
onFID(metric => console.log('FID:', metric.value))
onCLS(metric => console.log('CLS:', metric.value))

Targets recommandés

LCP < 1.5s : First paint rapide
FID < 150ms : Interactivité fluide
CLS < 0.05 : Layout stable

Conclusion

Avec ces techniques, vos sites Astro atteindront des performances exceptionnelles et des scores PageSpeed parfaits ! 🏃‍♂️⚡