Core Web Vitals optimieren — Anleitung für bessere Google-Rankings
Core Web Vitals sind ein Google-Rankingfaktor. Erfahren Sie, wie Sie LCP, INP und CLS messen und gezielt optimieren — mit konkreten Maßnahmen.
Was sind Core Web Vitals?
Core Web Vitals sind drei Metriken, mit denen Google die Nutzererfahrung einer Website misst. Seit 2021 sind sie ein offizieller Rankingfaktor.
| Metrik | Misst | Gut | Verbesserungswürdig | Schlecht |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Ladezeit des größten sichtbaren Elements | ≤ 2,5s | ≤ 4,0s | > 4,0s |
| INP (Interaction to Next Paint) | Reaktionszeit auf Nutzereingaben | ≤ 200ms | ≤ 500ms | > 500ms |
| CLS (Cumulative Layout Shift) | Visuelle Stabilität (Verschiebungen) | ≤ 0,1 | ≤ 0,25 | > 0,25 |
So messen Sie Ihre Core Web Vitals
Google PageSpeed Insights
Geben Sie Ihre URL auf pagespeed.web.dev ein. Sie erhalten sowohl Labordaten (simuliert) als auch Felddaten (echte Nutzer, sofern verfügbar).
Google Search Console
Unter Core Web Vitals sehen Sie den Status aller Seiten — gruppiert nach gut, verbesserungswürdig und schlecht.
Chrome DevTools
Öffnen Sie DevTools (F12) → Tab Lighthouse → Performance-Audit starten. Für INP: Tab Performance → Aufzeichnung starten → Auf Elemente klicken → Interaktionszeiten prüfen.
LCP optimieren (Ladezeit)
LCP ist meist das größte Bild oder der größte Textblock im sichtbaren Bereich. So verbessern Sie ihn:
1. Bilder optimieren
<!-- Modernes Format + responsive Sizes -->
<img
src="bild.webp"
srcset="bild-400.webp 400w, bild-800.webp 800w, bild-1200.webp 1200w"
sizes="(max-width: 768px) 100vw, 50vw"
width="1200" height="800"
alt="Beschreibung"
loading="lazy"
decoding="async"
/>
Wichtig: Das Hero-Bild (Above the Fold) sollte nicht loading="lazy" haben — sondern sofort geladen werden. Nutzen Sie fetchpriority="high" dafür.
2. Kritisches CSS inline laden
CSS, das für den sichtbaren Bereich benötigt wird, sollte direkt im <head> stehen — nicht in einer externen Datei, die erst geladen werden muss.
3. Schriftarten optimieren
@font-face {
font-family: 'Inter';
font-display: swap; /* Text sofort anzeigen */
src: url('/fonts/inter.woff2') format('woff2');
}
Verwenden Sie font-display: swap und laden Sie Schriftarten per <link rel="preload"> vor.
4. Server-Antwortzeit (TTFB)
Ist der TTFB über 600ms, ist Ihr Server das Problem. Mögliche Maßnahmen:
- Server-Side Caching aktivieren
- CDN verwenden (Cloudflare)
- Auf besseres Hosting wechseln
INP optimieren (Interaktivität)
INP ersetzt seit März 2024 den alten FID-Wert und ist strenger. Er misst die längste Verzögerung bei Nutzerinteraktionen.
1. JavaScript aufräumen
- Nicht benötigte Skripte entfernen
deferoderasyncbei Script-Tags verwenden- Große Bundles per Code-Splitting aufteilen
2. Lange Tasks aufbrechen
Jede JavaScript-Aufgabe über 50ms blockiert den Main Thread. Große Berechnungen in kleinere Teile aufbrechen:
// Statt einer langen Aufgabe
function processAll(items) {
for (const item of items) { /* schwere Berechnung */ }
}
// In Chunks aufteilen mit scheduler.yield()
async function processChunked(items) {
for (const item of items) {
/* Berechnung */
if (navigator.scheduling?.isInputPending?.()) {
await scheduler.yield();
}
}
}
3. Event-Handler optimieren
Vermeiden Sie schwere Berechnungen in Click- und Scroll-Handlern. Nutzen Sie requestAnimationFrame für visuelle Updates.
CLS optimieren (Layout-Stabilität)
CLS misst, wie viel sich das Layout während des Ladens verschiebt. Typische Ursachen:
1. Breite und Höhe für Medien angeben
<!-- Immer width + height angeben -->
<img src="bild.jpg" width="800" height="600" alt="..." />
<!-- Bei Videos und iFrames: aspect-ratio -->
<div style="aspect-ratio: 16/9;">
<iframe src="..." style="width:100%;height:100%;"></iframe>
</div>
2. Webfonts mit font-display: swap
Ohne font-display: swap blendet der Browser zunächst nichts ein, dann „springt” der Text rein — das ist CLS.
3. Anzeigen und dynamische Inhalte
Reservieren Sie festen Platz für Elemente, die nachgeladen werden:
.ad-slot { min-height: 250px; }
.cookie-banner { position: fixed; } /* Fixed statt relative */
4. Keine Inhalte über bestehendem Content einfügen
Banner, Hinweise oder Opt-in-Leisten sollten nie Content nach unten verschieben. Verwenden Sie position: fixed oder sticky.
Checkliste: Core Web Vitals Quick Wins
- Hero-Bild als WebP mit
fetchpriority="high" - Alle Bilder mit
width+height -
font-display: swapfür alle Schriftarten - Nicht benötigtes JavaScript entfernen
- CSS für Above-the-Fold inline
- Server-Side Caching aktiviert
- CDN (Cloudflare) eingerichtet
-
loading="lazy"für Bilder Below the Fold
Brauchen Sie Hilfe?
Core Web Vitals Optimierung ist technisch anspruchsvoll und erfordert Erfahrung mit Performance-Profiling. Wir optimieren Ihre Website auf PageSpeed 90+ — Festpreis ab 1.490 €, mit Vorher/Nachher-Nachweis.