Von 22,5 MB auf 0,33 MB: Ein Yogastudio verlässt seinen Baukasten

22,5 MB Startseite, 51 Sekunden Ladezeit: Wie ein Yogastudio seinen US-Baukasten verlassen hat und mit Next.js + Payload 98,5 % leichter geworden ist.

Die Startseite eines Yogastudios bei Köln wog 22,5 Megabyte und brauchte im Mobilfunknetz 51 Sekunden zum Laden. Vier Wochen später liefert dieselbe Seite 0,33 Megabyte aus und zeigt ihr größtes Bild nach gut 2 Sekunden. Dazwischen liegt kein Optimierungs-Trick, sondern ein kompletter Neubau: raus aus dem US-Baukasten, rein in eine eigene Webapp mit Next.js und Payload CMS. Diese Case Study zeigt, wie das Projekt ablief und was du daraus für deine eigene Website mitnehmen kannst.

Die Ausgangslage: eine Website, die dem Studio nicht gehörte

Das Studio betreibt Präsenz- und Online-Yogakurse mit Fokus auf Schmerztherapie. Die bestehende Website lief auf GoHighLevel, einem US-amerikanischen All-in-one-Baukasten, eingerichtet über eine Marketing-Agentur mit White-Label-Zugang. Das Setup hatte drei strukturelle Probleme:

• Kein Eigentum: Code, Inhalte und Kundendaten lagen in einem fremden Account. Ein Wechsel der Agentur hätte den Verlust der kompletten Website bedeutet.
• Keine Performance: Jede Unterseite wog zwischen 10 und 23 MB, weil der Baukasten sämtliche Skripte, Fonts und Styles in jede einzelne Seite einbettete. Selbst das Impressum kam auf 21,3 MB.
• Laufende Kosten: 97 € pro Monat für die Plattform, dazu Abhängigkeit bei jeder inhaltlichen Änderung.

Der Download der Startseite dauerte im Test 51 Sekunden. Google empfiehlt für den Largest Contentful Paint unter 2,5 Sekunden. Für ein Studio, dessen Zielgruppe zu einem großen Teil mobil bucht, ist das keine Stilfrage, sondern ein Umsatzproblem.

Was der Bestands-Check außerdem fand

Vor dem Neubau haben wir alle 17 Seiten gecrawlt und dokumentiert. Die Liste ging weit über die Ladezeit hinaus:

• Defekte Rechtsseiten: Die Seite zur Widerrufsbelehrung zeigte stattdessen die AGB, die Haftungshinweise zeigten den Datenschutztext. Bei laufendem Online-Verkauf fehlte damit eine Pflichtinformation für Verbraucher – ein konkretes Abmahnrisiko.
• DSGVO-Lücken: Die gesamte Website lief auf US-Servern der Baukasten-Plattform – inklusive der Daten aus Kontakt- und Buchungsformularen. Dazu Google Fonts von US-Servern (seit dem Urteil des LG München I von 2022 eine verbreitete Abmahngrundlage) und weitere US-Dienste ohne erkennbares Consent-Management.
• HWG-Risiko: Bei therapienahen Angeboten sind Formulierungen, die wie Heilversprechen klingen, nach dem Heilmittelwerbegesetz angreifbar – die Alttexte waren darauf nie geprüft worden.
• Keine Barrierefreiheit: Der Accessibility-Audit am archivierten Stand fand 72 Elemente mit unzureichendem Farbkontrast, unbeschriftete Buttons und Frames ohne Titel. Für ein Studio, dessen Zielgruppe auch ältere Menschen mit Schmerzen sind, ist das mehr als ein Formalproblem.
• Kein Design-System: zusammengeklickte Sektionen mit wechselnden Schriften, Farben und Abständen – jede Seite sah anders aus, keine folgte definierten Regeln.
• SEO-Basics fehlten: keine XML-Sitemap, kein einziges Schema-Markup, doppeltes H1 auf der Startseite, www- und non-www-Variante gemischt verlinkt (Duplicate Content), vier Produktseiten nur über kryptische ID-URLs erreichbar.
• Funktionsgrenzen: Funktionen, die sich der Betreiber wünschte – allen voran eine Videothek mit Einzelkauf und Abos – ließen sich auf der Plattform nicht umsetzen.

Die Entscheidung: Eigenentwicklung statt nächster Baukasten

Die naheliegende Route wäre ein Umzug zu WordPress oder einem anderen Baukasten gewesen. Wir haben uns dagegen entschieden, aus einem Grund, der bei diesem Projekt alles überlagerte: Das Studio plant genau die Funktionen, an denen der Baukasten bereits gescheitert war – eine Videothek mit Einzelkauf, Abos und Kundenprofilen. Ein Plugin-Stack, der das abbildet, wird schnell fragiler und teurer als eine saubere Eigenentwicklung. Die Abwägung zwischen den Welten haben wir im Vergleich WordPress oder Next.js für KMU ausführlich beschrieben.

Der Stack für dieses Projekt:

Baustein	Aufgabe
Next.js 16	Statisch vorgerenderte Seiten, unter 200 ms Serverantwort
Payload CMS 3	Admin-Bereich unter /admin – der Betreiber pflegt Kurse, Team, Events und Preise selbst
PostgreSQL 17	Eine Datenbank für alle Inhalte, täglich gesichert
Eversports	Kursbuchung und Bezahlung, per Click-to-Load eingebunden
Brevo	Newsletter mit Double-Opt-in, EU-Rechenzentrum
Hetzner Cloud	Hosting in Nürnberg, DSGVO-konform, mit automatischem Deploy bei jedem Code-Update

Auf dieser Basis entstand ein durchgängiges Design-System: Markenfarben und Typografie sind einmal definiert, alle 20+ Seiten bauen auf denselben wiederverwendbaren Komponenten auf – bis hinunter zu geprüften Farbkontrasten. Das ist der Unterschied zwischen gestalteten Seiten und zusammengeklickten.

Wichtig war die Trennung der Verantwortlichkeiten: Geldflüsse laufen über Eversports, E-Mails über Brevo, Inhalte liegen in der eigenen Datenbank. Fällt ein Dienst aus oder wird zu teuer, ist er austauschbar, ohne dass die Website neu gebaut werden muss. Genau diese Austauschbarkeit fehlte im Baukasten.

Das Ergebnis in Zahlen

Gemessen mit Lighthouse 12 im simulierten Mobilprofil (gedrosseltes 4G, Mittelklasse-Smartphone), die Altseite über den archivierten Stand vom Juli 2026:

Metrik	Vorher (Baukasten)	Nachher (Eigenentwicklung)
Seitengewicht Startseite	22,5 MB	0,33 MB
Laden mobil	51 s (kompletter Download)	2,2 s (LCP)
Lighthouse Performance	nicht sinnvoll messbar	99 (PageSpeed Insights, Live-Domain)
Accessibility	87 – mit 72 Kontrastfehlern	100
Best Practices	–	100
Strukturierte Daten (Schema)	keine	LocalBusiness, Events, Breadcrumbs, FAQ
Layout-Springen (CLS)	–	0
Textseite (Impressum)	21,3 MB	unter 0,1 MB

Der Unterschied kommt nicht aus einem einzelnen Trick, sondern aus der Architektur: Die Seiten werden beim Build als statisches HTML erzeugt, CSS wird direkt ins Dokument eingebettet, Bilder liefern wir als AVIF in exakt der benötigten Größe aus. Externe Skripte laden erst nach einem Klick der Besucherin. Wie sich solche Werte auf Rankings und Conversion auswirken, zeigt unser Überblick zu Website-Kosten 2026 – die Ladezeit ist einer der wenigen Posten, die sich direkt in Buchungen übersetzen.

SEO: 17 alte URLs, null verlorene Rankings

Ein Relaunch verliert Rankings an zwei Stellen: durch gelöschte Inhalte und durch geänderte URLs ohne Weiterleitung. Vor dem Neubau haben wir deshalb den kompletten Altbestand gecrawlt und archiviert. Alle 17 indexierten URLs der alten Seite leiten jetzt per 301 auf ihre inhaltlichen Nachfolger weiter, von /uebermich bis zur alten Schnupperwochen-Landingpage. Die vollständige Vorgehensweise dazu steht in unserer Relaunch-Checkliste.

Dazu kamen die Basics, die auf der Altseite komplett fehlten: saubere Meta-Descriptions, strukturierte Daten (LocalBusiness-Schema mit echten Google-Bewertungen, Event- und Breadcrumb-Markup – die Altseite hatte kein einziges Schema), eine Sitemap und konsistente Kontaktdaten zwischen Website und Google Business Profile.

DSGVO und Heilmittelwerbegesetz: vom Risiko zum Standard

Die neue Seite dreht jeden der Rechtspunkte aus dem Bestands-Check um: Schriften liegen auf dem eigenen Server, Drittanbieter-Inhalte wie das Buchungs-Widget laden erst nach Klick (Click-to-Load), gehostet wird ausschließlich in der EU. Die Rechtsseiten – Impressum, Datenschutz, AGB, Widerrufsbelehrung nach amtlichem Muster – existieren als eigene, korrekte Seiten und gehen vor dem Livegang in den anwaltlichen Finalcheck. Und weil das Studio therapienahe Kurse anbietet, wurden alle Texte gegen das Heilmittelwerbegesetz geschrieben und geprüft, statt Heilversprechen zu riskieren.

Was der Betreiber jetzt selbst kann

Der für den Alltag größte Unterschied ist unsichtbar: Im Payload-Admin pflegt der Studioinhaber Kursplan, Kursleiter-Profile, Events und Preistexte ohne Entwickler. Neue Inhalte erscheinen automatisch auf den richtigen Seiten, in der Sitemap und im Google-Schema. Code-Änderungen deployt der Server selbstständig aus dem Git-Repository. Die Website gehört dem Studio – Code, Daten und Domain. Alle Leistungen und der komplette Stack im Überblick: Projektseite Schmerzhilfe Yoga.

Häufige Fragen

Wie lange dauert so ein Relaunch?

In diesem Projekt lagen zwischen Bestandsanalyse und lauffähiger Staging-Umgebung rund vier Wochen, inklusive Design, 20+ Seiten, CMS-Aufbau und Hosting. Die Dauer hängt vor allem davon ab, wie schnell Inhalte und Freigaben aus dem Unternehmen kommen.

Was kostet eine Website wie diese?

Eigenentwicklungen dieser Größenordnung liegen je nach Umfang meist im mittleren vierstelligen bis niedrigen fünfstelligen Bereich. Was die Kosten treibt und wo Baukasten-Angebote versteckte Folgekosten haben, schlüsseln wir in Was kostet eine Website 2026 auf.

Verliert die Seite beim Relaunch Google-Rankings?

Nicht, wenn jede alte URL per 301-Redirect auf ihren Nachfolger zeigt und die Inhalte erhalten bleiben. Der Crawl der Altseite vor dem Abschalten ist dafür die Versicherung: Er dokumentiert, welche URLs existierten und was auf ihnen stand.

Lohnt sich der Umstieg von einem Baukasten immer?

Bei kleinen Visitenkarten-Seiten oft nicht. Der Umstieg lohnt sich, wenn Performance messbar Umsatz kostet, wenn Funktionen geplant sind, die der Baukasten nicht abbildet, oder wenn die Abhängigkeit von Plattform und Agentur zum Risiko wird. Im Zweifel klärt das ein Blick auf die Webentwicklung-Optionen im Vergleich.