Die Ergebnisse
Wir haben Google Lighthouse auf cmssy.io laufen lassen - unserer eigenen Marketing-Site, einer Next.js-App, deren Inhalte aus Cmssy kommen. Die Ergebnisse sprechen für sich:
- Accessibility: 100/100
- Best Practices: 100/100
- SEO: 100/100
- TTFB: 64ms
- Gesamtgewicht der Seite: 332KB
Warum headless Cmssy-Sites schnell sind
Das Wichtigste zum Verständnis: Eine Cmssy-Site ist eine normale Next.js-App (App Router), die du besitzt und deployst. Du baust deine Blöcke als React-Komponenten mit @cmssy/react und @cmssy/next, holst Inhalte aus der Cmssy-Delivery-API und lieferst auf deinem eigenen Host aus (Vercel usw.). Cmssy speichert die Inhalte und gibt Redakteuren einen visuellen Editor, der deine deployte Site einrahmt - es hostet oder serviert die Site nicht für dich. Das heißt: Jeder Performance-Hebel von Next.js liegt in deiner Hand, und diese Scores kommen daher, dass man sie gut nutzt.
Server Components liefern ~0 Client-JS
Cmssy-Blöcke sind React-Komponenten, und im App Router sind sie standardmäßig Server Components. Ein serverseitig gerenderter Block sendet HTML und schickt praktisch kein JavaScript an den Browser. Nur Blöcke, die Interaktivität brauchen, aktivieren "use client" - so bleibt das Client-Bundle winzig, was den Großteil der Performance- und Best-Practices-Scores erklärt. Siehe Blöcke bauen und fortgeschrittene Blöcke.
Gecachte Inhalte mit ISR
Inhalte werden aus der Cmssy-Delivery-API geholt und sind voll cachebar. Mit Next.js SSG oder ISR renderst du Seiten im Voraus und revalidierst nach Zeitplan - Besucher treffen also auf vorgerendertes HTML vom Edge/CDN deines Hosts. Die 64ms TTFB sind deine gecachte Antwort, kein Render pro Request.
Bildoptimierung mit next/image
Nutze next/image für jedes Bild in deinen Blöcken und du bekommst automatisches Resizing, moderne Formate, Lazy-Loading unterhalb des Folds und korrekte width/height gegen Layout-Shift - alles aus dem Framework, das du ohnehin kontrollierst.
Strukturierte Daten, Meta und Sitemaps
Den SEO-Output besitzt du in deiner Next.js-App: JSON-LD-strukturierte Daten, die metadata-API für Meta- und Open-Graph-Tags und eine generierte Sitemap. Einmal verdrahten, und jede Seite rendert sie - keine Plugins nötig.
Fonts und Resource Hints
Self-hoste Fonts mit next/font, um einen render-blockierenden Request zu entfernen und Layout-Shift zu vermeiden, und füge preconnect-/preload-Hints für kritische Ressourcen hinzu. Diese kleinen Gewinne zahlen direkt auf die Accessibility- und Best-Practices-Scores ein.
Warum das wichtig ist
Die meisten Page-Builder opfern Performance für Flexibilität. Du bekommst einen Drag-and-drop-Editor, aber dein Lighthouse-Score fällt auf 60-70, weil die Runtime schweres Client-JavaScript ausliefert. Headless Cmssy vermeidet diesen Kompromiss: Redakteure bekommen visuelles Editing mit KI-Unterstützung, während deine Site eine schlanke Next.js-App ist, bei der du entscheidest, was auf dem Server läuft und was zum Client geht.
Der Unterschied? Performance wird nicht von einer Hosting-Plattform angeschraubt - sie kommt aus deinem eigenen Next.js-Deployment. Server Components, ISR-Caching und next/image sind keine Plugins, sondern die Art, wie die App gebaut ist.
Probier es selbst
Folge dem Installations-Guide, um @cmssy/react und @cmssy/next in deine Next.js-App einzubinden, baue ein paar Blöcke, verwalte Inhalte im Editor oder über MCP, deploye auf deinem Host und lass Lighthouse über das Ergebnis laufen.