Core Web Vitals (CWV) sind drei Performance-Metriken, die Google als Ranking-Signale verwendet: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) und Cumulative Layout Shift (CLS). Diese Werte zu verbessern hilft nicht nur beim SEO. Es verbessert direkt die Erfahrung, die deine Besucher auf deiner Seite machen. Schnellere Seiten erzielen mehr Engagement, niedrigere Absprungraten und höhere Conversion-Raten. Hier ist ein gründlicher, praktischer Ansatz zur Verbesserung jeder Metrik auf WordPress.
Vor der Optimierung messen
Bevor du Änderungen vornimmst, erstelle eine Ausgangsmessung, damit du deinen Fortschritt verfolgen kannst. Nutze diese Tools, um deine aktuellen Core Web Vitals zu messen:
- Google PageSpeed Insights: Gib deine URL auf pagespeed.web.dev ein. Der obere Bereich zeigt Felddaten von echten Nutzern (falls verfügbar), der untere zeigt Labordaten aus einem simulierten Test. Felddaten sind das, was Google tatsächlich für Rankings verwendet.
- Google Search Console: Gehe zum Bericht "Core Web Vitals" unter "Nutzerfreundlichkeit." Dieser zeigt aggregierte Daten für deine gesamte Seite, gruppiert nach Mobil und Desktop. Er hebt hervor, welche URLs Verbesserung brauchen und welche bestehen.
- Chrome DevTools: Öffne DevTools (F12), gehe zum Tab "Performance" und starte eine Aufnahme während deine Seite lädt. Das gibt dir detaillierte Timing-Daten für jede Ressource und jeden Rendering-Schritt.
- Web Vitals Chrome Extension: Installiere die "Web Vitals"-Erweiterung für Echtzeit-CWV-Messungen beim Browsen deiner eigenen Seite.
Notiere deine Ausgangswerte für LCP, INP und CLS. Nach jeder Optimierung teste erneut, um die Verbesserung zu bestätigen.
LCP-Optimierung: Den Hauptinhalt schneller laden
LCP misst, wie lange es dauert, bis das größte sichtbare Element (normalerweise ein Hero-Bild, eine Überschrift oder ein großer Textblock) auf dem Bildschirm erscheint. Google betrachtet einen LCP unter 2,5 Sekunden als "gut." So bringst du ihn herunter:
- Dein LCP-Element identifizieren: In PageSpeed Insights scrolle zur Diagnose "Largest Contentful Paint element", um zu sehen, welches Element genau dein LCP ist. Das zu wissen zeigt dir, wo du den Fokus setzen musst.
- Hero-Bild optimieren: Wenn dein LCP-Element ein Bild ist, komprimiere es, konvertiere es zu WebP oder AVIF und stelle sicher, dass es passend zur Containergröße dimensioniert ist. Ein 3000px breites Bild in einem 1200px Container verschwendet Bandbreite. Füge
fetchpriority="high"hinzu, damit der Browser es priorisiert herunterlädt. - Kritische Ressourcen vorladen: Füge einen Preload-Hinweis im
<head>für das LCP-Bild hinzu, damit der Browser es sofort herunterlädt, statt es erst beim Rendering zu entdecken:
<link rel="preload" as="image" href="/wp-content/uploads/hero.webp" fetchpriority="high" />- Server-Antwortzeit reduzieren: Eine langsame TTFB verzögert alles. Nutze ein Caching-Plugin (siehe unseren Caching-Leitfaden), upgrade dein Hosting, wenn die TTFB dauerhaft über 600ms liegt, und erwäge ein CDN, um Inhalte von geografisch näheren Servern auszuliefern.
- Render-blockierendes CSS und JS eliminieren: Verschiebe nicht-kritisches CSS auf asynchrones Laden und verzögere JavaScript, das für den initialen Render nicht benötigt wird. WP Rockets "CSS-Auslieferung optimieren" und "JavaScript-Ausführung verzögern" Features erledigen das automatisch.
- CDN nutzen: Statische Assets (Bilder, CSS, JS) von Edge-Servern nahe deiner Besucher auszuliefern reduziert die Latenz. Cloudflare, BunnyCDN und KeyCDN integrieren sich alle gut mit WordPress.
- Unnötige Plugins entfernen: Jedes Plugin kann CSS- und JS-Dateien zur Seite hinzufügen. Deaktiviere und lösche Plugins, die du nicht mehr brauchst. Nutze das Query Monitor Plugin, um zu sehen, welche Plugins den meisten Overhead verursachen.
INP-Optimierung: Interaktionen sofort spürbar machen
INP misst, wie schnell deine Seite reagiert, wenn ein Nutzer einen Button klickt, einen Link antippt oder in ein Feld tippt. Google betrachtet einen INP unter 200 Millisekunden als "gut." Schlechter INP kommt meistens von JavaScript, das den Haupt-Thread blockiert. So behebst du das:
- JavaScript-Ausführungszeit reduzieren: Überprüfe deine Plugins und entferne alle, die schweres JavaScript hinzufügen, das du nicht brauchst. Slider, Social-Sharing-Widgets und komplexe Page Builder tragen oft erheblich dazu bei. Nutze den Coverage-Tab in Chrome DevTools (Strg+Umschalt+P, tippe "Coverage"), um zu sehen, wie viel deines geladenen JS tatsächlich verwendet wird.
- Nicht-kritische Skripte verzögern: Füge das
defer-Attribut zu Skripten hinzu, die für den initialen Seitenaufbau nicht benötigt werden. Plugins wie Flying Scripts lassen dich bestimmte Skripte bis zur Nutzerinteraktion (Scrollen, Klicken oder Tastendruck) verzögern. - Drittanbieter-Skripte minimieren: Analytics-Tracker, Werbepixel, Live-Chat-Widgets und Social-Media-Einbettungen führen alle JavaScript aus. Jedes einzelne fügt Ausführungszeit hinzu. Konsolidiere wo möglich, lade sie erst nach Nutzerinteraktion, oder ersetze schwere Einbettungen durch statische Alternativen (zum Beispiel ein Screenshot eines Tweets statt des Twitter-Embed-Skripts).
- Lange Tasks aufbrechen: JavaScript-Tasks, die länger als 50ms laufen, blockieren den Haupt-Thread und verzögern Nutzerinteraktionen. Wenn du eigenes JavaScript schreibst, nutze
requestAnimationFrameodersetTimeout, um schwere Berechnungen in kleinere Teile aufzubrechen. - DOM-Größe reduzieren: Ein großes DOM (über 1500 Knoten) macht jede JavaScript-Operation langsamer, weil der Browser mehr Elemente verarbeiten muss. Vereinfache deine Seitenstruktur, entferne unnötige Wrapper-Divs und überlege, ob wirklich jeder Inhaltsbereich beim initialen Laden benötigt wird.
CLS-Optimierung: Inhaltsverschiebungen verhindern
CLS misst, wie viel sichtbarer Inhalt sich während des Seitenladens unerwartet verschiebt. Google betrachtet einen CLS unter 0,1 als "gut." Layout-Verschiebungen frustrieren Nutzer, weil sie Fehlklicks und desorientierendes visuelles Springen verursachen. So beseitigst du sie:
- Explizite Bildabmessungen setzen: Füge immer
width- undheight-Attribute zu deinen Bildern hinzu. WordPress macht das automatisch für Bilder, die über die Mediathek eingefügt werden, aber manuell in HTML oder über Page Builder hinzugefügte Bilder haben diese Attribute möglicherweise nicht. Ohne Abmessungen weiß der Browser nicht, wie viel Platz er reservieren soll, und der Inhalt springt, wenn das Bild lädt. - Platz für Werbung und Einbettungen reservieren: Wenn du Werbung anzeigst, setze eine
min-heightauf den Werbecontainer, die der erwarteten Werbegröße entspricht. Das gleiche gilt für YouTube-Einbettungen, Social-Media-Widgets und andere Drittanbieter-Inhalte, die asynchron laden. - font-display swap verwenden: Wenn benutzerdefinierte Schriftarten langsam laden, kann der Browser Text verbergen, bis die Schrift bereit ist, und ihn dann plötzlich anzeigen, was eine Layout-Verschiebung verursacht. Setze
font-display: swapin deinen@font-face-Deklarationen, damit der Browser Text sofort in einer Fallback-Schrift anzeigt und zur benutzerdefinierten Schrift wechselt, wenn sie bereit ist:
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap;
}- Inhalte nicht oberhalb des sichtbaren Bereichs nachträglich einfügen: Banner, Benachrichtigungsleisten und Cookie-Consent-Popups, die Inhalte nach unten drücken, verursachen Layout-Verschiebungen. Nutze stattdessen Sticky-Positionierung oder Overlays, anstatt Elemente in den Dokumentenfluss einzufügen.
- Web-Fonts vorladen: Wenn dein Theme benutzerdefinierte Schriftarten verwendet, lade sie vor, damit sie schneller verfügbar sind und die Fallback-Schrift kürzer angezeigt wird:
<link rel="preload" as="font" href="/fonts/custom.woff2" type="font/woff2" crossorigin />WordPress-Plugins für bessere Core Web Vitals
Mehrere Plugins adressieren gleichzeitig verschiedene CWV-Metriken:
- WP Rocket: Page Caching, CSS/JS-Optimierung, Lazy Loading, JS-Ausführung verzögern. Das umfassendste einzelne Plugin für CWV-Verbesserungen.
- Autoptimize: Kostenloses Plugin für CSS- und JS-Minifizierung, Zusammenfassung und Inline-Critical-CSS. Funktioniert gut zusammen mit einem Caching-Plugin.
- Perfmatters: Leichtgewichtiges Plugin zum Deaktivieren ungenutzter WordPress-Features (Emojis, Embeds, Dashicons), Skripte pro Seite verwalten und Preload-Hinweise hinzufügen.
- Flying Scripts: Kostenloses Plugin, das die JavaScript-Ausführung bis zur Nutzerinteraktion verzögert. Besonders effektiv für Drittanbieter-Skripte wie Google Analytics, Facebook Pixel und Chat-Widgets.
- OMGF (Optimize My Google Fonts): Lädt Google Fonts lokal herunter und optimiert deren Laden, eliminiert die externe Anfrage und verbessert sowohl LCP als auch CLS.
Verbesserungen über die Zeit überwachen
Core Web Vitals Felddaten (die Daten, die Google für Rankings verwendet) aktualisieren sich über einen rollierenden 28-Tage-Zeitraum. Das bedeutet, Verbesserungen erscheinen nicht sofort in der Search Console. Warte nach Änderungen mindestens vier Wochen, bevor du die Auswirkungen in der Search Console bewertest. In der Zwischenzeit nutze PageSpeed Insights Labordaten und die Web Vitals Chrome Extension für schnelleres Feedback. Richte eine monatliche Routine ein: führe PageSpeed Insights auf deinen wichtigsten Seiten aus, notiere die Werte und vergleiche sie mit dem Vormonat. Das hilft dir, Rückschritte frühzeitig zu erkennen, besonders nach Plugin-Updates oder Theme-Änderungen.
Core Web Vitals mit InspectWP überprüfen
InspectWP prüft viele Faktoren, die Core Web Vitals beeinflussen: Content Encoding (GZIP/Brotli), HTTP-Protokollversion (HTTP/2 oder HTTP/3), Gesamtzahl der Bilder, JS- und CSS-Dateianzahl und die gesamte HTML-Größe. Nutze diese Metriken als Ausgangspunkt, um zu identifizieren, welche Bereiche Aufmerksamkeit brauchen. Führe nach jeder Optimierung einen Scan durch, um die Verbesserung zu bestätigen.