Les résultats
Nous avons lancé Google Lighthouse sur cmssy.io - notre propre site marketing, une application Next.js dont le contenu vient de Cmssy. Les résultats parlent d'eux-mêmes :
- Accessibility : 100/100
- Best Practices : 100/100
- SEO : 100/100
- TTFB : 64ms
- Poids total de la page : 332KB
Pourquoi les sites Cmssy headless sont rapides
L'essentiel à comprendre : un site Cmssy est une application Next.js (App Router) standard que vous possédez et déployez. Vous construisez vos blocs comme des composants React avec @cmssy/react et @cmssy/next, récupérez le contenu depuis l'API de diffusion de Cmssy et livrez sur votre propre hébergeur (Vercel, etc.). Cmssy stocke le contenu et offre aux éditeurs un éditeur visuel qui encadre votre site déployé - il n'héberge pas et ne sert pas le site à votre place. Autrement dit, chaque levier de performance de Next.js est entre vos mains, et ces scores viennent de leur bon usage.
Les Server Components livrent ~0 JS client
Les blocs Cmssy sont des composants React, et dans l'App Router ce sont des Server Components par défaut. Un bloc rendu côté serveur envoie du HTML et pratiquement aucun JavaScript au navigateur. Seuls les blocs nécessitant de l'interactivité optent pour "use client", le bundle client reste donc minuscule - c'est en grande partie pourquoi les scores Performance et Best Practices tiennent. Voir construire des blocs et blocs avancés.
Contenu mis en cache avec l'ISR
Le contenu est récupéré depuis l'API de diffusion de Cmssy et est entièrement cachable. Avec le SSG ou l'ISR de Next.js, vous rendez les pages à l'avance et revalidez selon un calendrier : les visiteurs reçoivent du HTML pré-rendu servi depuis l'edge/CDN de votre hébergeur - ce TTFB de 64ms est votre réponse en cache, pas un rendu à chaque requête.
Optimisation des images avec next/image
Utilisez next/image pour chaque image de vos blocs et vous obtenez le redimensionnement automatique, les formats modernes, le lazy-loading sous la ligne de flottaison et des width/height corrects pour éviter le layout shift - le tout depuis le framework que vous contrôlez déjà.
Données structurées, meta et sitemaps
Vous possédez la sortie SEO dans votre application Next.js : données structurées JSON-LD, l'API metadata pour les balises meta et Open Graph, et un sitemap généré. Câblez-les une fois et chaque page les rend - aucun plugin requis.
Polices et resource hints
Auto-hébergez les polices avec next/font pour supprimer une requête bloquante au rendu et éviter le layout shift, et ajoutez des hints preconnect/preload pour les ressources critiques. Ces petits gains se traduisent directement dans les scores Accessibility et Best Practices.
Pourquoi c'est important
La plupart des page builders sacrifient la performance au profit de la flexibilité. Vous obtenez un éditeur en glisser-déposer, mais votre score Lighthouse tombe à 60-70 parce que le runtime livre un lourd JavaScript client. Cmssy headless évite ce compromis : les éditeurs profitent de l'édition visuelle assistée par IA, tandis que votre site est une application Next.js légère où vous décidez ce qui s'exécute sur le serveur et ce qui part au client.
La différence ? La performance n'est pas greffée par une plateforme d'hébergement - elle vient de votre propre déploiement Next.js. Les Server Components, le cache ISR et next/image ne sont pas des plugins, c'est ainsi que l'application est construite.
Essayez vous-même
Suivez le guide d'installation pour intégrer @cmssy/react et @cmssy/next dans votre application Next.js, construisez quelques blocs, gérez le contenu dans l'éditeur ou via MCP, déployez sur votre hébergeur et lancez Lighthouse sur le résultat.