Inhalt
- Was sind Core Web Vitals?
- Warum Core Web Vitals dein Google-Ranking direkt beeinflussen
- LCP – Largest Contentful Paint optimieren
- Die häufigsten LCP-Probleme
- Ziel: LCP unter 2,5 Sekunden
- INP – Interaction to Next Paint optimieren
- Was INP-Werte in die Höhe treibt
- CLS – Cumulative Layout Shift verhindern
- Die drei häufigsten Ursachen
- PageSpeed Insights richtig lesen
- Weitere nützliche Tools
- Checkliste: Core Web Vitals verbessern in 10 Schritten
- Fazit: Performance ist kein Luxus – sie ist Grundlage
tags: ["Core Web Vitals", "PageSpeed", "SEO", "Web Performance", "LCP", "CLS", "INP"]
Lesezeit: "9 Min."
Core Web Vitals & PageSpeed optimieren: Der vollständige Leitfaden 2026
Eine langsame Website kostet dich Kunden – und Google-Rankings. Seit 2021 fließen Googles Core Web Vitals direkt in den Suchalgorithmus ein. Das bedeutet: Wer hier schlechte Werte hat, verliert Sichtbarkeit – egal wie gut der Content ist. Dieser Artikel erklärt dir, was Core Web Vitals sind, warum sie entscheidend sind, und wie du sie Schritt für Schritt verbesserst.
Was sind Core Web Vitals?
Core Web Vitals sind drei Kennzahlen, mit denen Google die echte Nutzererfahrung einer Website messbar macht. Es geht nicht darum, wie viele Requests eine Seite macht oder ob der HTML-Code valide ist – es geht darum, wie sich der Besuch einer Seite anfühlt.
Die drei Metriken im Überblick:
Wichtig: Seit März 2024 hat Google den alten FID-Wert (First Input Delay) offiziell durch INP (Interaction to Next Paint) ersetzt. Wer noch auf FID optimiert, hat veraltete Daten im Blick.
Warum Core Web Vitals dein Google-Ranking direkt beeinflussen
Google hat mit dem Page Experience Signal einen klaren Rahmen geschaffen: Seiten, die Nutzern eine gute Erfahrung bieten, werden bevorzugt gerankt. Core Web Vitals sind der Kern dieses Signals.
Das heißt konkret: Zwei Seiten mit vergleichbar gutem Content können unterschiedlich ranken – allein weil eine davon schneller lädt und stabiler dargestellt wird.
Hinzu kommt der wirtschaftliche Faktor: Eine Studie von Google zeigt, dass Seiten, die die Core Web Vitals-Schwellenwerte erfüllen, eine um 24 % geringere Absprungrate aufweisen. Jede Sekunde längerer Ladezeit kostet im Schnitt 7 % der Conversions – das ist keine Theorie, das ist gemessenes Nutzerverhalten.
LCP – Largest Contentful Paint optimieren
Der LCP misst, wie lange es dauert, bis das größte sichtbare Element im Viewport vollständig gerendert ist. Das ist meistens ein Hero-Bild, ein großes Textelement oder ein Video-Thumbnail.
Die häufigsten LCP-Probleme
1. Bilder ohne Größenangaben und falsches Format
Bilder, die als JPEG oder PNG ausgeliefert werden, sind in vielen Fällen unnötig groß. Das moderne WebP-Format spart gegenüber JPEG bis zu 30 % Dateigröße – ohne sichtbaren Qualitätsverlust. Noch effizienter ist AVIF, das von allen modernen Browsern unterstützt wird.
<!-- Richtig: Modernes Format mit Fallback -->
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Beschreibung" width="1200" height="630" loading="eager" fetchpriority="high">
</picture>Das fetchpriority="high" Attribut ist entscheidend: Es signalisiert dem Browser, dass dieses Bild sofort geladen werden muss – und nicht in der Warteschlange landet.
2. Kein preconnect für externe Ressourcen
Wenn dein LCP-Element von einem CDN oder einer anderen Domain geladen wird (z. B. Google Fonts, ein Bildserver), vergisst der Browser standardmäßig, frühzeitig eine Verbindung aufzubauen.
<!-- Im <head> eintragen -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://dein-cdn.example.com">3. Blockierendes JavaScript und CSS
Render-blockierendes JS und CSS verzögert alles – auch das LCP-Element. Lösung: CSS für Above-the-Fold-Inhalte inline einbetten und den Rest asynchron laden.
<!-- CSS für kritische Stile inline -->
<style>/* nur das Nötigste für den sichtbaren Bereich */</style>
<!-- Rest des Stylesheets asynchron -->
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">Ziel: LCP unter 2,5 Sekunden
Ein LCP-Wert unter 2,5 s gilt als "Gut". In der Praxis erreichst du das fast immer durch die Kombination aus: optimiertem Bildformat, korrektem fetchpriority, Server-seitigem Caching und einem schnellen Hosting.
INP – Interaction to Next Paint optimieren
Der INP misst, wie schnell deine Website auf jede Nutzerinteraktion reagiert – Klicks, Tippen, Formularfelder. Er ist der Nachfolger des FID und deutlich strenger: Statt nur den ersten Klick zu messen, bewertet INP die gesamte Interaktionshistorie eines Seitenbesuchs.
Was INP-Werte in die Höhe treibt
Der häufigste Grund für schlechte INP-Werte ist zu viel JavaScript im Main Thread. Wenn der Browser mit dem Ausführen von JS-Code beschäftigt ist, kann er nicht gleichzeitig auf Nutzereingaben reagieren – das führt zu spürbarem "Einfrieren".
Konkrete Maßnahmen:
- Code Splitting: Lade nur das JavaScript, das für die aktuelle Seite wirklich nötig ist.
- Web Workers: Lagere rechenintensive Aufgaben in einen separaten Thread aus, der den Main Thread nicht blockiert.
- Event Handler debouncing: Verhindere, dass Scroll- oder Input-Events den Browser überfluten.
// Schlecht: Jeder Tastendruck löst sofort eine schwere Operation aus
input.addEventListener('input', heavyFunction);
// Gut: Debouncing – Funktion wird erst nach 300ms Pause ausgeführt
input.addEventListener('input', debounce(heavyFunction, 300));- Lazy Loading für Third-Party-Scripts: Chat-Widgets, Analytics, Consent-Tools – alle sollten erst nach dem ersten Nutzerinteresse geladen werden, nicht beim initialen Seitenaufruf.
CLS – Cumulative Layout Shift verhindern
CLS ist die Metrik, die Nutzer am meisten nerven – auch wenn sie den Begriff nicht kennen. Es ist das Phänomen, wenn du auf einen Button klicken willst und er im letzten Moment nach unten springt, weil ein Bild oder eine Werbeanzeige plötzlich erscheint.
Google misst CLS als Summe aller unerwarteten Layout-Verschiebungen über die gesamte Lebenszeit einer Seite.
Die drei häufigsten Ursachen
1. Bilder ohne explizite Dimensionen
Wenn der Browser nicht weiß, wie groß ein Bild ist, reserviert er keinen Platz – und alles verschiebt sich, sobald das Bild geladen ist.
<!-- Immer width und height angeben -->
<img src="bild.webp" alt="Beschreibung" width="800" height="450">Alternativ kannst du das Seitenverhältnis per CSS reservieren:
.bild-container {
aspect-ratio: 16 / 9;
}2. Dynamisch eingefügte Inhalte
Banneranzeigen, Cookie-Banner, Newsletter-Popups – wenn diese Elemente nach dem initialen Rendering erscheinen und anderen Content verschieben, erhöht das den CLS.
Lösung: Für bekannte Inhalte immer Platz reservieren, bevor sie erscheinen. Für Cookie-Banner: fixe Position am unteren Rand verwenden, die keinen anderen Content verdrängt.
3. Schriften ohne Font-Display-Strategie
Wenn eine externe Schrift lädt, kann es zum "Flash of Invisible Text" (FOIT) oder "Flash of Unstyled Text" (FOUT) kommen – beides erhöht CLS.
@font-face {
font-family: 'DeineSchrift';
src: url('schrift.woff2') format('woff2');
font-display: swap; /* Fallback-Schrift sofort, eigene Schrift tauscht ein */
}PageSpeed Insights richtig lesen
Das kostenlose Tool PageSpeed Insights (pagespeed.web.dev) zeigt dir deine Core Web Vitals-Werte – aber viele lesen die Ergebnisse falsch.
Zwei Datenquellen, zwei Bedeutungen:
- Field Data (Felddaten): Echte Nutzerdaten aus dem Chrome User Experience Report (CrUX). Das ist das, was Google für das Ranking verwendet. Diese Werte basieren auf den letzten 28 Tagen echter Seitenbesuche.
- Lab Data (Labordaten): Simulierte Tests unter kontrollierten Bedingungen. Nützlich für die Diagnose, aber nicht das, was Google rankt.
Konzentriere dich immer zuerst auf die Felddaten. Wenn dort noch keine Daten vorhanden sind (zu wenig Traffic), sind die Labordaten dein nächstbester Indikator.
Weitere nützliche Tools
Checkliste: Core Web Vitals verbessern in 10 Schritten
Hier eine kompakte Zusammenfassung aller wichtigen Maßnahmen – sortiert nach Aufwand und Wirkung:
Schnell umsetzbar (< 1 Stunde):
- ✅ Alle Bilder mit
widthundheightAttributen versehen - ✅ LCP-Bild mit
fetchpriority="high"kennzeichnen - ✅
font-display: swapin alle@font-face-Regeln eintragen - ✅
preconnectfür externe Domains im<head>ergänzen
Mittlerer Aufwand (halber Tag):
5. ✅ Bilder in WebP oder AVIF konvertieren und <picture> einsetzen
6. ✅ Render-blockierendes CSS und JS identifizieren und entfernen
7. ✅ Kritisches CSS inline in den <head> auslagern
Größere Maßnahmen (Entwicklungsaufwand):
8. ✅ JavaScript-Bundle analysieren und Code Splitting einführen
9. ✅ Server-seitiges Caching (OPcache für PHP, HTTP-Cache-Header) einrichten
10. ✅ Third-Party-Scripts (Analytics, Chat, Consent) lazy laden
Fazit: Performance ist kein Luxus – sie ist Grundlage
Core Web Vitals sind keine technische Spielerei für Entwickler. Sie sind das Fundament, auf dem eine gute Nutzererfahrung aufgebaut ist – und Google belohnt das direkt im Ranking.
Die gute Nachricht: Die meisten Probleme lassen sich mit klaren, überschaubaren Maßnahmen lösen. Du musst kein Performance-Experte sein, um anzufangen. Starte mit PageSpeed Insights, schau dir die drei Metriken an, und behebe die auffälligsten Probleme zuerst.
Wer professionelle Unterstützung sucht oder eine Website von Grund auf performance-optimiert aufbauen will, findet bei uns den richtigen Ansprechpartner.
Weiterführende Links:
Dieser Artikel wurde von 3ernert.com verfasst. Haben wir etwas vergessen oder hast du Fragen? Schreib uns unter info@3ernert.com.
Kommentare (0)
Diskutiere mit!
Logge dich ein oder erstelle kostenlos ein Konto, um an der Unterhaltung teilzunehmen und dein Wissen zu teilen.
Noch keine Kommentare vorhanden. Sei der Erste!