17. Mai 2026

Core Web Vitals verbessern – Der Praxis-Guide für bessere Google-Rankings

LCP, INP und CLS verstehen und optimieren: Praktische Maßnahmen für bessere Core Web Vitals, schnellere Ladezeiten und höhere Google-Rankings.

Was sind Core Web Vitals?

Core Web Vitals sind Googles offizielle Metriken für die Nutzererfahrung auf Ihrer Website. Seit 2021 fließen sie direkt ins Ranking ein. Kurz: Eine langsame Website kostet Sie Plätze bei Google. Google misst drei Dinge: | Metrik | Was sie misst | Guter Wert | |--------|--------------|------------| | LCP (Largest Contentful Paint) | Ladezeit des größten sichtbaren Elements | unter 2,5 Sekunden | | INP (Interaction to Next Paint) | Reaktionszeit auf Nutzer-Interaktionen | unter 200 Millisekunden | | CLS (Cumulative Layout Shift) | Visuelle Stabilität beim Laden | unter 0,1 |

So messen Sie Ihre Werte

1. Google PageSpeed Insights (kostenlos)

Gehen Sie auf pagespeed.web.dev und geben Sie Ihre URL ein. Sie erhalten sowohl Labordaten (simuliert) als auch Felddaten (echte Nutzer).

2. Google Search Console

Unter „Core Web Vitals" sehen Sie, wie Google Ihre gesamte Website bewertet – aufgeteilt nach Mobil und Desktop.

3. Chrome DevTools

Öffnen Sie die Entwicklertools (F12) → Tab „Performance" → Laden Sie die Seite neu. Hier sehen Sie exakt, was wann geladen wird.

LCP optimieren: Das größte Element schneller laden

Der LCP misst, wie schnell der wichtigste Inhalt sichtbar wird. Typische LCP-Elemente sind Hero-Bilder, große Überschriften oder Video-Thumbnails.

Sofort-Maßnahmen

Bilder komprimieren: Nutzen Sie WebP statt PNG/JPEG. Ein 2 MB Hero-Bild kann auf 100 KB schrumpfen – ohne sichtbaren Qualitätsverlust
Bilder richtig dimensionieren: Liefern Sie nie ein 4000px-Bild für einen 800px-Container. Nutzen Sie srcset für verschiedene Bildschirmgrößen
Above-the-fold priorisieren: Das erste sichtbare Bild sollte mit loading="eager" oder priority geladen werden – nicht lazy
Server-Antwortzeit reduzieren: Ein schneller Server ist die Basis. Shared Hosting mit 2s TTFB (Time to First Byte) ist zu langsam
Render-blockierende Ressourcen eliminieren: CSS und JavaScript, die das Laden verzögern, identifizieren und optimieren

INP optimieren: Schneller auf Klicks reagieren

INP ersetzt seit 2024 den alten FID-Wert. Er misst, wie schnell Ihre Website auf jede Interaktion reagiert – nicht nur die erste.

Häufige Ursachen für schlechten INP

Schweres JavaScript: Große Bundles blockieren den Main Thread
Zu viele Event-Listener: Jeder Klick-Handler kostet Zeit
Synchrone Berechnungen: Lange Schleifen oder DOM-Manipulationen während der Interaktion

Lösungen

Code-Splitting: Laden Sie nur das JavaScript, das die aktuelle Seite braucht
Aufgaben aufteilen: Lange Tasks (über 50ms) in kleinere Stücke brechen
Web Worker nutzen: Schwere Berechnungen in einen Background-Thread auslagern
Unnötige Skripte entfernen: Jedes Analytics-Tool, Chat-Widget oder Social-Plugin kostet Performance

CLS optimieren: Layout-Verschiebungen vermeiden

CLS misst, ob sich Elemente verschieben, während die Seite lädt. Kennen Sie das? Sie wollen auf einen Button klicken, aber plötzlich springt alles nach unten, weil ein Werbebanner geladen wurde. Das ist CLS.

Die häufigsten Verursacher

Bilder ohne Dimensionen: Geben Sie immer width und height an, damit der Browser den Platz reserviert
Schriften, die nachladen: Wenn eine Web-Font die Systemschrift ersetzt, verschiebt sich alles. Nutzen Sie font-display: swap und laden Sie Fonts vor
Dynamisch eingefügte Inhalte: Cookie-Banner, Newsletter-Popups oder Werbung, die den Content verschiebt
Embeds ohne feste Größe: YouTube-Videos, Google Maps oder Social-Media-Einbettungen brauchen einen Container mit fester Höhe

Schnelle Fixes

Definieren Sie aspect-ratio für alle Medien-Container
Reservieren Sie Platz für Werbung und externe Inhalte
Laden Sie Fonts mit <link rel="preload"> vor
Vermeiden Sie document.write() und spätes DOM-Einfügen

Typische Scores und was sie bedeuten

| Score | Bewertung | Was das heißt | |-------|-----------|---------------| | 90–100 | Gut (grün) | Google belohnt Sie, Nutzer sind zufrieden | | 50–89 | Verbesserungswürdig (orange) | Kein direkter Nachteil, aber Potenzial | | 0–49 | Schlecht (rot) | Ranking-Nachteil, hohe Absprungrate |

WordPress vs. Premium: Performance im Vergleich

Bei WordPress hängt die Performance stark von Plugins, Theme und Hosting ab. Ein typischer WordPress-Auftritt mit 15 Plugins erreicht oft nur 40–60 Punkte auf Mobilgeräten. Eine Premium-Lösung (Next.js auf eigener Infrastruktur) erreicht dagegen regelmäßig 90+ Punkte – weil es keine Plugin-Kette gibt, die den Seitenaufbau verlangsamt.

Fazit: Performance ist kein Nice-to-have

Core Web Vitals sind kein technisches Detail für Entwickler. Sie entscheiden direkt über:

Ihr Google-Ranking (offizieller Ranking-Faktor)
Ihre Conversion-Rate (1 Sekunde langsamer = 7% weniger Conversions)
Ihre Absprungrate (53% der Nutzer verlassen Seiten, die über 3 Sekunden laden)

Sie möchten wissen, wie Ihre Website performt – und was sich konkret verbessern lässt? Schreiben Sie mir – die Erstberatung ist kostenlos.