Als Websitebetreiber sollten Sie verstehen, dass die Core Web Vitals eine entscheidende Rolle für das Ranking Ihrer Website bei Google spielen. Diese drei Messwerte, Largest Contentful Paint (LCP), Interaction to Next Paint (INP) und Cumulative Layout Shift (CLS), bilden die Grundlage dafür, wie Google die Nutzererfahrung auf Ihrer Website bewertet. In diesem ausführlichen Ratgeber erfahren Sie alles über das Optimieren der Core Web Vitals, vom Messen bis zum Verbessern dieser zentralen Metriken.

Was sind Core Web Vitals genau?

• Largest Contentful Paint (LCP): misst die Ladeleistung
• Interaction to Next Paint (INP): misst Interaktivität und Reaktionsfähigkeit
• Cumulative Layout Shift (CLS): misst die visuelle Stabilität

Diese drei Core Web Vitals ergeben zusammen mit anderen Metriken wie First Contentful Paint (FCP) und Time to First Byte (TTFB) das vollständige Bild der Leistung Ihrer Website. Doch warum sind diese Metriken so wichtig? Google nutzt die Core Web Vitals als Rankingfaktor, weil sie direkt damit zusammenhängen, wie Nutzer Ihre Website erleben. Websites mit guten Werten bieten eine bessere Nutzererfahrung und haben oft höhere Conversion-Raten.

Largest Contentful Paint (LCP) erklärt

Was zählt als LCP-Element?

Nicht alle Elemente können als LCP gelten. Folgende Elemente kommen infrage:

• IMG-Elemente
• Image-Elemente innerhalb eines SVG
• Video-Elemente mit einem Posterbild
• Elemente mit einem über url() geladenen Hintergrundbild
• Block-Level-Elemente mit Textknoten oder Inline-Textelementen

Wie verbessern Sie den LCP?

Es gibt verschiedene Strategien, um Ihren Largest Contentful Paint zu optimieren:

1. Optimieren Sie Ihre Bilder: Verwenden Sie moderne Formate wie WebP oder AVIF, komprimieren Sie Bilder und setzen Sie Responsive Images mit srcset ein.
2. Setzen Sie Lazy Loading gezielt ein: Laden Sie Above-the-fold-Inhalte sofort und verwenden Sie Lazy Loading nur für Inhalte weiter unten auf der Seite.
3. Laden Sie wichtige Ressourcen vorab: Verwenden Sie <link rel="preload"> für kritische Bilder und Schriften.
4. Verkürzen Sie die Server-Antwortzeit: Optimieren Sie Ihren Backend-Code und Ihre Datenbankabfragen. Nutzen Sie Caching und einen guten Hosting-Partner wie LiteSpeed-Hosting.
5. Beseitigen Sie Render-blockierende Ressourcen: Laden Sie JavaScript mit defer, binden Sie kritisches CSS inline ein und entfernen Sie ungenutztes CSS.
6. Nutzen Sie ein CDN: Ein Content Delivery Network wie QUIC.cloud CDN sorgt dafür, dass Inhalte näher beim Nutzer ausgeliefert werden.

Interaction to Next Paint (INP) erklärt

Ein guter INP-Wert liegt unter 200 Millisekunden. Zwischen 200 ms und 500 ms sollten Sie nachbessern, und über 500 ms gilt der Wert als schlecht. INP ist oft der am schwersten zu optimierende Core Web Vital, weil er von komplexer JavaScript-Ausführung und Rendering-Prozessen abhängt.

Häufige Ursachen für einen schlechten INP

• Aufwendige JavaScript-Ausführung: lange Tasks, die den Main Thread blockieren
• Große DOM-Bäume: Mehr als 1500 Knoten machen das Rendering langsam
• Render-blockierende Skripte: JavaScript, das Parsing und Rendering blockiert
• Skripte von Drittanbietern: Analytics, Werbung und Social-Media-Widgets
• Layout Thrashing: häufiges Lesen und Schreiben von Layout-Eigenschaften

Wie verbessern Sie den INP?

1. Teilen Sie lange Tasks auf: Verwenden Sie setTimeout oder requestIdleCallback, um die Arbeit auf mehrere Frames zu verteilen.
2. Optimieren Sie Event-Handler: Nutzen Sie Event Delegation sowie Debounce- und Throttle-Techniken.
3. Verringern Sie die JavaScript-Größe: Code Splitting, Tree Shaking und Minifizierung sind unerlässlich.
4. Nutzen Sie Web Worker: Verlagern Sie aufwendige Berechnungen in Hintergrund-Threads.
5. Optimieren Sie Skripte von Drittanbietern: Laden Sie sie asynchron oder mit defer, oder verwenden Sie Facades.
6. Setzen Sie Virtualisierung ein: Verwenden Sie für lange Listen Virtual-Scrolling-Bibliotheken.

Cumulative Layout Shift (CLS) erklärt

CLS ist ein Wert ohne Einheit. Ein Wert unter 0,1 ist gut, zwischen 0,1 und 0,25 muss er verbessert werden, und über 0,25 ist er schlecht. Der Wert wird berechnet, indem die Impact Fraction (wie viel des Viewports betroffen war) mit der Distance Fraction (wie weit sich Elemente verschoben haben) multipliziert wird.

Häufige Ursachen für Layout-Verschiebungen

• Bilder ohne Abmessungen: Der Browser kann keinen Platz reservieren
• Werbung und Embeds: dynamische Inhalte, die Platz beanspruchen
• Webfonts: FOIT (Flash of Invisible Text) und FOUT (Flash of Unstyled Text)
• Dynamisch eingefügte Inhalte: Banner, Benachrichtigungen, Cookie-Einwilligung
• Animationen: CSS-Transitions, die Layout-Eigenschaften ändern

Wie verbessern Sie den CLS?

1. Geben Sie für Bilder und Videos immer width und height an: Moderne Browser können dann das Seitenverhältnis berechnen.
2. Reservieren Sie Platz für Werbung: Verwenden Sie min-height für Werbecontainer.
3. Optimieren Sie das Laden von Webfonts: Verwenden Sie font-display: swap und laden Sie kritische Schriften mit preload.
4. Fügen Sie keine Inhalte oberhalb bestehender Inhalte ein: Es sei denn, es geschieht als Reaktion auf eine Nutzerinteraktion.
5. Verwenden Sie Transform-Animationen: Animieren Sie mit transform und opacity, nicht mit width, height, top oder left.
6. Reservieren Sie Platz für spät geladene Inhalte: Verwenden Sie Skeletons oder Platzhalter.

Core Web Vitals messen: die Tools

PageSpeed Insights

PageSpeed Insights ist das offizielle Tool von Google und kombiniert Labordaten (simulierte Tests) mit Felddaten (echte Nutzerdaten aus dem Chrome User Experience Report). Geben Sie einfach Ihre URL ein, und Sie erhalten Werte für alle Core Web Vitals sowie detaillierte Empfehlungen. Sie können Ihre Website auch mit dem SEO-Check von Theory7 testen, der PageSpeed Insights integriert.

Chrome DevTools

Die Chrome DevTools bieten detailliertere Analysemöglichkeiten. Öffnen Sie die DevTools (F12), gehen Sie zum Performance-Panel und erstellen Sie eine Aufzeichnung, während Ihre Seite lädt. Sie sehen dann genau, wo Zeit verbraucht wird, und können LCP, INP und CLS im Detail analysieren. Das Lighthouse-Panel in den DevTools kann außerdem ein vollständiges Audit durchführen.

Search Console

Die Google Search Console hat einen Core-Web-Vitals-Bericht, der zeigt, wie Ihre Seiten in der Praxis abschneiden, basierend auf Daten echter Chrome-Nutzer. Das sind Felddaten, und sie liefern das realistischste Bild Ihrer Leistung. URLs werden in Gut, Optimierung erforderlich und Schlecht gruppiert.

Web Vitals Extension

Das Chrome-Add-on Web Vitals zeigt Metriken in Echtzeit an, während Sie durch Ihre Website navigieren. Das ist praktisch für schnelle Checks während der Entwicklung. Das Add-on zeigt LCP, INP, CLS und andere Metriken in einem kleinen Badge-Symbol an.

Real User Monitoring (RUM)

Für Websites im Produktivbetrieb ist RUM unerlässlich. Tools wie Google Analytics 4, Cloudflare Web Analytics oder spezielle RUM-Tools sammeln Metriken echter Nutzer in verschiedenen Browsern, Netzwerken und auf verschiedenen Geräten. Das liefert das vollständigste Bild.

Core Web Vitals für WordPress optimieren

Wählen Sie schnelles Hosting

Ihr Hosting ist die Grundlage für gute Performance. Entscheiden Sie sich für WordPress-Hosting auf LiteSpeed-Basis, das natives Caching unterstützt und für WordPress optimiert ist. Der Server-Cache von LiteSpeed ist deutlich schneller als Nginx oder Apache mit herkömmlichen Caching-Plugins.

Verwenden Sie ein auf Performance ausgerichtetes Theme

Themes wie GeneratePress, Astra oder Kadence sind auf Performance ausgelegt. Meiden Sie Themes mit Page Buildern, die viel JavaScript und CSS laden. Ein schlankes Theme ist die Grundlage für gute Core Web Vitals.

Plugins optimieren

• Verwenden Sie so wenige Plugins wie möglich: Jedes Plugin erzeugt zusätzlichen Overhead
• Wählen Sie Qualität statt Quantität: Ein gutes All-in-one-Plugin ist besser als fünf kleine
• Testen Sie den Einfluss von Plugins: Verwenden Sie Query Monitor, um zu sehen, welche Plugins langsam sind
• Ersetzen Sie schwergewichtige Plugins: Suchen Sie schlanke Alternativen zu beliebten, aber schweren Plugins

Caching strategisch einsetzen

Das Plugin LiteSpeed Cache ist die umfassendste Caching-Lösung für WordPress und lässt sich reibungslos mit LiteSpeed-Hosting kombinieren. Konfigurieren Sie:

• Page Caching für die Auslieferung statischer HTML-Seiten
• Object Caching mit Redis oder Memcached
• Browser-Caching für wiederkehrende Besucher
• CDN-Integration mit QUIC.cloud
• Bildoptimierung mit WebP-Konvertierung
• CSS/JS-Minifizierung und -Zusammenführung
• Erzeugung von Critical CSS für Above-the-fold-Inhalte
• Lazy Loading für Bilder und iframes

Datenbankoptimierung

WordPress-Datenbanken können durch Revisionen, Transients und Spam aufgebläht werden. Verwenden Sie WP-Optimize oder ähnliche Plugins, um regelmäßig aufzuräumen. Optimieren Sie Datenbankabfragen in eigenem Code und erwägen Sie den Einsatz von Object Caching.

Der Einfluss des Hostings auf die Core Web Vitals

Server-Antwortzeit

Ein langsamer Server bedeutet eine langsame TTFB, was direkt zu einem schlechten LCP führt. LiteSpeed-Server sind für WordPress deutlich schneller als Apache oder Nginx, weil sie für die PHP-Ausführung optimiert sind und natives Caching auf Serverebene unterstützen.

HTTP/3 und QUIC-Protokoll

Modernes Hosting mit HTTP/3-Unterstützung über das QUIC-Protokoll bietet schnellere Verbindungen, vor allem in Mobilfunknetzen. QUIC verringert die Latenz beim Verbindungsaufbau und erholt sich schneller von Paketverlusten. Das Hosting von Theory7 unterstützt HTTP/3 standardmäßig.

Ressourcenlimits

Günstiges Shared Hosting begrenzt oft CPU, RAM und I/O. Bei Traffic-Spitzen kann das zu drastisch schlechteren Core Web Vitals führen. Wählen Sie Hosting mit ausreichenden Ressourcen und guter Burst-Kapazität.

Serverstandort und CDN

Die physische Entfernung zwischen Server und Nutzer beeinflusst die Latenz. Ein CDN löst das, indem es Inhalte weltweit auf Edge-Servern zwischenspeichert. QUIC.cloud CDN lässt sich reibungslos mit LiteSpeed-Hosting kombinieren und verbessert die Core Web Vitals für internationale Besucher.

Häufige Probleme mit Core Web Vitals und Lösungen

Problem: LCP über 4 Sekunden

Diagnose: Verwenden Sie PageSpeed Insights, um zu ermitteln, welches Element den LCP verursacht. Prüfen Sie den Wasserfall in den Chrome DevTools, um zu sehen, warum dieses Element spät lädt.

Lösungen:

• Wenn es ein Bild ist: Optimieren Sie das Bild, verwenden Sie WebP, setzen Sie Responsive Images ein und laden Sie das Bild mit preload
• Wenn es Text ist: Binden Sie kritisches CSS inline ein, laden Sie Schriften mit preload und verringern Sie Render-blockierende Ressourcen
• Wenn die TTFB hoch ist: Wechseln Sie zu besserem Hosting, setzen Sie serverseitiges Caching ein und optimieren Sie die Datenbank
• Bei vielen Render-blockierenden Ressourcen: Laden Sie JavaScript mit defer, entfernen Sie ungenutztes CSS und binden Sie kritisches CSS inline ein

Problem: INP über 500 ms

Diagnose: Verwenden Sie das Performance-Panel der Chrome DevTools, um lange Tasks zu identifizieren. Achten Sie auf den Interactions-Track in der Aufzeichnung.

Lösungen:

• Teilen Sie lange Tasks mit setTimeout oder scheduler.yield() auf
• Verringern Sie die Größe des JavaScript-Bundles mit Code Splitting
• Laden Sie Skripte von Drittanbietern mit defer oder asynchron
• Setzen Sie Virtualisierung für lange Listen ein
• Optimieren Sie Event-Handler mit Debouncing
• Verkleinern Sie den DOM (unter 1500 Knoten)

Problem: CLS über 0,25

Diagnose: Verwenden Sie den Bereich Experience der Chrome DevTools während einer Performance-Aufzeichnung. Sie sehen dann genau, welche Elemente sich verschieben und wann.

Lösungen:

• Fügen Sie allen Bildern und Videos width und height hinzu
• Reservieren Sie mit min-height Platz für Werbung
• Verwenden Sie font-display: swap und laden Sie Schriften mit preload
• Fügen Sie keine Inhalte oberhalb bestehender Inhalte ein
• Verwenden Sie die CSS-Eigenschaft aspect-ratio für responsive Embeds
• Animieren Sie mit transform/opacity, nicht mit Layout-Eigenschaften

Fortgeschrittene Optimierungstechniken

Resource Hints

Verwenden Sie Resource Hints, um dem Browser beim Setzen von Prioritäten zu helfen:

• preconnect: Bauen Sie frühzeitig eine Verbindung zu Drittanbieter-Origins auf
• dns-prefetch: Lösen Sie DNS für Drittanbieter-Domains vorab auf
• preload: Laden Sie kritische Ressourcen mit hoher Priorität
• prefetch: Laden Sie Ressourcen für die nächste Navigation in Leerlaufzeiten

Priority Hints

Mit dem Attribut fetchpriority (in modernen Browsern unterstützt) teilen Sie dem Browser mit, welche Ressourcen wichtiger sind. Verwenden Sie fetchpriority="high" für Ihr LCP-Bild.

Critical CSS

Binden Sie das CSS, das für Above-the-fold-Inhalte nötig ist, inline ein und laden Sie den Rest asynchron. Das verringert Render-Blocking und verbessert den LCP deutlich. Tools wie Critical oder Critters können das automatisieren.

JavaScript-Optimierung

• Code Splitting: Laden Sie nur den Code, der für die aktuelle Seite nötig ist
• Tree Shaking: Entfernen Sie ungenutzten Code beim Build
• Minifizierung: Verkleinern Sie die Dateigröße
• Komprimierung: Verwenden Sie Brotli oder Gzip
• Module/nomodule-Pattern: Liefern Sie moderne ES-Module an moderne Browser aus

Monitoring und kontinuierliche Verbesserung

1. RUM einrichten: Sammeln Sie Real User Metrics über Google Analytics 4 oder spezielle RUM-Tools
2. Search Console überwachen: Prüfen Sie wöchentlich den Core-Web-Vitals-Bericht
3. Automatisierte Tests: Integrieren Sie Lighthouse CI in Ihre Deployment-Pipeline
4. Alarmsystem: Erhalten Sie Benachrichtigungen, wenn sich Metriken verschlechtern
5. Regelmäßige Audits: Führen Sie monatlich ein vollständiges Performance-Audit durch
6. A/B-Tests: Testen Sie Optimierungen mit echten Nutzern, bevor Sie sie ausrollen

Nutzen Sie den Ratgeber zu Tools für den Website-Geschwindigkeitstest für einen Überblick über alle verfügbaren Testtools und deren effektiven Einsatz.

Häufige Fragen zu Core Web Vitals

Wie stark beeinflussen Core Web Vitals mein Google-Ranking?

Core Web Vitals sind einer von vielen Rankingfaktoren. Google hat bestätigt, dass die Relevanz der Inhalte nach wie vor am wichtigsten ist, doch bei gleicher Relevanz können die Core Web Vitals den Unterschied machen. Vor allem bei umkämpften Suchbegriffen kann der Unterschied zwischen einer Website mit guten und einer mit schlechten Core Web Vitals in den Rankings sichtbar sein. Außerdem wirken sich bessere Core Web Vitals direkt auf Conversion und Nutzererfahrung aus.

Muss ich in PageSpeed Insights 100/100 erreichen?

Nein, eine perfekte Punktzahl ist nicht notwendig und für Produktiv-Websites mit normaler Funktionalität oft unrealistisch. Konzentrieren Sie sich darauf, Ihre Core Web Vitals in den grünen Bereich zu bringen (LCP unter 2,5 s, INP unter 200 ms, CLS unter 0,1). Ein Wert von 90+ ist hervorragend, 75-90 ist gut. Zeit, die Sie in eine Verbesserung von 95 auf 100 investieren, bringt meist keinen messbaren Vorteil.

Warum unterscheiden sich meine Laborwerte von den Feldwerten?

Labordaten (PageSpeed Insights, Lighthouse) beruhen auf simulierten Tests unter kontrollierten Bedingungen mit einer langsamen Mobilverbindung. Felddaten (Search Console, Chrome User Experience Report) stammen von echten Nutzern mit unterschiedlichen Geräten, Browsern und Netzwerken. Für das Ranking zählen die Felddaten. Wenn Ihre Laborwerte schlecht, die Feldwerte aber gut sind, gibt es kein Problem. Konzentrieren Sie sich immer zuerst auf die Felddaten.

Welche Browser zählen für die Core Web Vitals?

Nur Chrome und Chromium-basierte Browser (Edge, Opera, Brave usw.) melden Core-Web-Vitals-Daten an den Chrome User Experience Report. Das bedeutet, dass Nutzer von Safari und Firefox in Ihren offiziellen Metriken nicht mitzählen. Etwa 65 % der Internetnutzer verwenden Chrome-basierte Browser, Sie erhalten also trotzdem ein repräsentatives Bild.

Wie oft aktualisiert Google die Core-Web-Vitals-Daten?

Die Daten in der Search Console und im Chrome User Experience Report werden täglich aktualisiert und zeigen einen rollierenden 28-Tage-Durchschnitt. Das bedeutet, dass Änderungen, die Sie heute vornehmen, erst nach einigen Tagen in den Metriken sichtbar werden, und es kann bis zu 28 Tage dauern, bis Sie die volle Wirkung sehen. Haben Sie Geduld und beobachten Sie die Trends über Wochen, nicht über Tage.

Zusammenfassung

Das Optimieren der Core Web Vitals ist für moderne Websites unerlässlich. Mit den richtigen Tools, Techniken und dem richtigen Hosting kann jede Website gute Werte erreichen. Beginnen Sie damit, Ihre aktuelle Leistung zu messen, ermitteln Sie die größten Probleme und arbeiten Sie systematisch an Verbesserungen. Konzentrieren Sie sich zuerst auf Felddaten und schnelle Erfolge wie Bildoptimierung und Caching. Wählen Sie hochwertiges Hosting mit LiteSpeed und CDN-Unterstützung. Überwachen Sie laufend und optimieren Sie weiter, während sich Ihre Website weiterentwickelt. Mit diesem vollständigen Ratgeber haben Sie das nötige Wissen, um Ihre Core Web Vitals in den grünen Bereich zu bringen und dort zu halten.