Optimiser les performances d'un site Astro en production

## 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'; ` ## 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**.