Jede Sekunde zählt. Wenn deine Website länger als 3 Sekunden zum Laden braucht, verlierst du über die Hälfte deiner Besucher. Du klicken zurück, wählen ein anderes Ergebnis – und kommen nie wieder. Gleichzeitig ist Ladegeschwindigkeit ein offizieller Google-Ranking-Faktor. Langsame Websites werden in den Suchergebnissen nach unten verschoben.

In diesem Guide zeige ich dir Schritt für Schritt, wie du deine Website schneller machst – von den Grundlagen wie Bildoptimierung bis hin zu fortgeschrittenen Techniken wie Critical CSS und Lazy Loading.

Core Web Vitals: Die 3 Metriken die Google misst

Google bewertet die Performance deiner Website anhand von drei konkreten Metriken, den Core Web Vitals:

1. Largest Contentful Paint (LCP)

Misst, wie schnell das größte sichtbare Element der Seite geladen wird – typischerweise ein Headerbild, ein Video oder ein großer Textblock.

Gut: unter 2,5 Sekunden
Verbesserungswürdig: 2,5–4,0 Sekunden
Schlecht: über 4,0 Sekunden

2. Interaction to Next Paint (INP)

Misst, wie schnell die Seite auf Nutzerinteraktionen reagiert – Klicks, Tippen, Tastatureingaben. Ersetzt seit 2024 den alten First Input Delay (FID).

Gut: unter 200 Millisekunden
Verbesserungswürdig: 200–500 Millisekunden
Schlecht: über 500 Millisekunden

3. Cumulative Layout Shift (CLS)

Misst, wie stark sich Elemente auf der Seite verschieben, während sie lädt. Kennst du das? Du willst auf einen Button klicken, aber plötzlich rutscht ein Bild nach und du klickst auf etwas anderes. Das ist hoher CLS.

Gut: unter 0,1
Verbesserungswürdig: 0,1–0,25
Schlecht: über 0,25

Bildoptimierung: Der größte Hebel

Bilder machen auf den meisten Websites 50–80% des gesamten Datenvolumens aus. Hier liegt das größte Optimierungspotenzial.

Das richtige Bildformat wählen

WebP – das beste Allround-Format für 2026. Bis zu 30% kleiner als JPEG bei gleicher Qualität. Wird von allen modernen Browsern unterstützt
AVIF – noch besser als WebP (bis zu 50% kleiner), aber noch nicht überall unterstützt. Ideal als erste Wahl mit WebP als Fallback
JPEG – für Fotos, wenn WebP/AVIF keine Option sind. Qualitätsstufe 75–85% reicht meist
PNG – nur für Bilder mit Transparenz oder scharfe Grafiken/Icons. Für Fotos viel zu groß
SVG – für Logos, Icons und einfache Grafiken. Unendlich skalierbar, winzige Dateigröße

Bilder richtig dimensionieren

Eines der häufigsten Probleme: Ein Bild ist 4000 Pixel breit, wird aber nur in 800 Pixel Breite dargestellt. Der Browser muss trotzdem das volle Bild herunterladen und dann skalieren. Die Lösung:

Erstelle Bilder in der tatsächlichen Darstellungsgröße (maximal 2x für Retina-Displays)
Nutze das srcset-Attribut für responsive Bilder – liefere verschiedene Größen für verschiedene Bildschirme
Setze immer width und height im HTML – das vermeidet Layout Shifts (CLS)

Bildkomprimierung

Auch nach der Wahl des richtigen Formats und der richtigen Größe kannst du Bilder weiter komprimieren:

Squoosh (squoosh.app) – kostenloses Tool von Google, direkt im Browser
TinyPNG (tinypng.com) – komprimiert PNG und JPEG mit minimalem Qualitätsverlust
ShortPixel – WordPress-Plugin für automatische Komprimierung beim Upload

Faustregel: Kein einzelnes Bild auf deiner Website sollte größer als 200 KB sein. Hero-Bilder maximal 300 KB. Thumbnails unter 50 KB.

Lazy Loading: Nur laden, was sichtbar ist

Lazy Loading bedeutet, dass Bilder und andere Ressourcen erst geladen werden, wenn der Nutzer zu ihnen scrollt. Alles, was sich außerhalb des sichtbaren Bereichs (Viewport) befindet, wird erst bei Bedarf nachgeladen.

Die einfachste Implementierung:

<img src="bild.webp" loading="lazy" alt="Beschreibung" width="800" height="600">

Das loading="lazy" Attribut wird von allen modernen Browsern unterstützt und erfordert kein JavaScript. Wichtig: Das erste sichtbare Bild (Hero-Image, Logo) sollte nicht lazy geladen werden – das würde den LCP verschlechtern.

Caching: Wiederholte Besuche beschleunigen

Browser-Caching speichert statische Dateien (CSS, JavaScript, Bilder, Schriften) lokal auf dem Gerät des Besuchers. Beim nächsten Besuch müssen diese Dateien nicht erneut heruntergeladen werden.

Cache-Control Header setzen

Über den Webserver (z.B. nginx, Apache, Caddy) kannst du festlegen, wie lange Dateien gecacht werden sollen:

Bilder, Schriften: 1 Jahr (sie ändern sich selten)
CSS und JavaScript: 1 Monat bis 1 Jahr (mit Versionierung im Dateinamen)
HTML-Dateien: kurz oder gar nicht cachen (sollen immer aktuell sein)

CDN (Content Delivery Network)

Ein CDN verteilt deine Dateien auf Server weltweit. Der nächstgelegene Server liefert die Dateien an den Besucher – das reduziert die Latenz erheblich. Für deutsche Websites mit deutschem Publikum ist ein CDN mit Servern in Frankfurt oder Amsterdam ideal.

Cloudflare – kostenloser Basis-Plan mit CDN, DDoS-Schutz und automatischer Optimierung
Bunny CDN – günstig, leistungsstark, Server in Europa

CSS und JavaScript optimieren

CSS-Optimierung

Minifizierung – entferne Leerzeichen, Kommentare und unnötige Zeichen. Tools: cssnano, clean-css
Critical CSS – extrahiere das CSS, das für den sichtbaren Bereich nötig ist, und lade es inline. Der Rest wird asynchron nachgeladen
Unused CSS entfernen – die meisten Websites laden 50–80% CSS, das auf der aktuellen Seite nicht verwendet wird. Tools: PurgeCSS, UnCSS

JavaScript-Optimierung

Defer und Async – lade JavaScript-Dateien nicht render-blockierend: <script defer src="..">
Tree Shaking – bei Bundlern (Webpack, Vite): nur den Code einbinden, der tatsächlich verwendet wird
Third-Party Scripts minimieren – jedes externe Script (Analytics, Chat-Widgets, Social-Media-Buttons) verlangsamt die Seite. Prüfe, ob jedes Script wirklich nötig ist

Schriften optimieren

Web-Schriften (Google Fonts, Adobe Fonts) können die Ladezeit erheblich beeinflussen. Jede Schriftart und jedes Gewicht ist eine zusätzliche Datei.

Maximal 2 Schriftfamilien und 3–4 Gewichte verwenden
font-display: swap setzen – zeigt sofort den Systemfont und tauscht ihn aus, sobald die Web-Schrift geladen ist
Schriften lokal hosten statt von Google Fonts laden – spart einen DNS-Lookup und ist DSGVO-konformer
WOFF2-Format verwenden – das kompakteste Web-Font-Format
Subsetting – lade nur die Zeichen, die du brauchst (lateinische Buchstaben, keine kyrillischen etc.)

Server-Performance verbessern

Hosting-Qualität

Billiges Shared Hosting mit Dutzenden anderen Websites auf demselben Server ist der häufigste Performance-Killer auf Server-Seite. Für eine schnelle Website brauchst du:

Schnelle Time to First Byte (TTFB) – unter 200ms idealerweise
SSD-Speicher – deutlich schneller als klassische Festplatten
Server-Standort in Deutschland – für deutsche Besucher die kürzeste Leitung
HTTP/2 oder HTTP/3 – schnellere Datenübertragung als HTTP/1.1

Komprimierung aktivieren

Gzip oder Brotli Komprimierung reduziert die Dateigröße von HTML, CSS und JavaScript um 60–80%. Brotli ist neuer und noch effizienter als Gzip. Beide sollten auf dem Server aktiviert sein.

Die besten Tools für Speed-Analyse

Google PageSpeed Insights (pagespeed.web.dev) – der Standard-Test, basiert auf Lighthouse. Gibt einen Score von 0–100 und konkrete Verbesserungsvorschläge
GTmetrix (gtmetrix.com) – detaillierter Report mit Wasserfall-Diagramm. Zeigt genau, welche Dateien wie lange zum Laden brauchen
WebPageTest (webpagetest.org) – der Profi-Test. Verschiedene Server-Standorte, Verbindungsgeschwindigkeiten und Browser wählbar
Chrome DevTools – Network-Tab zeigt Ladezeiten in Echtzeit, Performance-Tab misst Core Web Vitals
Google Search Console – zeigt Core Web Vitals für deine gesamte Website basierend auf echten Nutzerdaten

Quick-Win-Checkliste: 10 Schritte zur schnelleren Website

Bilder in WebP konvertieren und komprimieren
Lazy Loading für alle Bilder unterhalb des Viewports aktivieren
CSS und JavaScript minifizieren
JavaScript mit defer oder async laden
Browser-Caching konfigurieren
Schriften lokal hosten und auf 2 Familien beschränken
Gzip/Brotli Komprimierung auf dem Server aktivieren
Unnötige Plugins und Third-Party Scripts entfernen
Bildgrößen (width/height) im HTML angeben
Hosting-Provider prüfen – TTFB unter 200ms?

Fazit: Geschwindigkeit ist kein Luxus

Eine schnelle Website ist kein Nice-to-Have – sie ist die Grundlage für gute Rankings, zufriedene Besucher und höhere Conversion-Raten. Die meisten Optimierungen kosten kein Geld, nur etwas Zeit und Know-how. Fange mit den Bildern an – das bringt in den meisten Fällen den größten sofortigen Effekt.

Du möchtest deine Website-Performance professionell analysieren und optimieren lassen? Wir prüfen deine Seite auf alle relevanten Speed-Faktoren und setzen die Optimierungen für dich um – messbar und nachvollziehbar.

Website-Ladezeit optimieren: So wird deine Seite blitzschnell