Optimiser les performances d'un site Astro en production
Techniques avancées pour maximiser les Core Web Vitals d'un site Astro : lazy loading, prefetch, compression, cache headers et bundle splitting.
Les métriques qui comptent
Google mesure l'expérience utilisateur via les Core Web Vitals : LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) et INP (Interaction to Next Paint). Astro excelle natively sur ces métriques grâce à son architecture zero-JS par défaut.
1. Fonts locales plutôt que Google Fonts
Charger des polices depuis Google Fonts ajoute une requête externe bloquante. Avec @fontsource-variable/inter, la police est servie depuis votre propre domaine :
s import '@fontsource-variable/inter';
Gain typique : 200-400ms sur le LCP en première visite.
2. Images optimisées avec ![]()
Le composant d'Astro génère automatiquement les formats WebP/AVIF et les tailles responsives :
stro import { Image } from 'astro:assets'; <Image src={post.image} width={800} height={400} alt={post.title} />
3. Prefetch des pages au survol
Astro Client Router supporte le prefetch automatique :
js // astro.config.mjs prefetch: { prefetchAll: true, defaultStrategy: 'hover' }
Les pages sont pré-chargées dès que l'utilisateur survole un lien — navigation quasi-instantanée.
4. Bundle splitting par île React
Chaque composant React avec client:load génère un chunk JS séparé. Astro ne charge que le JS nécessaire pour les îles visibles — pas de bundle monolithique.
Résultats typiques
Sur ce boilerplate en production : LCP < 1.2s, CLS = 0, INP < 100ms.