Case-Study: Astro-Blog mit minimalem Setup auf 99

Persönlicher Blog des Entwicklers, Themen rund um Frontend und DevOps. ~500 Sessions/Monat. Lighthouse-Score Mobile aus dem Stand: 99/97/100/100. Keine speziellen Tricks - nur saubere Defaults.

Warum es funktioniert: Astro liefert < 5 KB JS

Astro generiert standardmäßig statisches HTML mit minimalen Client-JS - nur dort wo Interaktivität nötig ist (Islands-Pattern). Bei einem Blog ohne interaktive Elemente: 0 KB initial-JS. Nur ein Inline-Script für den Dark-Mode-Toggle.

Bilder via Astro Image

import { Image } from 'astro:assets';
import hero from '../assets/hero.jpg';

<Image src={hero} alt="..." widths={[400, 800, 1200]}
       sizes="(max-width: 600px) 100vw, 800px" loading="lazy" />

Astro generiert daraus automatisch AVIF + WebP + JPG-Fallback in den angeforderten Größen, mit srcset und korrekten width/height-Attributen.

Self-hosted Fonts

Inter-Schrift selbst gehostet (statt Google Fonts CDN). Vorteile: kein zusätzlicher Round-Trip zu fonts.googleapis.com, kein CORS, kein DSGVO-Problem. Nur die latin-Subsets (400 + 700) als woff2 = ~30 KB total. Mit font-display: swap + preload.

Hosting auf Netlify

Netlify Free-Plan reicht völlig. TTFB liegt bei ~70 ms aus dem Frankfurt-Edge. Asset-Caching automatisch konfiguriert (Cache-Control für hash-versionierte Assets max-age=31536000, HTML mit no-cache).

Was bewusst NICHT eingebaut wurde

• Keine Newsletter-Box (eine Komponente weniger, kein JS)
• Kein Comments-System (gibt sonst Layout-Shifts, JS-Load)
• Kein Live-Chat-Widget
• Kein Google Analytics - nur Umami self-hosted (~3 KB Script)

Trade-off: weniger Features, dafür maximale Performance und keine Cookie-Banner-Friction.

Lehre für andere Sites

Lighthouse-Score 99 ist mit dem richtigen Stack einfach. Bei React-SPAs mit GA/FB-Pixel/Chat-Widget/Newsletter-Popup ist 99 hingegen praktisch unerreichbar. Die Wahl der Tools macht den größten Unterschied - Optimierung kommt erst danach.