Wie wir eine Website mit Astro um 300 % beschleunigt haben

Einleitung

Die Geschwindigkeit einer Website ist kein „netter Bonus“, sondern ein direkter Faktor für Konversion und SEO. Laut Google senkt eine Ladeverzögerung von nur 1 Sekunde die Konversion um bis zu 20 %.

Ein Kunde kam mit einem typischen Problem zu uns:

• eine Website auf einem modernen Stack
• schönes Design
• PageSpeed ~40
• hohe Absprungrate

Die Aufgabe war einfach formuliert, aber schwer umzusetzen: die Website mindestens um das Zweifache zu beschleunigen, ohne die visuelle Qualität zu beeinträchtigen.

Am Ende erreichten wir eine Beschleunigung von über 300 %.

Ausgangsdaten

Vor der Optimierung:

• Framework: React + SPA
• JS-Bundle: ~800 KB
• LCP: 3,8 s
• CLS: 0,21
• PageSpeed: 38–45

Hauptprobleme:

• zu viel JavaScript
• die gesamte Website ist eine einzige SPA
• Animationen und Effekte werden sofort geladen
• schlechte SEO-Leistung

Warum wir Astro gewählt haben

Astro ist kein weiteres Framework, sondern ein anderer Ansatz für die Website-Architektur.

Hauptvorteile von Astro:

• HTML als Standard
• JavaScript wird nur dort geladen, wo es benötigt wird
• Server Islands
• Ausgezeichnetes SEO von Haus aus
• Minimale Laufzeit

Einfach ausgedrückt:

Astro entfernt alles Unnötige zwischen dem Benutzer und dem Inhalt.

Was wir Schritt für Schritt getan haben

1️⃣ Umstieg von SPA auf statische Generierung

• jede Seite → fertiges HTML
• der Server liefert den Inhalt sofort aus
• der Browser muss nicht „denken“

📉 Ergebnis: LCP sank von 3,8 s auf 1,6 s

2️⃣ Unnötiges JavaScript entfernt

Wir haben eine Prüfung durchgeführt und eine einfache Frage gestellt:

„Wird hier JavaScript benötigt?“

Die Antwort war in 70 % der Fälle – nein.

• globale SPA-Laufzeit entfernt
• Interaktivität in Client-Only-Komponenten ausgelagert
• client:load und client:idle verwendet

📉 JS-Bundle:

• vorher: ~800 KB
• nachher: ~40 KB

3️⃣ Hero und Animationen optimiert

Der schwerste Teil jeder Landingpage ist der Hero-Bereich.

Wir haben:

• ein Video als Hintergrund mit Preload erstellt
• Lazy-Loading hinzugefügt
• komplexe Effekte in den Hintergrund verschoben
• die FPS von Animationen auf 30 begrenzt

📉 CLS sank fast auf null.

4️⃣ Bilder und Schriftarten

Ein Klassiker, der oft ignoriert wird:

• WebP + Fallback
• responsive Bilder
• Preload für kritische Bilder
• Systemschriftarten + variable Schriftarten

Endergebnisse

Nach der Optimierung:

• PageSpeed: 95–99
• LCP: ~1,1 s
• CLS: 0,01
• JS-Bundle: ~40 KB
• Absprungrate: –40 %
• Konversion: +150 %

Schlussfolgerungen

1. Geschwindigkeit ist Architektur, keine Hacks
2. Mehr Technologie ≠ bessere Website
3. Astro ist ideal für:
   • Landingpages
   • Unternehmenswebsites
   • Marketingseiten
   • SEO-Projekte

Wenn Sie eine schnelle, schöne und effektive Website benötigen, ist Astro eines der besten Werkzeuge im Jahr 2025.

Benötigen Sie das gleiche Ergebnis?

Wenn Sie möchten:

• PageSpeed 90+
• einen schnellen Start
• einen modernen Stack
• eine höhere Konversion

👉 Kontaktieren Sie uns