Astro Framework : Construire des Sites Ultra-Rapides Qui Obtiennent 100 sur Lighthouse

Pourquoi la Vitesse du Site Compte Encore Plus Que la Plupart des Equipes Ne le Realisent

Google mesure la vitesse des sites web depuis 2010 et l'utilise comme facteur de classement. Les Core Web Vitals sont devenus un signal de classement officiel en 2021. Chaque 100 millisecondes de temps de chargement supplementaire reduit les taux de conversion de 7% en moyenne, selon une recherche d'Akamai. Les utilisateurs mobiles sur des connexions 3G en Suisse representent encore une part significative du trafic en dehors des zones urbaines comme Lugano et Zurich.

Malgre cela, la plupart des sites web d'entreprise envoient des centaines de kilooctets de JavaScript que le navigateur doit telecharger, analyser et executer avant que la page ne devienne interactive. Un site Next.js ou Gatsby typique, meme une simple page marketing, envoie 200-500 Ko de JavaScript au navigateur.

Astro a ete construit pour resoudre ce probleme. C'est un framework web content-first qui n'envoie aucun JavaScript par defaut. Vous n'ajoutez du JavaScript que la ou vous avez besoin d'interactivite. Le resultat : des sites qui obtiennent systematiquement 100/100 sur Google Lighthouse, se chargent en moins d'une seconde et se classent mieux grace a cela.

Qu'est-ce qu'Astro

Astro est un framework web open-source concu pour les sites riches en contenu. Il a ete cree par Fred Schott et l'equipe derriere Snowpack. La premiere version stable (Astro 1.0) a ete lancee en aout 2022.

Le principe de base est simple : tout rendre en HTML statique au moment du build. Si un composant n'a pas besoin d'etre interactif, il devient du HTML pur avec zero JavaScript. Si un composant a besoin d'interactivite, il charge son JavaScript uniquement quand necessaire.

Cette approche s'appelle "architecture en iles" et c'est la caracteristique definissante qui separe Astro des autres frameworks.

L'Architecture en Iles Expliquee

Dans une application monopage traditionnelle (SPA), toute la page est controlee par JavaScript. Le navigateur telecharge un bundle JavaScript, et ce bundle rend la page entiere, gere le routage, gere l'etat et repond aux interactions de l'utilisateur.

Dans Astro, la page est du HTML statique par defaut. Les composants interactifs sont des "iles" de JavaScript integrees dans une mer de HTML statique. Chaque ile se charge independamment et peut utiliser un framework UI different de ses voisins.

Comment Ca Fonctionne en Pratique

Considerez une page marketing typique avec une section hero, des descriptions de fonctionnalites, un carrousel de temoignages et un formulaire de contact. Dans Next.js, toute la page s'hydrate comme une application React. Dans Astro :

• La section hero se rend comme HTML statique. Aucun JavaScript necessaire.
• Les descriptions de fonctionnalites se rendent comme HTML statique. Aucun JavaScript necessaire.
• Le carrousel de temoignages est une ile interactive. Il charge son JavaScript quand le composant entre dans le viewport (avec client:visible).
• Le formulaire de contact est une ile interactive. Il charge son JavaScript au chargement de la page (avec client:load).

Le resultat : au lieu d'envoyer 200 Ko de JavaScript pour toute la page, vous en envoyez peut-etre 15 Ko au total, uniquement pour les composants qui en ont besoin.

Directives d'Hydratation

• client:load - Hydrate le composant immediatement au chargement de la page.
• client:idle - Hydrate quand le navigateur est inactif.
• client:visible - Hydrate quand le composant entre dans le viewport.
• client:media - Hydrate quand une media query correspond.
• client:only - Saute le rendu serveur et ne rend que cote client.

Pas de directive signifie pas de JavaScript. Le composant se rend comme HTML statique et reste ainsi.

Zero JavaScript par Defaut

Cela merite d'etre souligne car c'est contre-intuitif pour les developpeurs venant de React ou Vue. Dans Astro, si vous ecrivez un composant sans directive client:, il n'envoie aucun JavaScript au navigateur. Le composant s'execute au moment du build, genere du HTML, et c'est ce HTML que le navigateur recoit.

Pour un site de contenu (blog, site marketing, documentation, catalogue e-commerce), la grande majorite du contenu est statique. Menus de navigation, en-tetes, pieds de page, contenu d'articles, descriptions de produits, galeries d'images : rien de tout cela n'a besoin de JavaScript.

Astro vs Next.js vs Gatsby vs Hugo

Caracteristique	Astro	Next.js	Gatsby	Hugo
JS envoye par defaut	0 Ko	80-200+ Ko	100-300+ Ko	0 Ko
Framework UI	N'importe lequel	React uniquement	React uniquement	Templates Go uniquement
SSG (statique)	Oui	Oui	Oui	Oui
SSR (serveur)	Oui	Oui	Non	Non
Vitesse de build	Rapide	Moyenne	Lente pour grands sites	Tres rapide
Score Lighthouse (site contenu)	95-100	60-90	50-85	95-100
Courbe d'apprentissage	Basse	Moyenne	Haute (GraphQL)	Moyenne
Ideal pour	Sites contenu, blogs, docs, marketing	Apps web, dashboards	Sites contenu (Astro fait mieux maintenant)	Blogs simples, docs

Quand Choisir Astro Plutot Que Next.js

Choisissez Astro quand votre site est principalement du contenu : blogs, pages marketing, documentation, catalogues de produits, portfolios, sites d'agences, landing pages. Astro vous donnera de meilleures performances, des couts d'hebergement inferieurs et un meilleur SEO.

Quand Choisir Next.js Plutot Qu'Astro

Choisissez Next.js quand votre site est principalement une application : dashboards, produits SaaS, plateformes sociales, outils de collaboration en temps reel.

Travailler avec React, Vue et Svelte dans Astro

L'une des fonctionnalites les plus puissantes d'Astro est qu'il est agnostique par rapport au framework. Vous pouvez utiliser des composants de React, Vue, Svelte, Solid, Preact, Alpine.js et Lit. Vous pouvez meme les melanger sur la meme page.

npx astro add react

Maintenant vous pouvez importer et utiliser des composants React dans vos pages Astro. Sans directive client:, le composant React se rend au moment du build et est envoye comme HTML statique. Avec une directive client:, il s'hydrate dans le navigateur.

Generation de Sites Statiques et Rendu Cote Serveur

Mode SSG (Par Defaut)

En mode SSG, Astro construit tout votre site en HTML statique au moment du build. Ces fichiers peuvent etre servis depuis n'importe quel hebergeur statique (Cloudflare Pages, Netlify, Vercel, GitHub Pages). C'est l'option de deploiement la plus rapide et la moins chere.

Mode SSR

En mode SSR, les pages sont rendues sur le serveur pour chaque requete. Astro supporte le SSR sur plusieurs runtimes : Node.js, Deno, Cloudflare Workers, Netlify Functions, Vercel Edge Functions.

Mode Hybride

L'approche la plus pratique : utilisez SSG pour la majorite des pages et SSR pour les quelques pages qui necessitent des donnees dynamiques.

Deploiement sur Cloudflare Pages, Vercel et Netlify

Cloudflare Pages

Cloudflare Pages est notre plateforme de deploiement recommandee pour les sites Astro, et nous l'utilisons pour la plupart des sites que nous construisons chez Envestis a Lugano :

• Plan gratuit : 500 builds par mois, bande passante illimitee, requetes illimitees.
• CDN mondial : Cloudflare a des centres de donnees dans plus de 300 villes, dont Zurich et Milan (proches du Tessin).
• Integration Workers : Pour le SSR, les Workers Cloudflare s'executent a la peripherie. Temps de reponse typiquement sous 50 ms.
• Analytics integre : Gratuit, respectueux de la vie privee, sans JavaScript supplementaire.

Parfait pour les Blogs, Sites Marketing et Vitrines E-Commerce

Blogs et Sites de Contenu

La fonctionnalite content collections d'Astro en fait le meilleur framework pour les sites riches en contenu. Markdown et MDX sont des citoyens de premiere classe. Flux RSS, sitemaps et images Open Graph peuvent etre generes automatiquement.

Pour les blogs qui ont besoin d'un CMS, Astro fonctionne avec n'importe quel CMS headless : Strapi, Contentful, Sanity, Ghost, Directus. Pour en savoir plus sur les options CMS headless, consultez notre guide de comparaison des CMS headless.

Sites Marketing

Les sites marketing doivent se charger rapidement, bien se classer sur Google et avoir un aspect soigne. Astro offre les trois. Le zero JavaScript par defaut signifie que vos Core Web Vitals sont excellents sans travail d'optimisation.

Vitrines E-Commerce

Pour l'e-commerce, Astro gere le catalogue de produits (pages statiques) tandis que les elements interactifs (ajout au panier, panier, paiement) sont des iles qui chargent le JavaScript uniquement quand necessaire.

Commencer : Un Tutoriel Pratique

Etape 1 : Creer un Nouveau Projet Astro

npm create astro@latest my-site

Etape 2 : Structure du Projet

• src/pages/ - Chaque fichier devient une route.
• src/layouts/ - Mises en page reutilisables.
• src/components/ - Composants UI reutilisables.
• src/content/ - Collections de contenu.
• public/ - Assets statiques.

Etape 3 : Ajouter des Integrations

npx astro add tailwind # Ajouter Tailwind CSS npx astro add react # Ajouter le support React npx astro add sitemap # Generer sitemap.xml npx astro add mdx # Ajouter le support MDX

Etape 4 : Deployer

Pour Cloudflare Pages, poussez votre code vers un depot Git et connectez-le dans le tableau de bord Cloudflare. Definissez la commande de build sur npm run build et le repertoire de sortie sur dist.

Pourquoi Envestis a Choisi Astro

Nous construisons et maintenons des sites web pour des entreprises au Tessin et dans toute la Suisse. Quand nous avons evalue les frameworks, la decision s'est portee sur ce qui compte vraiment pour les sites web d'entreprise :

• Performance : Nos sites obtiennent systematiquement 95-100 sur Lighthouse sans optimisation complexe.
• Experience developpeur : Les composants Astro sont naturels a ecrire. Le support TypeScript est de premier ordre.
• Flexibilite : Nous pouvons utiliser des composants React ou Vue la ou nous avons besoin d'interactivite et du HTML statique partout ailleurs.
• Couts d'hebergement : Les sites statiques sur Cloudflare Pages ne coutent rien pour la plupart des sites d'entreprise.
• SEO : HTML rendu cote serveur avec meta tags, donnees structurees et temps de chargement rapides.
• Maintenance : Les sites statiques ont une surface d'attaque plus petite et des deploiements plus simples. Pour en savoir plus, consultez notre article sur la securite des sites web d'entreprise.

Quand Astro N'est Pas le Bon Choix

• Applications web hautement interactives : Dashboards, outils de collaboration en temps reel.
• Fonctionnalites en temps reel : WebSocket, collaboration live.
• Gestion d'etat complexe : Etat profondement interconnecte a travers de nombreux composants.

Pour tout le reste, Astro offre de meilleurs resultats avec moins d'effort.

Prochaines Etapes

Si vous planifiez un nouveau site web ou reconstruisez un site existant, considerez Astro. Les gains de performance sont reels, l'experience developpeur est excellente, et le framework est assez mature pour un usage en production.

Chez Envestis a Lugano, nous construisons des sites web avec Astro pour des entreprises dans toute la Suisse. Que vous ayez besoin d'un site marketing, d'un blog, d'une vitrine e-commerce ou d'une presence web d'entreprise, nous pouvons vous aider a construire quelque chose qui se charge rapidement, se classe bien et est simple a maintenir. Contactez-nous pour discuter de votre projet.