Von Webflow zu Astro: die neue Website der CREATIO AG

creatio.ch

Warum sie von Webflow weggegangen sind

Webflow verschaffte CREATIO eine gut aussehende Website. Was es ihnen nicht gab, war die darunterliegende Engine: Das Markup und das Hosting gehören dem Baukasten, und damit auch die Leistungsgrenze, die damit einhergeht. Auf einem Android-Smartphone der Mittelklasse über eine langsame Verbindung erzielte die alte Website in PageSpeed Insights etwa 35 von 100 Punkten.

Für einen Entwickler, dessen Pipeline von eingehenden Anfragen abhängt — jemand, der um 22:00 Uhr auf einem Telefon eine Adresse in ein Bewertungsformular eingibt — das ist das ganze Problem. Eine langsame Seite auf dem Handy ist ein verlorener Lead, und eine Website, auf der das Team nicht selbst veröffentlichen kann, ist eine Entwicklung, die eine Woche zu spät Go-live geht.

Was gebaut wurde

Das Design blieb intakt. Wir portierten das Webflow-Layout pixelgenau, inklusive Animationen, und ersetzten die darunterliegende Engine. Nichts wurde zugunsten des Umbaus neu gestaltet — mit einer Ausnahme: der Immobilienbewertungsbereich auf der Startseite, der von Grund auf neu aufgebaut wurde, weil er die kommerzielle Last trägt.

Inhalte wurden in ein Git-basiertes CMS verschoben. Entwicklungen, Vermietungen, Blogbeiträge und das Immobilien-Glossar leben in Keystatic. Jeder Eintrag ist eine Datei im Repository, sodass der Inhalt die gleiche Historie, Überprüfung und Wiederherstellung wie der Code hat. Meta-Titel und -Beschreibung sind bearbeitbare Felder bei jedem Eintrag, keine Entwickleraufgabe — und ein vom Redakteur gesteuertes noindex-Flag entfernt eine Seite ohne Deploy-Anfrage aus der Sitemap.

Der Editor ist ein separates Deployment. Keystatic läuft auf einem eigenen Cloudflare Worker hinter Cloudflare Access, sodass die öffentliche Website als reine statische Dateien ohne angehängte Admin-Oberfläche ausgeliefert wird. Ein Redakteur speichert, das wird zu einem Commit, der Commit löst einen Build aus. Das Team kann dieselben Dateien auch über Claude oder ChatGPT steuern und einen Pull Request anstelle eines Tickets erhalten.

Leads gehen dorthin, wo die Vertriebsarbeit stattfindet. Jedes Formular auf der Website — Bewertung, Kontakt, Karriere — wird in HubSpot gepostet, wo CREATIOs Deal Flow bereits stattfand. Auch die Analysen wurden vom Webflow-Build übernommen: GTM, GA4, HubSpot und der Tree-Nation Baumzähler.

Zwei Sprachen, eine Quelle. Deutsch für den Schweizer Markt, Englisch daneben, wobei die hreflang-Paarung zur Build-Zeit und nicht manuell gehandhabt wird.

Ein Glossar, das immer wieder Seiten produziert. Das Immobilien-Wiki verwandelt jeden Begriff, den CREATIOs Käufer tatsächlich suchen — Baumassenziffer, Grundstückgewinnsteuer, Attikawohnung — in eine eigene indexierbare Seite, generiert aus derselben Inhaltssammlung.

Ergebnisse

PageSpeed Insights	Auf Webflow	Auf Astro
Performance, mobil	ca. 35	90
Performance, Desktop	ca. 65	100
Barrierefreiheit	—	99
Best Practices	—	100
SEO	—	100

Auf dem Handy: Largest Contentful Paint 3,5 s, Total Blocking Time 0 ms, Cumulative Layout Shift 0. Auf dem Desktop: First Contentful Paint 0,5 s, Largest Contentful Paint 0,6 s, und wieder keine Blocking Time und kein Layout Shift.

Die Astro-Spalte ist ein PageSpeed Insights-Lauf vom 27. September 2026 — Lighthouse 13.5.0, emuliertes Moto G Power, Slow 4G Drosselung — was die beiden Screenshots zeigen. Die Webflow-Zahlen stammen aus den eigenen Überprüfungen des Teams während des Projekts; dieser Build existiert nicht mehr, daher können sie nicht erneut ausgeführt werden. Beides sind Labormessungen: creatio.ch hat noch nicht genug Traffic, damit Chromes Felddaten berichten könnten.

Wohin das Gewicht verschwand

Kommerzielle Baukästen hinterlassen viel davon. Das Entfernen machte den Großteil der Performance-Arbeit aus, und jede Zeile unten ist gemessen statt geschätzt:

Was sich geändert hat	Vorher	Nachher
Hero-Bild, WebP-Fallback	2.714 KB	507 KB
Hero-Bild, AVIF-Fallback	1.315 KB	242 KB
Render-blockierendes CSS beim ersten Laden	480 ms	0 — jedes Stylesheet wird in das HTML inline eingebettet
Drittanbieter-Analysen auf dem kritischen Pfad	~300 KB GTM / GA4 / HubSpot	nur bei echter Benutzerinteraktion geladen
Slider-Fotos unterhalb des sichtbaren Bereichs	~800 KB eifrig abgerufen	lazy-loaded
Live Baumzähler API-Aufruf	~680 ms auf dem kritischen Pfad	verzögert, bis der Zähler ins Blickfeld scrollt
Layout-Thrash vom Header-Skript	35 ms erzwungener Reflow	entfernt
Legacy JavaScript Transpilierung	~13 KB	entfernt (ES2022-Ziel)

Die Bildzahlen stammen von einer 4880×3252 Hero-Quelle und gelten für jedes andere 4K-Asset auf der Website: ein benutzerdefinierter Bilddienst begrenzt jede Build-Zeit-Transformation auf 1920 px an der langen Kante und kodiert dann mit WebP 72 / AVIF 45 / JPEG 78 — kalibriert gegen Lighthouses eigene Bildlieferungsprüfung und nicht geraten.

Technologie-Stack

• Astro — statischer Website-Generator. Jede Seite wird als HTML ausgeliefert; es gibt kein Laufzeit-Framework auf dem kritischen Pfad.
• Keystatic — Git-basiertes CMS. Inhaltseinträge sind Dateien im Repository.
• Cloudflare Pages — globales Edge-Hosting, automatisierte Deployments von GitHub Actions über einen Drei-Branch-Flow (main → staging → production) mit einem Edge-Cache-Purge bei jeder Veröffentlichung.
• Cloudflare Access — schützt den CMS-Editor, der als eigener Worker bereitgestellt wird.
• HubSpot — jedes Website-Formular leitet in CREATIOs bestehende CRM Pipelines.

Fragen, die wir zu diesem Projekt erhalten

Muss eine Webflow-Website neu gestaltet werden, um zu Astro zu wechseln?

Nein. Wir haben CREATIOs bestehendes Design pixelgenau portiert, inklusive Animationen. Die Neugestaltung betraf einen Bereich — das Immobilienbewertungsformular — und das war eine kommerzielle Entscheidung, keine technische Einschränkung.

Wie viel schneller ist ein statischer Astro-Build im Vergleich zu Webflow?

Bei diesem Projekt stiegen die PageSpeed Insights-Werte von etwa 35 auf 90 auf dem Handy und von etwa 65 auf 100 auf dem Desktop. Das meiste davon resultierte aus der Reduzierung des Gewichts, das der Baukasten hinterlassen hatte, und nicht aus einem einzelnen Trick: Bilder wurden begrenzt und neu kodiert, Stylesheets inline eingebettet, Drittanbieter-Analysen vom kritischen Pfad ferngehalten.

Wer bearbeitet die Website danach?

CREATIOs eigenes Team. Inhalte leben in Keystatic als Dateien im Repository; ein Redakteur speichert, und das wird zu einem Commit, der ein Deployment auslöst. Dieselben Dateien können über Claude oder ChatGPT bearbeitet werden, was einen Pull Request anstelle eines Support-Tickets erzeugt.

Was passiert mit SEO während einer Webflow-Migration?

URLs, Meta-Titel und -Beschreibungen werden vor der Umstellung inventarisiert und übernommen, dann anschließend in der Search Console verifiziert. Bei diesem Projekt wird die Sitemap bei jedem Build neu generiert, sodass neue Entwicklungen, Vermietungen, Wiki-Begriffe und Blogbeiträge eingereicht werden, ohne dass jemand eine URL-Liste pflegen muss.

Wo läuft die Website, und was kostet der Betrieb?

Cloudflare Pages, bereitgestellt über GitHub Actions. Es gibt kein Baukasten-Abonnement und keinen Server zum Patchen — die Ausgabe sind statische Dateien auf einem CDN.

Kann derselbe Ansatz auch für andere Schweizer Immobilienentwickler funktionieren?

Ja, und die Einschränkungen sind dieselben, die wir hier gelöst haben: zweisprachig DE/EN, bildlastige Entwicklungsseiten, ein Bewertungsformular, das das CRM erreichen muss, und mobile Performance in Schweizer Netzen.