Performante statische Websites mit Astro.js: Weniger JavaScript, mehr Geschwindigkeit
Veröffentlicht am · Marco Kähler
Diese Website läuft auf Astro.js. Nicht weil ich ein Framework-Enthusiast bin, sondern weil Astro.js für Informationswebsites technisch die überzeugendste Wahl ist. Was Astro.js so besonders macht, erkläre ich hier.
Das Problem mit modernen Web-Frameworks
React, Next.js, Vue, Svelte – all diese Frameworks haben einen gemeinsamen Ansatz: Sie rendern Benutzeroberflächen mit JavaScript. Das ist für interaktive Anwendungen sinnvoll. Für Websites, die hauptsächlich Inhalte darstellen, ist es Overkill.
Eine typische React-Website schickt dem Browser Megabytes an JavaScript, die aufwendig ausgeführt werden müssen – bevor der Nutzer auch nur den ersten Inhalt sieht. Das kostet Ladezeit und schadet dem Core Web Vitals-Score, den Google für das Ranking verwendet.
Astro.js löst dieses Problem mit einem anderen Grundprinzip.
Astro.js’ Kernidee: Zero JavaScript by default
Astro.js rendert Seiten beim Build zu statischem HTML. Der Browser bekommt fertiges HTML – kein JavaScript-Framework, das erst initialisiert werden muss, kein Warten auf Datenabrufe.
Das Ergebnis: Seiten laden extrem schnell. Nicht als Marketing-Versprechen, sondern messbar in den Lighthouse-Scores, die Google als Ranking-Faktor verwendet.
JavaScript gibt es in Astro.js nur dort, wo es wirklich gebraucht wird. Interaktive Komponenten – ein Menü das aufklappt, ein Formular das validiert – werden gezielt eingebunden. Alles andere ist reines HTML und CSS.
Islands Architecture
Das Konzept dahinter heißt Islands Architecture: Die Seite ist überwiegend statisches HTML (“das Meer”), mit vereinzelten interaktiven Inseln dort, wo Interaktivität wirklich notwendig ist.
Jede Insel wird unabhängig geladen und nur dann hydriert, wenn sie sichtbar wird oder der Nutzer mit ihr interagiert. Das reduziert die JavaScript-Last dramatisch.
Astro.js unterstützt dabei mehrere Frameworks gleichzeitig: React, Vue, Svelte, Solid – interaktive Komponenten können aus jedem dieser Frameworks eingebunden werden, während der Rest der Seite reines HTML bleibt.
Content Collections: Strukturierte Inhalte ohne CMS
Für Websites mit viel Inhalt – Blogs, Portfolios, Dokumentationen – bietet Astro.js Content Collections. Markdown-Dateien werden mit einem typsicheren Schema versehen:
- Pflichtfelder werden zur Build-Zeit geprüft
- Fehlende oder fehlerhafte Frontmatter-Felder erzeugen Build-Fehler statt stiller Bugs
- TypeScript-Autovervollständigung funktioniert bis in die Markdown-Metadaten
Das ersetzt für viele Projekte ein vollständiges CMS – ohne Datenbank, ohne Backend, ohne laufende Kosten.
Was Astro.js konkret bringt
Lighthouse-Scores nahe 100: Statisches HTML, kein unnötiges JavaScript, automatische Bildoptimierung, optimiertes CSS – die Grundlage für Top-Scores ist in Astro.js von Haus aus gegeben.
Günstigeres Hosting: Statische Dateien können auf jedem CDN gehostet werden – Netlify, Cloudflare Pages, GitHub Pages. Kein Server, der rund um die Uhr läuft, keine Serverkosten.
Sichere Architektur: Keine Datenbank, kein dynamisches Backend – die Angriffsfläche ist minimal. SQL-Injection und serverseitige Sicherheitslücken existieren schlicht nicht.
Einfaches Deployment: astro build erzeugt einen dist/-Ordner mit fertigem HTML, CSS und Assets. Der wird deployed. Fertig.
Wann Astro.js die richtige Wahl ist
Astro.js ist ideal für:
- Unternehmenswebsites und Portfolios: Hauptsächlich statische Inhalte, die selten geändert werden
- Blogs und Magazin-Seiten: Viele Seiten, Markdown-basierter Content, wenig Interaktivität
- Landingpages und Marketing-Seiten: Performance ist entscheidend für Conversion
- Dokumentationen: Strukturierter Content, Navigation, Suche – alles statisch machbar
Astro.js ist weniger geeignet für Anwendungen mit Nutzerkonten, komplexen Datenbankoperationen oder Echtzeit-Updates. Dort ist Next.js die bessere Wahl.
Astro.js vs. Next.js: Die pragmatische Entscheidung
Die Frage ist nicht, welches Framework besser ist. Die Frage ist, was das Projekt braucht.
| Anforderung | Astro.js | Next.js |
|---|---|---|
| Informationswebsite | ✓ Ideal | Überdimensioniert |
| Blog / Magazin | ✓ Ideal | Möglich |
| Nutzeranmeldung | Begrenzt | ✓ Ideal |
| Datenbankanbindung | Begrenzt | ✓ Ideal |
| Maximale Performance | ✓ Optimal | Gut |
| Hostingkosten | Minimal | Moderat |
In der Praxis setze ich Astro.js für Websites und Next.js für Webapplikationen ein. Beide Entscheidungen folgen derselben Logik: das richtige Werkzeug für die konkrete Aufgabe.
Fazit
Astro.js ist kein Hype-Framework. Es löst ein echtes Problem: Websites, die mit React-ähnlichen Frameworks gebaut werden, laden oft unnötig langsam. Astro.js dreht das Grundprinzip um – HTML first, JavaScript nur wenn nötig.
Das Ergebnis sind Websites, die schnell laden, günstig zu betreiben sind und Google mit guten Core Web Vitals-Werten überzeugen.