Was ist Astro und warum ist es ideal für statische Websites?
Das Astro Framework ist ein modernes Webentwicklungs-Framework, das einen radikal anderen Ansatz verfolgt als React oder Next.js: Es sendet standardmässig null JavaScript an den Browser. Jede Seite wird als reines HTML mit optimiertem CSS ausgeliefert — JavaScript wird nur dort geladen, wo es tatsächlich gebraucht wird.
Für Schweizer Unternehmen, die eine performante Website für Marketing, Blog oder Unternehmenspräsentationen suchen, ist Astro die optimale Wahl 2026. Die Ergebnisse sprechen für sich: Lighthouse-Scores von 100/100, Ladezeiten unter 0.5 Sekunden und perfekte Core Web Vitals — ohne Optimierungsaufwand.
Key Takeaway: Astro liefert standardmässig null JavaScript an den Browser. Das Ergebnis: die schnellsten Websites im Web, perfekte SEO-Scores und minimale Hosting-Kosten. Ideal für alle Websites die primär Inhalte präsentieren.
Astro vs. Next.js vs. WordPress: Der Vergleich
Die Wahl des richtigen Frameworks bestimmt Performance, Wartungsaufwand und Kosten deiner Website. Hier der ehrliche Vergleich:
| Kriterium | Astro | Next.js | WordPress | Hugo/11ty |
|---|---|---|---|---|
| JavaScript im Browser | 0 KB (Standard) | 80-200 KB | 200-500 KB | 0 KB |
| Lighthouse Score | 100 | 90-98 | 50-75 | 100 |
| Ladezeit (TTFB) | < 50ms | < 100ms | 200-800ms | < 50ms |
| Dynamische Features | Islands (optional) | Vollständig | Plugins | Limitiert |
| Content Management | Content Collections | Eigenbau/CMS | Nativ | Markdown |
| React-Komponenten | Ja (Islands) | Ja (nativ) | Nein | Nein |
| Lernkurve | Gering | Mittel | Gering | Gering |
| Plugin-Ökosystem | Wachsend | Gross | Riesig | Klein |
| Security-Risiko | Minimal | Gering | Hoch | Minimal |
| Hosting-Kosten | CHF 0 | CHF 0-20 | CHF 10-50 | CHF 0 |
| Ideal für | Content, Marketing | Web-Apps, SaaS | Blogs (Legacy) | Docs, Blogs |
Die Kernfrage: Braucht deine Website Interaktivität? Wenn ja (Login, Dashboard, Echtzeit-Daten) — nimm Next.js. Wenn nein (Marketing, Blog, Portfolio, Firmenpräsenz) — Astro ist schneller, einfacher und günstiger.
Bei TYTOS setzen wir Astro für statische Projekte ein und Next.js für dynamische Anwendungen wie SaaS-Plattformen und CRM-Systeme. So bekommt jedes Projekt das optimale Framework.
Islands Architecture: Das Geheimnis hinter Astros Performance
Astros revolutionärer Ansatz heisst Islands Architecture. Die Idee: Eine Webseite besteht aus statischem HTML (dem "Ozean") und interaktiven Komponenten (den "Inseln"). Nur die Inseln laden JavaScript — der Rest ist reines HTML.
Wie es funktioniert:
- Standardmässig statisch: Jede Astro-Komponente wird zu reinem HTML kompiliert. Null JavaScript.
- Opt-in-Interaktivität: Nur Komponenten, die mit einer
client:-Direktive markiert sind, laden JavaScript. - Selektives Laden: Du bestimmst, wann JavaScript geladen wird:
client:load— Sofort beim Seitenaufrufclient:idle— Wenn der Browser idle istclient:visible— Wenn die Komponente in den Viewport scrolltclient:media— Wenn eine Media Query zutrifft
Praxisbeispiel: Eine Marketing-Website mit 10 Seiten, einem Kontaktformular und einer interaktiven Preistabelle. Mit Next.js würden alle 10 Seiten das gesamte React-Bundle laden (80-200 KB JavaScript). Mit Astro laden nur das Kontaktformular und die Preistabelle JavaScript — die restlichen 8 Seiten sind reines HTML.
Ergebnis: Statt 150 KB JavaScript für jede Seite werden nur 15 KB für die zwei interaktiven Seiten geladen. Die anderen 8 Seiten laden null Bytes JavaScript.
Content Collections: Blog und Docs ohne CMS
Astro bietet ein eingebautes Content-Management-System namens Content Collections. Ideal für Blogs, Dokumentation und andere content-lastige Websites — ohne externes CMS, ohne Datenbank.
Was Content Collections bieten:
- Typ-sicherer Content: Jeder Blog-Post wird gegen ein Schema validiert (mit Zod)
- Markdown/MDX-Support: Schreibe Inhalte in Markdown, nutze React-Komponenten wo nötig
- Automatische Slugs: URLs werden aus Dateinamen generiert
- Frontmatter-Validierung: Pflichtfelder wie Titel, Datum und Kategorie werden beim Build geprüft
- Querying-API: Inhalte filtern, sortieren und paginieren ohne Datenbank
Vergleich: Content Collections vs. Headless CMS vs. WordPress:
| Kriterium | Astro Content Collections | Headless CMS (Sanity/Strapi) | WordPress |
|---|---|---|---|
| Setup-Aufwand | Minimal (Dateien im Ordner) | Mittel (CMS konfigurieren) | Mittel (Hosting + Setup) |
| Kosten | CHF 0 | CHF 0-99/Monat | CHF 10-50/Monat |
| Performance | Maximal (Build-Time) | Hoch (API-Abruf) | Mittel (PHP-Rendering) |
| Redakteur-Freundlichkeit | Git-basiert (Entwickler) | Hoch (visueller Editor) | Hoch (WYSIWYG) |
| Typ-Sicherheit | Ja (Zod) | Teilweise | Nein |
| Version Control | Git (nativ) | CMS-intern | Plugin |
| Security | Keine Angriffsfläche | API-Absicherung | Plugin-Risiken |
Für Unternehmen die keine nicht-technischen Redakteure haben, sind Content Collections die perfekte Lösung: maximale Performance, null Angriffsfäche und volle Typ-Sicherheit.
Performance-Optimierung mit Astro: Was du automatisch bekommst
Astro optimiert Performance automatisch — ohne dass du etwas konfigurieren musst:
Automatische Bild-Optimierung:
- Bilder werden automatisch in WebP/AVIF konvertiert
- Responsive Bildgrössen werden generiert
- Lazy Loading ist Standard
- Layout-Shift wird durch Width/Height-Attribute verhindert
CSS-Optimierung:
- Scoped CSS pro Komponente — kein globaler CSS-Bloat
- Unbenutztes CSS wird automatisch entfernt
- Critical CSS wird inline im HTML eingebettet
- External Stylesheets werden minimiert und gecached
HTML-Optimierung:
- Minimiertes HTML ohne unnötige Whitespaces
- Preloading für kritische Ressourcen
- Prefetching für interne Links (optional)
- Sitemap und RSS-Feed automatisch generiert
Ergebnis für eine typische Astro-Website:
| Metrik | Typischer Wert | Ziel |
|---|---|---|
| Lighthouse Performance | 100 | > 90 |
| First Contentful Paint | 0.3-0.5s | < 1.8s |
| Largest Contentful Paint | 0.5-0.8s | < 2.5s |
| Total Blocking Time | 0ms | < 200ms |
| Cumulative Layout Shift | 0 | < 0.1 |
| JavaScript-Grösse | 0 KB (ohne Islands) | < 100 KB |
Diese Werte erreichst du mit Astro out-of-the-box. Keine Performance-Plugins, keine manuellen Optimierungen, keine Kompromisse. Wie sich das auf SEO und Sichtbarkeit auswirkt, zeigt sich in den Rankings — schnellere Websites ranken besser.
Astro-Hosting: Vercel, Netlify oder Cloudflare Pages
Astro-Websites können überall gehosted werden — sie sind am Ende nur HTML, CSS und (optional) minimales JavaScript. Hier die besten Optionen:
| Plattform | Free Tier | Build-Speed | Edge-Funktionen | Ideal für |
|---|---|---|---|---|
| Vercel | 100 GB Bandwidth | Schnell | Ja | Next.js + Astro Kombis |
| Netlify | 100 GB Bandwidth | Schnell | Ja | Reine Astro-Projekte |
| Cloudflare Pages | Unlimited Bandwidth | Mittel | Ja (Workers) | Traffic-intensive Sites |
| GitHub Pages | Unlimited | Langsam | Nein | Einfache Projekte |
Unsere Empfehlung: Vercel. Nicht nur weil wir es bei TYTOS für alle Projekte nutzen, sondern weil es die beste Developer Experience bietet: automatische Deployments bei Git-Push, Preview-URLs für jeden Branch und ein globales CDN. Mehr dazu in unserem Hosting-Vergleich.
Für reine Astro-Projekte ist Cloudflare Pages eine interessante Alternative — unbegrenzte Bandwidth im Free Tier ist für traffic-intensive Blogs und Marketing-Sites ein echtes Argument.
Wann Astro die richtige Wahl ist (und wann nicht)
Astro ist perfekt für:
- Marketing-Websites: Firmenpräsenz, Produkt-Landing-Pages, Kampagnen-Sites
- Blogs und Magazine: Content-lastige Sites mit hunderten Artikeln
- Dokumentation: Technische Docs, Hilfe-Center, Wissensdatenbanken
- Portfolio-Websites: Designer, Fotografen, Agenturen
- Event-Websites: Konferenzen, Messen, Veranstaltungen
Astro ist nicht ideal für:
- SaaS-Plattformen: Zu viel Interaktivität, besser mit Next.js
- CRM-Systeme: Datenbank-intensive Anwendungen brauchen Next.js + Supabase
- Dashboards: Echtzeit-Daten und komplexe UI erfordern vollständiges React
- E-Commerce mit dynamischem Warenkorb: Server-seitige Logik nötig, Next.js ist besser
Die goldene Regel: Wenn deine Website primär Inhalte präsentiert (80%+ statisch), nimm Astro. Wenn deine Website primär Interaktion erfordert (Login, Dashboard, Echtzeit), nimm Next.js.
Bei TYTOS wählen wir das Framework basierend auf deinen Anforderungen — nicht auf unserer Präferenz. Lies dazu unseren Vergleich Agentur vs. KI, der auch auf die technische Entscheidung eingeht.
Astro und SEO: Warum Suchmaschinen statische Seiten lieben
Suchmaschinen bevorzugen schnelle, semantisch korrekte und inhaltsreiche Seiten. Astro liefert genau das:
SEO-Vorteile von Astro:
- Null JavaScript = sofort indexierbar: Google muss kein JavaScript ausführen, um den Content zu sehen
- Perfekte Core Web Vitals: Alle drei Metriken (LCP, FID, CLS) im grünen Bereich
- Semantisches HTML: Astro-Komponenten rendern sauberes, semantisches Markup
- Automatische Sitemap: Das
@astrojs/sitemap-Plugin generiert eine XML-Sitemap beim Build - Strukturierte Daten: JSON-LD kann einfach in Astro-Layouts eingebettet werden
- Open Graph / Twitter Cards: Meta-Tags können komponentenbasiert verwaltet werden
SEO-Vergleich nach Framework:
| SEO-Faktor | Astro | Next.js (SSG) | WordPress | SPA (React) |
|---|---|---|---|---|
| Indexierbarkeit | Perfekt | Sehr gut | Gut | Schlecht |
| Core Web Vitals | 100 | 90-98 | 50-75 | 60-80 |
| JavaScript-Abhängigkeit | Keine | Mittel | Hoch (Plugins) | Vollständig |
| Ladezeit | < 0.5s | < 1s | 1-3s | 1-5s |
| Crawl-Budget-Effizienz | Maximal | Hoch | Mittel | Niedrig |
Für Schweizer Unternehmen die online sichtbar sein wollen, ist die Wahl des Frameworks eine SEO-Entscheidung. Astro liefert die technische Grundlage für Top-Rankings — den Rest erledigt guter Content.
Astro-Websites von TYTOS: Was du bekommst
Bei TYTOS nutzen wir Astro für alle Projekte die primär statischen Content liefern. Das Ergebnis: blitzschnelle Websites mit perfekten Performance-Scores.
Was du bekommst:
- Performance-optimierte Astro-Website mit Lighthouse 100/100
- Responsive Design mit Tailwind CSS
- Content Collections für Blog/News (falls benötigt)
- SEO-Optimierung mit Sitemap, Meta-Tags und strukturierten Daten
- Deployment auf Vercel mit automatischem CI/CD
- Kontaktformular mit Serverless Function
- Alles zum Festpreis ab CHF 500
Für dynamischere Anforderungen kombinieren wir Astro mit Next.js oder setzen vollständig auf Next.js — je nach Projektbedarf. Dashboards ab CHF 5'000, SaaS-Plattformen ab CHF 15'000.
Wie sich unsere KI-gestützte Entwicklung auf Geschwindigkeit und Kosten auswirkt, erfährst du im Artikel Was kostet Softwareentwicklung?.
Key Takeaway: Astro ist das schnellste Framework für statische Websites 2026. Null JavaScript, Lighthouse 100, perfekte SEO — und das ohne Kompromisse bei der Entwicklererfahrung. Für content-lastige Schweizer Unternehmenswebsites gibt es keine bessere Wahl.
Bereit für die schnellste Website in deiner Branche? Kontaktiere uns für eine kostenlose Demo in 24 Stunden. Festpreis. Schweizer Qualität. Ohne Risiko.