← Alle Artikel
Zuletzt aktualisiert: 2026-03-30

Website zu langsam? So finden und beheben Sie die 3 größten Geschwindigkeitsprobleme

Die häufigsten Website-Geschwindigkeitsprobleme finden und beheben. Bildoptimierung, Render-Blocking, Caching.

Zusammenfassung (TL;DR)

Die meisten langsamen Websites haben drei Kernprobleme: nicht optimierte Bilder, render-blockierende Ressourcen und fehlende Cache-Header. Bilder lassen sich durch Konvertierung nach WebP und loading="lazy" optimieren. Render-Blocking beheben Sie durch async/defer bei Skripten und das Inlining von kritischem CSS. Caching aktivieren Sie über korrekte Cache-Control-Header. Allein diese drei Maßnahmen können Ihren PageSpeed-Score um 30–60 Punkte verbessern.

Voraussetzungen

Schritt 1: Aktuelle Geschwindigkeit messen

Google PageSpeed Insights

Öffnen Sie pagespeed.web.dev und geben Sie Ihre URL ein. Der Bericht liefert getrennte Bewertungen für Mobil und Desktop. Konzentrieren Sie sich auf den Abschnitt Empfehlungen — dort finden Sie konkrete Maßnahmen, sortiert nach geschätztem Einsparpotenzial. Unter Diagnose stehen weiterführende technische Details.

Notieren Sie sich folgende Kennzahlen: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) und Interaction to Next Paint (INP). Das sind die Core Web Vitals, die direkt Ihr Google-Ranking beeinflussen.

Lighthouse in den Chrome DevTools

Für eine detaillierte lokale Analyse nutzen Sie Lighthouse direkt in Chrome:

  1. Öffnen Sie Ihre Website in Google Chrome.
  2. Drücken Sie F12 (oder Cmd+Option+I auf dem Mac), um die DevTools zu öffnen.
  3. Klicken Sie auf den Reiter Lighthouse (ggf. unter >> versteckt).
  4. Wählen Sie den Modus Navigation, als Gerät Mobilgerät und aktivieren Sie Leistung.
  5. Klicken Sie auf Seitenaufbau analysieren.
  6. Warten Sie 30–60 Sekunden. Der Bericht zeigt einen Score von 0–100.

Lighthouse läuft lokal auf Ihrem Rechner — schließen Sie andere Tabs und Erweiterungen für verlässliche Ergebnisse. Führen Sie den Test mindestens dreimal durch und bilden Sie den Mittelwert.

Problem 1: Nicht optimierte Bilder

Bilder machen auf den meisten Websites 50–70 % der Gesamtdatenmenge aus. Allein die Bildoptimierung kann die Ladezeit halbieren.

Bilder nach WebP konvertieren

WebP liefert bei vergleichbarer Qualität 25–35 % kleinere Dateien als JPEG. Installieren Sie cwebp und konvertieren Sie Ihre Bilder:

# cwebp installieren (macOS)
brew install webp

# cwebp installieren (Ubuntu/Debian)
sudo apt install webp

# Einzelnes Bild konvertieren (Qualität 80 ist ein guter Kompromiss)
cwebp -q 80 bild.jpg -o bild.webp

# Alle JPEGs in einem Verzeichnis konvertieren
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

# Alternative mit ImageMagick
magick eingabe.jpg -quality 80 ausgabe.webp

# Stapelverarbeitung mit ImageMagick
for f in *.png; do magick "$f" -quality 80 "${f%.png}.webp"; done

WebP mit Fallback ausliefern

Mit dem <picture>-Element liefern Sie WebP an unterstützende Browser und bieten älteren Browsern ein Fallback:

<picture>
  <source srcset="hero.webp" type="image/webp">
  <source srcset="hero.jpg" type="image/jpeg">
  <img src="hero.jpg" alt="Hero-Bild" width="1200" height="600">
</picture>

Lazy Loading aktivieren

Bilder unterhalb des sichtbaren Bereichs sollten erst geladen werden, wenn der Nutzer dorthin scrollt. Moderne Browser unterstützen das nativ:

<img src="produkt.webp" alt="Produkt" loading="lazy" width="400" height="300">

Wichtig: Fügen Sie loading="lazy" nicht zum LCP-Bild hinzu (meist das Hero-Bild oder das erste sichtbare Bild). Das würde Ihren wichtigsten Inhalt verzögern.

Responsive Bilder mit srcset

Liefern Sie unterschiedliche Bildgrößen je nach Bildschirmbreite, damit ein 375px breites Smartphone kein 2000px-Bild laden muss:

<img 
  src="foto-800.webp" 
  srcset="foto-400.webp 400w, foto-800.webp 800w, foto-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
  alt="Responsives Foto"
  loading="lazy"
  width="1200" height="800"
>

Die verschiedenen Größen erzeugen Sie mit ImageMagick:

magick original.jpg -resize 400x -quality 80 foto-400.webp
magick original.jpg -resize 800x -quality 80 foto-800.webp
magick original.jpg -resize 1200x -quality 80 foto-1200.webp

Problem 2: Render-blockierende Ressourcen

Stößt der Browser auf ein <script> oder <link rel="stylesheet"> im <head>, hält er das Rendern an, bis die Ressource heruntergeladen und ausgeführt ist. Das verzögert den First Contentful Paint und den LCP direkt.

async und defer für Skripte

<!-- Blockiert das Rendering (SCHLECHT) -->
<script src="analytics.js"></script>

<!-- Wird parallel geladen, sofort ausgeführt wenn bereit (GUT für unabhängige Skripte) -->
<script src="analytics.js" async></script>

<!-- Wird parallel geladen, nach dem HTML-Parsing ausgeführt (GUT für abhängige Skripte) -->
<script src="app.js" defer></script>

Verwenden Sie async für Skripte ohne DOM- oder Script-Abhängigkeiten (Analytics, Tracking). Verwenden Sie defer für Skripte, die das DOM benötigen oder in bestimmter Reihenfolge laufen müssen.

Kritisches CSS inline einbinden

Kritisches CSS umfasst das Minimum an Styles, das zum Rendern des sichtbaren Bereichs nötig ist. Binden Sie es direkt im <head> ein und laden Sie das vollständige Stylesheet asynchron:

<head>
  <style>
    /* Kritisches CSS — nur für den sichtbaren Bereich */
    body { margin: 0; font-family: system-ui, sans-serif; }
    .header { background: #1a1a2e; color: #fff; padding: 1rem; }
    .hero { min-height: 60vh; display: flex; align-items: center; }
  </style>
  
  <!-- Vollständiges CSS asynchron laden -->
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>

Zum automatischen Extrahieren von kritischem CSS eignet sich das npm-Paket critical:

npx critical https://ihrewebsite.de --inline --minify > critical-output.html

Code Splitting

Falls Sie einen Bundler wie Webpack oder Vite nutzen, aktivieren Sie Code Splitting, um pro Seite nur das tatsächlich benötigte JavaScript zu laden:

// Statt alles auf einmal zu importieren
import { heavyChart } from './charts';

// Dynamisch importieren, wenn tatsächlich benötigt
const { heavyChart } = await import('./charts');

Problem 3: Fehlende Caching-Strategie

Ohne Cache-Header lädt der Browser bei jedem Seitenaufruf alle Ressourcen erneut herunter. Richtiges Caching macht wiederholte Besuche nahezu sofort.

Apache (.htaccess)

# mod_expires aktivieren
<IfModule mod_expires.c>
  ExpiresActive On
  
  # Bilder — 1 Jahr cachen
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  
  # CSS und JS — 1 Monat cachen
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  
  # Schriften — 1 Jahr cachen
  ExpiresByType font/woff2 "access plus 1 year"
  
  # HTML — nicht cachen (immer frisch laden)
  ExpiresByType text/html "access plus 0 seconds"
</IfModule>

# Cache-Control-Header
<IfModule mod_headers.c>
  <FilesMatch "\.(jpg|jpeg|png|webp|gif|svg|ico|woff2)$">
    Header set Cache-Control "public, max-age=31536000, immutable"
  </FilesMatch>
  <FilesMatch "\.(css|js)$">
    Header set Cache-Control "public, max-age=2592000"
  </FilesMatch>
</IfModule>

# ETags konfigurieren
FileETag MTime Size

Nginx

# In den server-Block der nginx.conf einfügen

# Statische Assets — 1 Jahr Cache
location ~* \.(jpg|jpeg|png|webp|gif|svg|ico|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
    etag on;
}

# CSS/JS — 1 Monat Cache
location ~* \.(css|js)$ {
    expires 30d;
    add_header Cache-Control "public";
    etag on;
}

# HTML — kein Cache
location ~* \.html$ {
    expires -1;
    add_header Cache-Control "no-store, no-cache, must-revalidate";
}

Tipp: Verwenden Sie Dateinamen mit Hash (z.B. style.a3f9b2.css), damit Sie aggressiv cachen und trotzdem Updates sofort ausliefern können.

Bonus: Gzip-/Brotli-Komprimierung aktivieren

Textbasierte Dateien (HTML, CSS, JS, SVG, JSON) lassen sich um 60–80 % komprimieren. Das ist einer der einfachsten Performance-Gewinne.

Apache

# Gzip-Komprimierung
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css application/javascript
  AddOutputFilterByType DEFLATE application/json image/svg+xml
  AddOutputFilterByType DEFLATE text/xml application/xml
  AddOutputFilterByType DEFLATE font/woff2 application/font-woff2
</IfModule>

# Brotli (falls mod_brotli verfügbar — ab Apache 2.4.26)
<IfModule mod_brotli.c>
  AddOutputFilterByType BROTLI_COMPRESS text/html text/css application/javascript
  AddOutputFilterByType BROTLI_COMPRESS application/json image/svg+xml
  BrotliCompressionQuality 6
</IfModule>

Nginx

# Gzip
gzip on;
gzip_vary on;
gzip_min_length 256;
gzip_types text/plain text/css application/javascript application/json image/svg+xml text/xml application/xml;

# Brotli (erfordert das Modul ngx_brotli)
brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/javascript application/json image/svg+xml;

Prüfen Sie, ob die Komprimierung funktioniert:

curl -H "Accept-Encoding: gzip, br" -sI https://ihrewebsite.de | grep -i content-encoding
# Erwartete Ausgabe: content-encoding: br (oder gzip)

Bonus: CDN mit Cloudflare einrichten

Ein CDN speichert Ihre statischen Assets auf Servern weltweit und reduziert dadurch die Latenz für entfernte Besucher.

  1. Erstellen Sie ein kostenloses Konto auf cloudflare.com.
  2. Fügen Sie Ihre Domain hinzu und wählen Sie den Free-Plan.
  3. Cloudflare scannt Ihre bestehenden DNS-Einträge. Überprüfen Sie diese und klicken Sie auf Weiter.
  4. Ändern Sie bei Ihrem Domain-Registrar die Nameserver auf die von Cloudflare angegebenen (z.B. ada.ns.cloudflare.com, bob.ns.cloudflare.com).
  5. Warten Sie auf die DNS-Propagierung (in der Regel 1–24 Stunden).
  6. Im Cloudflare-Dashboard unter Speed → Optimierung aktivieren Sie Auto Minify (HTML, CSS, JS) und Brotli.
  7. Unter Caching → Konfiguration stellen Sie die Browser-Cache-TTL auf Bestehende Header respektieren, sofern Sie diese bereits konfiguriert haben.

Core Web Vitals verstehen

Google verwendet drei Core Web Vitals als Ranking-Signale:

Datenbank-Abfragen optimieren

Wenn Ihre Website eine Datenbank nutzt (WordPress, eigenes CMS), können langsame Abfragen bei jedem Seitenaufruf Sekunden kosten.

Slow Query Log aktivieren (MySQL/MariaDB)

# In /etc/mysql/my.cnf oder /etc/my.cnf unter [mysqld] einfügen
slow_query_log = 1
slow_query_log_file = /var/log/mysql/slow.log
long_query_time = 1
log_queries_not_using_indexes = 1

# MySQL neu starten
sudo systemctl restart mysql

Nach einigen Stunden Laufzeit prüfen Sie die langsamsten Abfragen:

sudo mysqldumpslow -s t -t 10 /var/log/mysql/slow.log

Abfragen mit EXPLAIN analysieren

EXPLAIN SELECT * FROM wp_posts WHERE post_status = 'publish' ORDER BY post_date DESC LIMIT 10;

Achten Sie auf:

Fehlende Indizes anlegen:

ALTER TABLE wp_posts ADD INDEX idx_status_date (post_status, post_date);

Messen mit WebPageTest.org

WebPageTest.org bietet Filmstreifen-Ansichten, Wasserfall-Diagramme und mehrstufige Tests — kostenlos.

  1. Öffnen Sie webpagetest.org und geben Sie Ihre URL ein.
  2. Wählen Sie einen Teststandort in der Nähe Ihrer Zielgruppe.
  3. Wählen Sie Chrome mit einer Cable-Verbindung für Desktop oder Mobile 4G für mobile Tests.
  4. Unter Advanced Settings → Test setzen Sie Number of Tests to Run: 3 und aktivieren First View and Repeat View.
  5. Klicken Sie auf Start Test und warten Sie auf die Ergebnisse.

Das Wasserfall-Diagramm ist die nützlichste Ansicht — es zeigt jede einzelne Anfrage, ihre Dauer und welche das Rendering blockieren. Achten Sie auf lange Balken (langsame Ressourcen), rote Balken (fehlgeschlagene Anfragen) und Lücken (Leerlaufzeiten, in denen der Browser wartet).

Fehlersuche

"Mein Score hat sich trotz Änderungen nicht verbessert"

"WebP-Bilder werden nicht ausgeliefert"

"Gzip funktioniert nicht"

"CLS ist hoch, aber ich finde die Ursache nicht"

Vorbeugung & laufende Wartung

Experten-Hilfe gebraucht?

Professionelles Audit mit 3 konkreten Fixes? €39, heute geliefert.

Jetzt buchen — €39

100% Geld-zurück-Garantie

HR

Harald Roessler

Infrastructure Engineer mit 20+ Jahren Erfahrung. Gründer der DSNCON GmbH.

Verwandte Artikel

Cloudflare einrichten: DNS, SSL, CDN und grundlegende Sicherheitsregeln €39 Funktioniert lokal aber nicht live? So deployen Sie Ihre App in Produktion €49 WordPress weißer Bildschirm? So beheben Sie die häufigsten WordPress-Fehler €39