Website Geschwindigkeit & Core Web Vitals: Der komplette Optimierungs-Guide 2026

Die Zahlen sind eindeutig: Laut Google verlässt 53% der mobilen Nutzer eine Seite, die länger als 3 Sekunden zum Laden braucht. Core Web Vitals sind seit 2021 ein offizieller Ranking-Faktor – und beeinflussen auch den Quality Score deiner Google Ads.

Was sind Core Web Vitals?

Core Web Vitals sind drei messbare Metriken, die Google verwendet, um die Nutzererfahrung deiner Website zu bewerten:

LCP – Largest Contentful Paint

Was: Wie lange dauert es, bis das größte sichtbare Element (Bild, Video, Textblock) geladen ist?

✅ Gut: ≤ 2,5 Sekunden
⚠️ Verbesserungswürdig: 2,5 – 4,0 Sekunden
❌ Schlecht: > 4,0 Sekunden

Warum wichtig: LCP misst die wahrgenommene Ladezeit. Nutzer beurteilen deine Website nach dem Moment, in dem der Hauptinhalt sichtbar wird.

INP – Interaction to Next Paint

Was: Wie schnell reagiert die Seite auf Nutzer-Aktionen (Klick, Tippen, Tasteneingabe)?

✅ Gut: ≤ 200 Millisekunden
⚠️ Verbesserungswürdig: 200 – 500 Millisekunden
❌ Schlecht: > 500 Millisekunden

Warum wichtig: INP hat 2024 FID (First Input Delay) als Core Web Vital ersetzt. Es misst die gesamte Interaktivität, nicht nur die erste Eingabe.

CLS – Cumulative Layout Shift

Was: Wie stark verschieben sich sichtbare Elemente während des Ladens?

✅ Gut: ≤ 0,1
⚠️ Verbesserungswürdig: 0,1 – 0,25
❌ Schlecht: > 0,25

Warum wichtig: Layout-Verschiebungen frustrieren Nutzer – z.B. wenn ein Button plötzlich woanders ist und sie auf das Falsche klicken.

Auswirkungen auf SEO & Google Ads

SEO-Rankings

Google Page Experience Signal:
Core Web Vitals (LCP, INP, CLS)
+ Mobile-Friendliness
+ HTTPS
+ No Intrusive Interstitials
= Teil des Ranking-Algorithmus

→ Bei gleicher Content-Qualität:
   Schnellere Website = besseres Ranking

Konkret: Core Web Vitals sind ein Tiebreaker. Bei ähnlich gutem Content gewinnt die schnellere, nutzerfreundlichere Seite. Wer das Zusammenspiel von organischer und bezahlter Sichtbarkeit verstehen will, findet im Vergleich von SEO und SEA mehr Kontext.

Google Ads Quality Score

Landing Page Experience = 1/3 des Quality Score

Langsame Landing Page:
→ Hohe Absprungrate
→ Schlechte Landing Page Experience
→ Niedrigerer Quality Score
→ Höherer CPC → Weniger Klicks pro Budget

Schnelle Landing Page:
→ Niedrige Absprungrate
→ Gute Landing Page Experience
→ Höherer Quality Score
→ Niedrigerer CPC → Mehr Klicks pro Budget

Beispiel:

Selbe Keywords, selbe Anzeige, selbes Budget:

Landing Page A: LCP 5,2s → Quality Score 5 → CPC: €4,50
Landing Page B: LCP 1,8s → Quality Score 8 → CPC: €2,80

Ergebnis: 60% mehr Klicks mit der schnellen Seite!

LCP optimieren

Die häufigsten LCP-Probleme

Problem 1: Unkomprimierte Bilder

❌ hero-image.jpg: 2,4 MB, 4000x3000px
→ Ladezeit: 3,8 Sekunden (bei 4G)

✅ hero-image.webp: 120 KB, 1200x800px
→ Ladezeit: 0,4 Sekunden (bei 4G)

Lösung:

<!-- Modernes Bildformat + responsive Größen -->
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="..." width="1200" height="800"
       loading="eager" fetchpriority="high">
</picture>

Problem 2: Render-blocking CSS/JS

❌ Browser wartet auf: styles.css (200KB) + scripts.js (500KB)
→ Erst nach Download beginnt Rendering

✅ Critical CSS inline, Rest async:
→ Rendering startet sofort

Lösung:

<!-- Critical CSS inline im Head -->
<style>
  /* Nur CSS für Above-the-Fold Content */
  .hero { ... }
  .nav { ... }
</style>

<!-- Rest async laden -->
<link rel="preload" href="/styles.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">

Problem 3: Langsamer Server (TTFB)

TTFB (Time to First Byte) Ziele:
✅ Gut: < 200ms
⚠️ Okay: 200-500ms
❌ Schlecht: > 500ms

Lösung:

• CDN verwenden (Cloudflare, Vercel Edge)
• Server-Side Caching aktivieren
• Datenbank-Queries optimieren
• Hosting upgraden (nicht der billigste Shared Hosting)

Problem 4: Webfonts blockieren Rendering

Lösung:

<!-- Font preloaden -->
<link rel="preload" href="/fonts/inter.woff2" as="font"
      type="font/woff2" crossorigin>

<!-- Oder: font-display: swap -->
<style>
  @font-face {
    font-family: 'Inter';
    src: url('/fonts/inter.woff2') format('woff2');
    font-display: swap; /* Text sofort zeigen, Font nachladen */
  }
</style>

INP optimieren

Die häufigsten INP-Probleme

Problem 1: Schwere JavaScript-Ausführung

❌ Click-Handler braucht 800ms:
→ User klickt → nichts passiert → Frustration

✅ Click-Handler braucht 50ms:
→ User klickt → sofortige Reaktion

Lösung:

// ❌ Schlecht: Alles im Main Thread
button.addEventListener('click', () => {
  // 500ms schwere Berechnung
  processLargeDataset(data);
  updateUI();
});

// ✅ Besser: Aufteilen mit requestAnimationFrame
button.addEventListener('click', () => {
  // UI sofort updaten
  showLoadingState();

  requestAnimationFrame(() => {
    processLargeDataset(data);
    updateUI();
  });
});

Problem 2: Zu viel Third-Party JavaScript

Typische Third-Party Scripts:
- Google Tag Manager: ~80KB
- Google Analytics: ~45KB  
- Facebook Pixel: ~60KB
- Chat Widget: ~200KB
- Cookie Banner: ~100KB

Gesamt: ~485KB JavaScript → INP-Killer!

Lösung:

• Nur notwendige Scripts laden
• Scripts defer/async laden
• Tag Manager aufräumen (unbenutzte Tags entfernen)
• Tracking wo möglich serverseitig umsetzen – wie im Server-Side-Tracking-Guide beschrieben, entlastet das den Browser und verbessert INP

Problem 3: Große DOM-Strukturen

❌ Schlecht: 5.000+ DOM-Elemente
→ Browser braucht lange für Layout/Paint bei Interaktion

✅ Gut: < 1.500 DOM-Elemente
→ Schnelle Reaktion auf Klicks/Scrolling

CLS optimieren

Die häufigsten CLS-Probleme

Problem 1: Bilder ohne Dimensionen

<!-- ❌ CLS-Problem: Bild hat keine feste Größe -->
<img src="photo.jpg" alt="...">
<!-- → Platz wird erst reserviert wenn Bild geladen → Layout Shift! -->

<!-- ✅ Lösung: Breite und Höhe angeben -->
<img src="photo.jpg" alt="..." width="800" height="600">
<!-- → Browser reserviert Platz im Voraus → kein Shift -->

Problem 2: Dynamisch eingefügte Inhalte

❌ Cookie-Banner springt rein → alles verschiebt sich
❌ Werbebanner lädt nach → Content springt runter
❌ Chat-Widget erscheint → Layout ändert sich

Lösung:

/* Platz für dynamische Elemente im Voraus reservieren */
.ad-container {
  min-height: 250px; /* Platz für Ad reservieren */
}

.cookie-banner-space {
  min-height: 80px; /* Platz für Banner reservieren */
}

Problem 3: Web Fonts verursachen Layout Shift

❌ Fallback-Font → Web Font laden → Text ändert Größe → Shift!

✅ Lösung: font-display: optional oder size-adjust

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: optional; /* Fallback nutzen wenn Font nicht sofort da */
  /* ODER */
  size-adjust: 107%; /* Fallback auf gleiche Größe anpassen */
}

Mess-Tools für Core Web Vitals

Feld-Daten (echte Nutzer)

Google Search Console (kostenlos):

Search Console → Core Web Vitals
→ Mobil & Desktop separat auswerten
→ Zeigt: Gut / Verbesserungswürdig / Schlecht URLs
→ Basiert auf echten Chrome-Nutzerdaten (CrUX)

PageSpeed Insights (kostenlos):

pagespeed.web.dev
→ URL eingeben
→ Feld-Daten (echte Nutzer) + Lab-Daten (Simulation)
→ Konkrete Optimierungsvorschläge

Lab-Daten (Simulation)

Lighthouse (in Chrome DevTools):

Chrome → F12 → Lighthouse Tab
→ Performance Audit starten
→ Gibt Score 0-100 und konkrete Verbesserungen

WebPageTest (kostenlos):

webpagetest.org
→ URL und Standort wählen
→ Detaillierter Wasserfall-Bericht
→ Filmstrip: Visueller Ladefortschritt

Quick Wins: Sofort umsetzbare Optimierungen

1. Bilder optimieren (Größter Hebel!)

✅ Format: WebP oder AVIF statt JPEG/PNG
✅ Komprimierung: 80% Qualität reicht meist
✅ Responsive: Verschiedene Größen für verschiedene Bildschirme
✅ Lazy Loading: Bilder unterhalb des Viewports lazy laden
✅ Dimensionen: Immer width/height angeben

Tool: squoosh.app (kostenlos, im Browser)

2. CSS & JavaScript optimieren

✅ Critical CSS inline im <head>
✅ CSS/JS minifizieren
✅ Unbenutztes CSS/JS entfernen
✅ Scripts defer oder async laden
✅ Code Splitting (nur laden was gebraucht wird)

3. Server optimieren

✅ CDN verwenden (Cloudflare, Vercel, Netlify)
✅ Caching-Header setzen (Cache-Control)
✅ GZIP/Brotli-Komprimierung aktivieren
✅ HTTP/2 oder HTTP/3 aktivieren
✅ DNS prefetch für externe Ressourcen

4. Fonts optimieren

✅ Nur benötigte Schriftschnitte laden (nicht die ganze Familie)
✅ WOFF2-Format verwenden
✅ font-display: swap oder optional setzen
✅ Preload für wichtigste Fonts
✅ Lokale Fonts bevorzugen (system-ui Stack)

Checkliste: Core Web Vitals Optimierung

LCP (Largest Contentful Paint) ✅:

• [ ] Hero-Bild komprimiert (WebP/AVIF, < 200KB)
• [ ] Critical CSS inline
• [ ] Fonts preloaded mit font-display: swap
• [ ] CDN aktiviert
• [ ] TTFB < 200ms

INP (Interaction to Next Paint) ✅:

• [ ] JavaScript minimiert und aufgeteilt
• [ ] Third-Party Scripts reduziert
• [ ] Schwere Berechnungen aus Main Thread ausgelagert
• [ ] DOM-Größe < 1.500 Elemente
• [ ] Event-Handler optimiert

CLS (Cumulative Layout Shift) ✅:

• [ ] Alle Bilder/Videos mit width/height
• [ ] Platz für Ads/Banner reserviert
• [ ] Fonts verursachen keinen Layout Shift
• [ ] Dynamische Inhalte verschieben nichts
• [ ] Kein Content-Injection ohne Platzreservierung

Allgemein ✅:

• [ ] PageSpeed Insights Score ≥ 90 (Mobile)
• [ ] Alle Core Web Vitals im grünen Bereich
• [ ] Monatliches Monitoring via Search Console

Fazit

Schnelle Website = bessere Rankings + niedrigere Google Ads Kosten + mehr Conversions

Prioritäten-Reihenfolge:

1. ✅ Bilder optimieren (größter Einzelhebel)
2. ✅ Render-blocking Ressourcen eliminieren
3. ✅ CDN und Caching aktivieren
4. ✅ JavaScript reduzieren und optimieren
5. ✅ CLS durch Dimensionen und Platzreservierung vermeiden

Erwartung: Eine gut optimierte Website (alle Core Web Vitals grün) kann den organischen Traffic um 5-15% verbessern und die Google Ads CPC um 10-25% senken. In Kombination mit gezielter Landing-Page-Optimierung potenziert sich dieser Effekt.

Performance-Audit anfordern

---

FAQ zu Website Geschwindigkeit & Core Web Vitals

Was sind Core Web Vitals und warum sind sie wichtig?

Core Web Vitals sind drei von Google definierte Metriken: LCP (Ladegeschwindigkeit), INP (Reaktionszeit) und CLS (visuelle Stabilität). Sie messen die tatsächliche Nutzererfahrung auf deiner Website. Seit 2021 sind sie ein offizieller Google-Ranking-Faktor. Websites mit guten Core Web Vitals haben bessere Chancen auf höhere organische Rankings und niedrigere Google Ads CPCs.

Wie messe ich meine Core Web Vitals?

Am besten mit PageSpeed Insights (pagespeed.web.dev) – dort siehst du sowohl echte Nutzerdaten als auch Simulationsergebnisse. Google Search Console zeigt die Gesamtperformance aller URLs. Für detaillierte Analysen: Chrome DevTools (Lighthouse Tab). Alle Tools sind kostenlos.

Was ist der wichtigste Quick Win für bessere Performance?

Bilder optimieren! Das ist fast immer der größte Einzelhebel. Konvertiere Bilder zu WebP oder AVIF, komprimiere auf 80% Qualität, verwende responsive Größen (srcset) und lade Bilder unterhalb des Viewports lazy. Allein durch Bildoptimierung kannst du LCP oft um 1-3 Sekunden verbessern.

Beeinflussen Core Web Vitals meinen Google Ads Quality Score?

Indirekt ja. Landing Page Experience ist einer der drei Faktoren des Quality Score. Eine langsame Landing Page führt zu höherer Absprungrate und schlechterer User Experience, was den Quality Score senkt. Niedrigerer Quality Score = höherer CPC = weniger Reichweite pro Budget. Eine schnelle Landing Page kann den CPC um 10-25% senken.

Wie oft sollte ich Core Web Vitals überprüfen?

Monatlich in der Google Search Console prüfen. Nach jeder größeren Webseiten-Änderung (neues Design, neue Features, Plugin-Updates) sofort mit PageSpeed Insights testen. Besonders nach dem Hinzufügen neuer Third-Party-Scripts (Chat, Tracking, Ads) – diese sind häufig INP-Killer.

Was tun wenn mein CMS (WordPress etc.) langsam ist?

5 Sofortmaßnahmen: 1) Caching-Plugin installieren (WP Rocket, W3 Total Cache), 2) Bilder automatisch zu WebP konvertieren (ShortPixel, Imagify), 3) Unbenutzte Plugins deaktivieren und löschen, 4) CDN aktivieren (Cloudflare Free), 5) PHP-Version aktualisieren. Wenn das nicht reicht: Hosting upgraden von Shared zu Managed WordPress Hosting.