Consultant web performance expert Astro
Tirer la performance maximale des sites Astro
Astro est conçu pour la performance dès l'origine : HTML par défaut, JavaScript opt-in via islands. C'est aujourd'hui l'un des frameworks les plus rapides du marché, encore faut-il en exploiter les bonnes briques. J'interviens sur les architectures Astro pour valider les choix et pousser le LCP au maximum.
Ils me font confiance
Les leviers à valider ou pousser sur Astro
Astro est performant par défaut, mais les choix d'architecture déterminent le résultat final.
🏝️ Islands hydratées trop largement avec client:load
client:load hydrate immédiatement, contre l'esprit Astro. client:idle ou client:visible préservent le main thread pour le LCP. L'audit identifie les islands à recalibrer.
📦 Bundle JS trop lourd malgré Astro
Astro ne protège pas d'une dépendance lourde embarquée dans une island. Une island React qui importe Material-UI complet ajoute 200 KB. L'audit des islands chiffre chaque contributeur.
🖼️ Image component Astro non utilisé partout
Le <Image> component automatise AVIF/WebP, lazy loading, srcset. Sa généralisation est le levier LCP le plus rapide à appliquer.
📚 Content collections mal exploitées
Les content collections Astro permettent typing TS + validation Zod + rendu optimisé. Une intégration partielle laisse de la performance sur la table.
🔄 View transitions non activées sur navigation interne
Les view transitions natives donnent un sentiment SPA sans le coût. Sur des sites e-commerce léger ou contenus, c'est un gain UX et perf gratuit.
🌐 SSR Astro à la place d'output static
Astro peut générer en mode static (sites statiques au build) ou SSR (chaque requête). Le mode static donne le TTFB optimal. Le mode SSR n'est justifié que pour le contenu vraiment dynamique.
Méthodologie d'optimisation Astro
4 étapes pour transformer votre performance
1. Audit des islands et directives client:*
Cartographie de chaque island, validation de la directive utilisée, évaluation des opportunités client:idle / client:visible.
2. Audit du bundle par island
Mesure du JS embarqué par chaque island (React, Vue, Svelte). Identification des dépendances lourdes à remplacer ou à isoler davantage.
3. Optimisation images et fonts
Généralisation du Image component, fetchpriority sur l'image LCP, font-display swap, subset des fonts. Gain LCP typique : 200-500ms.
4. Output static vs SSR
Évaluation du mode build (static vs SSR vs hybrid). Si SSR utilisé, vérification de la stratégie de cache (Cloudflare, Netlify, Vercel selon hébergement).
1. Audit des islands et directives client:*
Cartographie de chaque island, validation de la directive utilisée, évaluation des opportunités client:idle / client:visible.
2. Audit du bundle par island
Mesure du JS embarqué par chaque island (React, Vue, Svelte). Identification des dépendances lourdes à remplacer ou à isoler davantage.
3. Optimisation images et fonts
Généralisation du Image component, fetchpriority sur l'image LCP, font-display swap, subset des fonts. Gain LCP typique : 200-500ms.
4. Output static vs SSR
Évaluation du mode build (static vs SSR vs hybrid). Si SSR utilisé, vérification de la stratégie de cache (Cloudflare, Netlify, Vercel selon hébergement).
Engagements de la mission
Questions fréquentes
Astro vs Next.js pour un site de contenu ?
Astro est-il pertinent pour un e-commerce ?
Faut-il utiliser Astro DB ?
Comment se structurent vos accompagnements Astro ?
Pousser votre Astro à sa performance maximale
Données 2023-2026
Ce qu'en disent mes clients
Excellent travail.
Paul a nettement amélioré la vitesse du site et l’a parfaitement aligné avec les recommandations Google.
Professionnel, rigoureux et efficace, je recommande vivement.
Nicolas - April Moto
Directeur digital & e-commerce
Nous sommes très satisfaits du travail de Paul. Il se montre rapide, disponible et particulièrement efficace. Depuis son arrivée, de très bons résultats ont été constatés, tant en termes de performance que de réactivité. Un vrai atout pour notre équipe.
Léo - Maison de luxe
E-commerce Product Owner
Je sais pas si on l'a assez répété.
Mais si vous voulez améliorer votre vitesse de chargement,
Faire plaisir à Google et mettre vos Signaux Web Essentiels dans le vert,
Contactez Paul Delcloy.
Florian Darroman - Les Makers
Co-fondateur
Astro, framework conçu pour la performance
Astro est l'un des frameworks front-end les plus innovants apparus récemment. Son principe : HTML par défaut, JavaScript opt-in via les islands. Là où React, Vue, Angular embarquent leur runtime complet pour livrer une SPA, Astro génère du HTML statique et n'injecte du JavaScript que sur les composants explicitement marqués comme interactifs.
Le résultat : des sites Astro typiques livrent moins de 50 KB de JavaScript total, atteignent des Core Web Vitals au vert dès le départ, et ont des LCP sous 1.5 seconde sur mobile. Pour les sites de contenu (blogs, sites institutionnels, documentation, portfolio), Astro est aujourd'hui le choix par défaut côté performance.
Islands architecture, le levier différenciant
Le principe islands consiste à rendre le HTML côté serveur (ou au build pour les sites statiques), puis à hydrater uniquement les composants explicitement déclarés interactifs (avec client:load, client:idle, client:visible). Chaque island est isolée : son JavaScript ne contamine pas le reste de la page.
Cette architecture permet de combiner des composants React, Vue, Svelte, Preact dans une même page Astro, chacun isolé. Le défi est de discipliner l'usage des directives client:* : utiliser client:visible ou client:idle quand l'interaction n'est pas immédiate libère le main thread pour le LCP.
Image optimization et view transitions
Astro intègre un Image component qui automatise les formats next-gen (AVIF, WebP), le lazy loading, le srcset responsive, et la priorisation. C'est l'un des composants les plus rentables côté LCP : sa généralisation suffit souvent à passer le LCP au vert sur les sites image-lourds.
Les view transitions natives (depuis Astro 3) ajoutent une fluidité SPA-like sans le coût JavaScript d'une vraie SPA. Pour les sites de contenu et e-commerce léger, c'est un excellent compromis entre UX moderne et performance. Pour un audit web performance sur un site Astro existant, l'angle est de valider l'usage des islands et d'optimiser ce qui reste optimisable.
Autres expertises Technologies
Angular
Angular optimisé : lazy modules, OnPush change detection, SSR Universal ou Analog, signals, zone.js élimination. Core Web Vitals stables sur SPA enterprise.
Découvrir
Drupal
Drupal optimisé : Render API et cache contexts, Dynamic Page Cache + BigPipe, Views performance, MySQL tuning. Core Web Vitals au vert sur les templates stratégiques.
Découvrir
Laravel
Laravel optimisé : Eloquent N+1, opcache + JIT, Octane, Redis cache, queues async, MySQL tuning. TTFB descendu et Core Web Vitals au vert.
Découvrir