CDN vs. lokales Hosting statischer Websites: Vor- und Nachteile im Vergleich

Einleitung: Wo sollten Ihre Dateien liegen?

Wenn Sie mit Frameworks wie Astro, Next.js oder Hugo eine statische Website bauen, haben Sie im Wesentlichen zwei Möglichkeiten, Ihre statischen Assets (Bilder, CSS, JavaScript) auszuliefern:

1. Lokales Hosting: Die Ressourcen liegen direkt im Projekt-Repository (z. B. im Ordner public/ oder src/assets/). Sie werden unter derselben Domain wie die Website serviert.
2. CDN-Hosting (Content Delivery Network): Die Assets werden auf einen separaten Dienst hochgeladen (z. B. Cloudflare R2, AWS S3 oder ein spezialisierter Bild-CDN) und von dort verlinkt.

Moderne Hosting-Plattformen wie Vercel und Cloudflare Pages verwischen diese Grenze, indem sie standardmäßig ein CDN bereitstellen – trotzdem ist es wichtig, die grundlegenden Trade-offs zu verstehen, um Performance und Kosten optimal zu steuern.

Lokales Hosting: Einfach und die moderne Standardwahl

Bei aktuellen statischen Hosting-Plattformen ist der Begriff „lokal“ etwas irreführend. Sobald Sie Ihre Website auf Vercel, Netlify oder Cloudflare Pages deployen, werden Ihre Assets automatisch über deren weltweites CDN verteilt.

Vorteile:

• Einfachheit: Der mit Abstand unkomplizierteste Weg. Dateien ins Projekt legen, verlinken, fertig. Keine zusätzlichen Build-Schritte oder Dienste.
• Keine Extrakosten: Die Auslieferung ist im Hosting-Plan enthalten. Keine überraschenden Bandbrechnungsrechnungen von Drittanbietern.
• Vorteile von HTTP/2 & HTTP/3: Ressourcen von derselben Domain erlauben dem Browser, eine einzige Verbindung wiederzuverwenden – extrem effizient bei modernen Protokollen, keine zusätzlichen DNS-Lookups und Handshakes.
• SEO-Vorteil (vermutlich): Bilder bleiben auf Ihrer eigenen Domain, sodass Google den gesamten „SEO-Wert“ Ihrer Bilder Ihrer Seite zuschreibt. Kein Risiko, dass Suchmaschinen die Bilder einem fremden CDN-Domain zuordnen.

Nachteile:

• Eingeschränkte Optimierungs-Features: Keine dynamische Bildgrößenanpassung, automatische Format-Konvertierung (z. B. AVIF) oder gerätespezifische Optimierungen, wie sie spezialisierte CDNs bieten.
• Build-Zeit: Tausende Bilder können das Repository aufblähen und die Build-Zeit erheblich verlängern.
• Git-Repository-Größe: Große Mediendateien gehören nicht in Git. Git LFS hilft, macht aber alles komplizierter.

**Fazit: Für die meisten kleinen bis mittelgroßen statischen Websites (Blogs, Portfolios, Marketing-Seiten) ist lokales Hosting die beste Wahl. Die Einfachheit und Performance-Vorteile auf modernen Plattformen überwiegen die Nachteile bei weitem.

Dediziertes CDN-Hosting: Für Skalierung und fortgeschrittene Features

Hier werden die Assets in einem Cloud-Speicher (z. B. AWS S3, Cloudflare R2) abgelegt und über ein CDN ausgeliefert.

Vorteile:

• Fortgeschrittene Bildoptimierung: Dienste wie Cloudinary, Imgix oder Cloudflare Images liefern automatisch das beste Format (AVIF/WebP), passen die Größe an das Endgerät an und wenden starke Kompression an – oft spürbare Performance-Gewinne.
• Entkoppelt vom Build-Prozess: Das Repository bleibt schlank und Build-Zeiten kurz, weil nur externe Links verwendet werden. Ideal bei viel nutzergeneriertem Content.
• Bei extrem hohem Traffic günstiger: Bei Terabyte-weise ausgelieferten Daten können dedizierte CDNs pro GB günstiger sein als die Top-Tarife der Statik-Hosting-Anbieter.

Nachteile:

• Komplexität: Ein weiterer Dienst, der verwaltet, konfiguriert und bezahlt werden muss. Sie brauchen einen Upload-Workflow.
• Kosten: Am Anfang günstig, aber bei starkem Traffic schwer kalkulierbar und schnell teuer.
• Performance-Overhead: Separate Domains erfordern zusätzliche DNS-Abfragen und Verbindungs-Handshakes – das kann die Initialladung (vor allem auf langsamen Netzen) spürbar verlangsamen.
• SEO-Komplexität: Sie müssen sicherstellen, dass Suchmaschinen die Bilder weiterhin Ihrer Domain zuordnen. Best Practice: CNAME-Subdomain wie cdn.deinedomain.de.

Fazit: Dedizierte CDNs lohnen sich vor allem bei großen Anwendungen, Websites mit viel nutzergeneriertem Content** oder wenn Sie zwingend fortgeschrittene, dynamische Bildverarbeitung benötigen, die die Hosting-Plattform nicht bietet.

Empfehlung 2025: Fang lokal an, skaliere bei Bedarf

Für ein neues Projekt lautet die klare Antwort: Starte mit lokalem Hosting.

1. Wähle einen modernen Statik-Host wie Vercel, Netlify oder Cloudflare Pages.
2. Lege Bilder und Assets im Projekt-Repository ab.
3. Optimiere Bilder vor dem Commit (z. B. mit unserem Bildkompressor und Bildkonverter in WebP/AVIF).
4. Nutze <picture>-Tags und srcset, um responsive Bilder bereitzustellen.

Diese einfache, kostengünstige Variante reicht für 95 % aller statischen Websites performance-technisch völlig aus. Nur wenn Sie konkrete Skalierungsprobleme haben (riesige Mediathek bremst Builds aus oder Sie benötigen komplexe Echtzeit-Bildverarbeitung), sollten Sie auf ein dediziertes CDN umsteigen.