Pourquoi j'ai choisi Astro et GSAP pour mon portfolio
« Comment concilier une performance mobile maximale avec des animations fluides et cinématiques sans alourdir le temps de chargement. »
Dans la conception d’un site web moderne, un choix difficile se présente souvent : privilégier la performance pure ou offrir une expérience visuelle animée et immersive. Beaucoup de portfolios souffrent d’une surcharge d’effets qui ralentissent la navigation, en particulier sur mobile. Un site qui met plus de trois secondes à s’afficher est un site abandonné par ses visiteurs.
Pour mon portfolio, mon objectif était clair. Je voulais concilier des scores de performance optimaux avec des animations soignées. Pour y parvenir, j’ai associé deux outils : Astro et GSAP.
Astro : La performance brute par défaut
La majorité des frameworks JavaScript modernes envoient une quantité massive de code au navigateur, même pour des pages principalement textuelles. Cela pénalise le temps de chargement initial.
Astro adopte l’approche inverse avec son architecture « Zero-JS par défaut ». Il génère des fichiers HTML statiques et n’envoie aucun fichier JavaScript au client, sauf si cela est explicitement demandé pour un composant interactif.
Ce choix technique offre plusieurs avantages concrets :
- Un temps de réponse serveur rapide : Les pages sont pré-compilées et prêtes à être servies instantanément.
- Une note maximale aux outils de mesure : Les scores Lighthouse atteignent 100/100 sans effort d’optimisation complexe après coup.
- Une indexation naturelle facilitée : Googlebot accède directement à un contenu textuel propre et structuré.
GSAP : La fluidité des interactions au défilement
Si Astro s’occupe de la structure solide et rapide, GSAP (GreenSock) gère l’animation de l’interface. Pour éviter de ralentir le chargement initial de la page (le LCP), j’ai appliqué des règles strictes d’intégration :
- Pas d’animations lourdes au-dessus du pli de validation : La première section visible (le Hero) utilise des animations CSS natives très légères. Cela élimine tout retard de rendu visuel.
- GSAP uniquement pour le défilement (ScrollTrigger) : La bibliothèque GSAP est chargée en local avec l’attribut
defer. Elle ne s’active que lorsque le visiteur commence à faire défiler la page, libérant ainsi de la bande passante lors du premier affichage. - Animations fluides : En manipulant directement le DOM plutôt qu’en passant par un framework réactif lourd, les transitions restent fluides, même sur les appareils mobiles de milieu de gamme.
Une alliance au service du résultat
Ce duo démontre qu’il n’est plus nécessaire de choisir entre beauté visuelle et vitesse de navigation. En concevant le site avec soin dès la première ligne de code, on obtient une vitrine performante et engageante.
Chaque décision technique sur un site doit avoir un objectif précis : améliorer l’expérience de l’utilisateur et servir les objectifs de l’entreprise. C’est avec cette même rigueur que je conçois les projets de mes clients.