Core Web Vitals 2026: So verbesserst du deine Google-Scores
Core Web Vitals: Die neuen Ranking-Faktoren von Google
Die Core Web Vitals sind eine Reihe von Metriken, die Google nutzt, um die Benutzerfahrung zu messen. Seit 2021 sind sie ein direkter Ranking-Faktor – Websites mit guten Core Web Vitals ranken besser. In 2026 sind sie wichtiger denn je. Dieser Guide erklärt, was die einzelnen Metriken bedeuten und wie du sie optimierst.
Die drei Core Web Vitals sind:
Möchten Sie SEO-Probleme auf jeder Website finden?
Testen Sie WebSEO Auditor kostenlos — führen Sie Ihr erstes Audit in Sekunden durch.
Kostenlos testen- LCP (Largest Contentful Paint): Wie schnell wird der Hauptcontent sichtbar?
- CLS (Cumulative Layout Shift): Verschieben sich Elemente unerwartet?
- INP (Interaction to Next Paint): Wie responsiv ist die Seite auf User-Interaktionen?
Diese drei Faktoren zusammen werden "Core Web Vitals" genannt und sind ein kritischer Ranking-Faktor.
Metrik 1: LCP (Largest Contentful Paint)
Was ist LCP?
LCP misst, wie lange es dauert, bis das größte sichtbare Element auf einer Seite vollständig geladen ist. Dies ist typischerweise ein Bild oder Text-Block. Eine schnelle LCP bedeutet, dass die Seite schnell brauchbar wird.
Zielwerte:
- Gut: unter 2,5 Sekunden
- Verbesserungsbedürftig: 2,5-4 Sekunden
- Schlecht: über 4 Sekunden
Wie du LCP optimierst:
1. Bilder optimieren
Das größte Problem für schlechte LCP sind normalerweise große, unoptimierte Bilder. Hier sind konkrete Schritte:
- Nutze moderne Bildformate wie WebP statt PNG/JPG
- Komprimiere Bilder mit Tools wie TinyPNG oder ImageOptim
- Nutze responsive Bilder mit srcset, um kleinere Versionen auf mobilen Geräten zu laden
- Lade kritische Bilder mit eager, unkritische mit lazy loading
Tipp: Eine einfache Bild-Optimierung kann LCP oft um 30-50% verbessern. Das ist eine der besten Quick-Wins.
2. CSS und JavaScript kritisch laden
Blockierendes CSS und JavaScript kann LCP massiv verlangsamen. Hier sind Lösungen:
- Inline kritisches CSS direkt in den <head>
- Defer nicht-kritisches CSS mit media queries oder async
- Defer oder async für nicht-kritisches JavaScript nutzen
- Minify CSS und JavaScript, um Dateigröße zu reduzieren
3. Preload wichtige Ressourcen
Mit dem rel="preload" Attribut kannst du wichtige Ressourcen vorab laden:
<link rel="preload" href="/critical-image.jpg" as="image">
Dies sagt dem Browser, dass diese Ressource wichtig ist und früh geladen werden sollte.
4. Server-Side Rendering (SSR) oder Static Generation
Wenn möglich, rendere deine Seiten auf dem Server oder static vor. Dies ist deutlich schneller als Client-Side Rendering.
Metrik 2: CLS (Cumulative Layout Shift)
Was ist CLS?
CLS misst, wie viel die Elemente auf einer Seite unerwartet verschieben. Das classic Beispiel: Du klickst auf einen Link, aber ein Ad lädt gerade und schiebt den Link nach unten. Diese unsichtbaren Verschiebungen ärgern User und sind schlecht für UX.
Zielwerte:
- Gut: unter 0,1
- Verbesserungsbedürftig: 0,1-0,25
- Schlecht: über 0,25
Wie du CLS optimierst:
1. Bilder und Videos mit festen Dimensionen
Das häufigste CLS-Problem: Bilder ohne feste Breite/Höhe. Wenn ein Bild lädt, können sich Elemente verschieben. Lösung: Immer width und height setzen.
<img src="image.jpg" width="600" height="400" alt="..." />
Moderne Alternative mit aspect-ratio CSS:
<img src="image.jpg" alt="..." style="aspect-ratio: 3/2;" />
2. Avoid Layout-Shifting Ads und Embeds
Ads sind ein häufiges CLS-Problem. Platziere sie nicht oben auf der Seite, oder reserviere Platz mit festen Dimensionen.
3. Animationen mit transform statt layout-changing properties
Wenn du Elemente animierst, nutze CSS transforms statt left/top/margin. Transforms sind billiger und verursachen kein Layout Shift:
Gut: transform: translateY(10px);
Schlecht: top: 10px;
4. Vermeidung von dynamisch hinzugefügtem Content
Vermeide es, oben auf der Seite dynamisch Content hinzuzufügen. Dies verschiebt alles darunter. Nutze stattdessen ein Loading-Skeleton oder reserviere Platz.
Metrik 3: INP (Interaction to Next Paint)
Was ist INP?
INP (Interaction to Next Paint) misst, wie responsiv deine Seite auf User-Interaktionen ist. Wenn ein User auf einen Button klickt oder in ein Feld tippt, wie lange dauert es, bis die Seite reagiert? INP ist seit 2024 ein Core Web Vital und wird immer wichtiger.
Zielwerte:
- Gut: unter 200ms
- Verbesserungsbedürftig: 200-500ms
- Schlecht: über 500ms
Wie du INP optimierst:
1. JavaScript aufteilen und defer laden
Großes JavaScript blockiert Interaktionen. Teile JavaScript in kleinere Chunks und lade sie asynchron:
<script src="app.js" defer></script>
2. Long Tasks eliminieren
Eine "Long Task" ist JavaScript, das länger als 50ms läuft. Der Browser kann nicht auf User-Input reagieren. Nutze Web Workers für intensive Berechnungen.
3. First Input Delay (FID) → INP
FID war früher ein Core Web Vital. Viele Optimierungen dafür helfen auch mit INP:
- Minimiere Main Thread-Arbeit
- Nutze requestIdleCallback für nicht-kritische Tasks
- Vermeide blocking third-party scripts
4. Input debouncing und throttling
Wenn User schnell tippen oder klicken, debounce oder throttle deine Event Handler, um zu viele Berechnungen zu vermeiden.
Praktische Optimierungs-Strategie
Hier ist eine Schritt-für-Schritt-Strategie zur Optimierung deiner Core Web Vitals:
Schritt 1: Baseline messen
Nutze Google Search Console, PageSpeed Insights oder Chrome DevTools, um deine aktuellen Werte zu messen. Notiere die Werte – diese sind deine Baseline.
Schritt 2: Kritische Probleme identifizieren
Welche Metrik ist am schlechtesten? Konzentriere dich zuerst auf die größte Baustelle.
Schritt 3: Quick-Wins durchführen
Bild-Optimierung, Lazy Loading, und Minification sind normalerweise die schnellsten Wins. Starten Sie hier.
Schritt 4: Tiefer gehende Optimierungen
Dann kümmere dich um JavaScript-Optimierung, Server-Rendering und andere tiefere Änderungen.
Schritt 5: Messen und Iterieren
Nach jeder Optimierung misst du die neuen Werte. Was hat Sinn gemacht? Was nicht? Iteriere basierend auf echten Daten.
Tools zur Messung und Optimierung
Google PageSpeed Insights – Kostenlos, einfach zu nutzen, liefert konkrete Empfehlungen
Google Search Console – Zeigt echte Daten von echten Usern (CrUX-Daten)
Chrome DevTools – Für detaillierte Analyse während der Entwicklung
Web Vitals JavaScript Library – Nutze dies, um eigene Metriken zu tracken
Lighthouse – Kostenlos im Chrome DevTools, gute Basis-Audits
Fazit: Core Web Vitals sind nicht optional
Im 2026 sind gute Core Web Vitals kein Luxus – sie sind ein Muss. Websites mit schlechten Vital-Werten werden von Google bestraft. Mit dieser Anleitung hast du ein System, um deine Vitals zu messen, zu verstehen und zu optimieren. Der Aufwand zahlt sich durch bessere Rankings und bessere User Experience aus.
Kostenlos testen
Bereit, mit Website-Audits Leads zu generieren? Starten Sie Ihre 14-tägige kostenlose Testphase — keine Kreditkarte erforderlich.