Nur 44 % aller WordPress-Websites bestehen alle drei Core Web Vitals auf Mobilgeräten. Das zeigt der Core Web Vitals Technology Report von Google. Wenn Deine Website zu den anderen 56 % gehört, verlierst Du nicht nur Rankings, sondern auch Besucher und Conversions.
Die gute Nachricht: Core Web Vitals verbessern ist kein Hexenwerk. Es braucht kein Komplett-Relaunch, sondern gezielte Maßnahmen an den richtigen Stellen. Bei snutig optimieren wir WordPress- und Elementor-Websites seit über vier Jahren auf Performance. In diesem Leitfaden bekommst Du die konkreten Hebel, die wir in unseren Projekten nutzen, um LCP, CLS und INP in den grünen Bereich zu bringen.
Was sind Core Web Vitals 2026?
Core Web Vitals sind drei von Google definierte Metriken, die messen, wie schnell, stabil und reaktionsfähig eine Website aus Nutzersicht ist. Sie sind seit 2021 ein offizieller Ranking-Faktor und werden direkt in der Google Search Console ausgewertet.
Die drei Metriken im Überblick:
- LCP (Largest Contentful Paint): Misst, wie schnell der größte sichtbare Inhalt im Viewport geladen wird. Das kann ein Hero-Bild, eine Headline oder ein Video-Thumbnail sein. Zielwert: unter 2,5 Sekunden.
- CLS (Cumulative Layout Shift): Misst die visuelle Stabilität der Seite. Wenn Elemente nach dem Laden springen oder sich verschieben, steigt der CLS-Wert. Zielwert: unter 0,1.
- INP (Interaction to Next Paint): Hat im März 2024 die alte Metrik FID (First Input Delay) ersetzt. INP misst die Reaktionsfähigkeit der gesamten Seite, also wie schnell die Website auf Klicks, Taps und Tastatureingaben reagiert. Zielwert: unter 200ms.
Alle drei Werte müssen bestanden werden, damit Google Deine Seite als „gut“ einstuft. Schon eine Metrik im roten Bereich zieht die gesamte Bewertung nach unten.
LCP verbessern: Die 5 größten Hebel für WordPress
Der Largest Contentful Paint ist die Metrik, die bei WordPress-Websites am häufigsten scheitert. Die Ursachen sind fast immer dieselben.
1. Bilder optimieren: WebP, Lazy Loading, responsive Größen
Bilder sind der häufigste LCP-Killer. Wenn Dein Hero-Bild 2 MB groß und als PNG eingebunden ist, wartet der Browser länger als nötig.
Was Du tun solltest:
- WebP als Standardformat nutzen. WebP liefert bei gleicher Qualität 25 bis 30 % kleinere Dateien als JPEG.
- Responsive Images mit
srcsetundsizeseinsetzen, damit der Browser die passende Größe lädt. - Lazy Loading per
loading="lazy"für alle Bilder aktivieren, die nicht im sichtbaren Bereich liegen. Das LCP-Bild selbst darf nicht lazy geladen werden. - Fetchpriority für das LCP-Bild setzen:
fetchpriority="high"sagt dem Browser, dass dieses Bild Priorität hat.
2. Server-Antwortzeit senken
Bevor der Browser überhaupt mit dem Rendern anfängt, muss der Server antworten. Auf Shared Hosting mit 20 anderen Websites teilst Du Dir CPU und RAM. Das kostet Zeit.
Die Lösung: Managed WordPress Hosting mit Server-Standort in Deutschland. Anbieter wie Raidboxes, FLAVOR oder Cloudways liefern TTFB-Werte (Time to First Byte) unter 200ms. Auf Shared Hosting liegen die Werte häufig bei 800ms oder mehr.
3. Render-blockierende Ressourcen eliminieren
JavaScript und CSS, die im <head> geladen werden, blockieren das Rendering. Der Browser wartet, bis alles geladen und geparst ist, bevor er etwas anzeigt.
Konkrete Maßnahmen:
- JavaScript per
deferoderasyncladen. - Critical CSS inline im
<head>ausliefern, den Rest permedia="print"oder asynchron nachladen. - Nicht benötigte Plugins identifizieren und deaktivieren. Jedes Plugin bringt eigene CSS- und JS-Dateien mit.
4. Font-Loading optimieren
Webfonts können das Rendern um Sekunden verzögern, wenn der Browser auf den Download wartet, bevor er Text anzeigt.
Die Lösung: font-display: swap in Deiner @font-face-Deklaration setzen. Damit zeigt der Browser sofort einen Fallback-Font und tauscht ihn aus, sobald der Webfont geladen ist. Das verhindert unsichtbaren Text (FOIT) und beschleunigt den LCP.
Noch besser: Fonts lokal hosten statt von Google Fonts laden. Das spart einen DNS-Lookup und eine zusätzliche Verbindung.
5. Elementor-spezifisch: DOM-Größe reduzieren
Elementor erzeugt viel HTML. Jedes Widget bringt mehrere Wrapper-Divs mit, und bei komplexen Layouts kann die DOM-Größe schnell auf über 3.000 Knoten steigen. Das verlangsamt Parsing und Rendering.
Was hilft:
- Container-Layout statt des alten Section-Column-Layouts nutzen. Container erzeugen weniger DOM-Elemente.
- Verschachtelte Inner Sections vermeiden.
- Auf die Zahl der Widgets pro Seite achten. Weniger ist schneller.
- Elementors eingebaute Performance-Experimente aktivieren (unter Elementor > Einstellungen > Experimente).
CLS verbessern: Visuelle Stabilität sicherstellen
Nichts frustriert Nutzer mehr, als wenn sie auf einen Button klicken wollen und das Element im letzten Moment wegspringt. Genau das misst CLS.
1. Bild- und Video-Dimensionen immer angeben
Wenn der Browser die Größe eines Bildes nicht kennt, reserviert er keinen Platz. Das Bild lädt, und alles darunter verschiebt sich.
Die Lösung ist simpel: <img width="800" height="600"> immer setzen. WordPress macht das seit Version 5.5 automatisch für Bilder aus der Medienbibliothek. Prüfe aber manuell eingebundene Bilder, iFrames und Videos.
2. Font-Loading-Strategie anpassen
Wenn der Webfont geladen wird und andere Maße hat als der Fallback-Font, springt der gesamte Text. Das erzeugt CLS.
So löst Du das:
font-display: swapverwenden (siehe LCP-Abschnitt).- Einen Fallback-Font wählen, der ähnliche Maße wie Dein Webfont hat.
- Optional: Die CSS-Property
size-adjustnutzen, um den Fallback-Font metrisch anzupassen.
3. Keine dynamischen Inhalte über dem Fold
Banner, Cookie-Hinweise oder nachträglich geladene Elemente im sichtbaren Bereich verschieben alles darunter.
Die Regel: Alles, was oberhalb des Folds erscheint, muss von Anfang an da sein oder reservierten Platz haben. Cookie-Banner sollten als Overlay (nicht als eingeschobenes Element) umgesetzt werden.
4. Platzhalter für Ads und Embeds
Wenn Du Werbeanzeigen, YouTube-Videos oder Social-Media-Embeds einbindest: Reserviere den Platz vorab mit festen Dimensionen oder einer CSS-min-height. Damit verhindert sich der Layout-Shift, wenn das Embed später lädt.
5. Elementor: Min-Heights für Sections setzen
Ein häufiger CLS-Verursacher in Elementor: Sections, deren Höhe sich erst durch den Inhalt ergibt. Wenn Bilder oder Texte nachladen, ändert sich die Höhe.
Setze feste min-height-Werte für Hero-Sections und Bereiche mit dynamischem Content. In Elementor geht das über die erweiterten Einstellungen jeder Section.
INP optimieren: Die neue Metrik seit 2024
INP (Interaction to Next Paint) ist die neueste Core Web Vital und misst, wie schnell Deine Website auf Nutzerinteraktionen reagiert. Nicht nur den ersten Klick wie FID, sondern alle Interaktionen während des gesamten Besuchs.
1. JavaScript-Ausführungszeit reduzieren
Wenn der Main Thread des Browsers mit der Ausführung von JavaScript beschäftigt ist, reagiert die Seite nicht auf Klicks. Das ist die häufigste Ursache für schlechte INP-Werte.
Prüfe mit den Chrome DevTools (Performance-Tab), welche Skripte den Main Thread blockieren. Häufige Verdächtige: Analytics-Skripte, Chat-Widgets, Social-Media-Plugins.
2. Lange Tasks aufbrechen
Der Browser arbeitet in einem einzigen Thread. Eine JavaScript-Aufgabe, die 300ms dauert, blockiert 300ms lang jede Interaktion.
Lösung: Lange Tasks in kleinere Häppchen aufbrechen. Das Keyword hier ist scheduler.yield() oder die Aufteilung mit requestIdleCallback. Für WordPress-Nutzer ohne Custom-Code: Plugins identifizieren, die lange Tasks verursachen, und Alternativen suchen.
3. Third-Party-Skripte minimieren
Jedes externe Skript (Google Analytics, Facebook Pixel, HubSpot, Hotjar) fügt JavaScript hinzu, das auf dem Main Thread läuft.
Empfehlung:
- Auditiere alle eingebundenen Third-Party-Skripte. Brauchst Du wirklich alle?
- Lade Tracking-Skripte per
deferoder nach User-Interaktion. - Nutze den Google Tag Manager mit Consent Mode, um Skripte erst nach Einwilligung zu laden.
4. Plugin-Audit-Methodik
WordPress-Plugins sind der größte INP-Killer. Viele laden ihr JavaScript auf jeder Seite, auch wenn sie dort nicht gebraucht werden.
So gehst Du vor:
- Installiere das Plugin „Query Monitor“ und prüfe, welche Skripte auf welchen Seiten geladen werden.
- Deaktiviere Plugins einzeln und miss den INP-Effekt.
- Ersetze schwere Plugins durch leichtere Alternativen.
- Nutze ein Plugin wie „Asset CleanUp“ oder „Perfmatters“, um Skripte seitenspezifisch zu deaktivieren.
5. Elementor: Komplexe Interaktionen auf Mobile vermeiden
Aufwändige Hover-Effekte, Parallax-Scrolling und Animationen auf jedem Element sehen auf dem Desktop nett aus, bremsen aber mobile Geräte aus.
Elementors Motion Effects und Scrolling Effects erzeugen zusätzliche JavaScript-Events. Nutze sie sparsam, vor allem auf Mobilgeräten. In den responsive Einstellungen von Elementor kannst Du Animationen gezielt für Mobile deaktivieren.
WordPress-spezifische Optimierungen
Unabhängig von einzelnen Metriken gibt es WordPress-weite Maßnahmen, die alle drei Core Web Vitals gleichzeitig verbessern.
Caching richtig einsetzen
Ohne Caching generiert WordPress bei jedem Seitenaufruf die Seite neu aus der Datenbank. Das ist langsam.
- WP Rocket ist die komfortabelste Lösung: Page Cache, Browser Cache, CSS/JS-Minifizierung und Lazy Loading in einem Plugin.
- W3 Total Cache ist eine kostenlose Alternative mit mehr Konfigurationsmöglichkeiten.
- Server-seitiges Caching (z. B. Redis Object Cache) beschleunigt datenbankintensive Seiten zusätzlich.
CDN einsetzen
Ein Content Delivery Network liefert statische Dateien (Bilder, CSS, JS) von Servern, die geografisch nahe am Nutzer stehen.
Für den deutschen Markt empfehlen wir Cloudflare (kostenloser Plan reicht für die meisten Websites) oder BunnyCDN (günstiger, schnell, Rechenzentrum in Frankfurt).
Bilder-Plugins
- ShortPixel: Komprimiert Bilder automatisch beim Upload und konvertiert zu WebP.
- Imagify: Ähnlich wie ShortPixel, gut integriert mit WP Rocket.
Beide Plugins können bestehende Bilder nachträglich komprimieren (Bulk Optimization).
Datenbank-Cleanup
WordPress sammelt über die Zeit Post-Revisionen, Spam-Kommentare, transiente Optionen und verwaiste Metadaten. Das verlangsamt Datenbankabfragen.
Lösung: Regelmäßig mit „WP-Optimize“ oder „Advanced Database Cleaner“ aufräumen. Revisionen auf maximal 5 pro Beitrag begrenzen (in der wp-config.php: define('WP_POST_REVISIONS', 5);).
PHP-Version aktuell halten
PHP 8.2 oder 8.3 ist deutlich schneller als PHP 7.4. Der Unterschied liegt bei 20 bis 30 % weniger Ausführungszeit. Prüfe in Deinem Hosting-Panel, welche Version läuft, und aktualisiere.
Hosting für den deutschen Markt
Für gute Core Web Vitals brauchst Du schnelles Hosting mit Server-Standort in Deutschland oder Westeuropa. Unsere Empfehlungen:
- Raidboxes: Managed WordPress Hosting aus Münster, exzellente TTFB-Werte, automatische Backups.
- FLAVOR (ehemals flavor.dev): Schnelles WordPress-Hosting mit SSD-Speicher.
- Cloudways (Vultr Frankfurt): Flexibel, skalierbar, gutes Preis-Leistungs-Verhältnis.
Shared Hosting bei großen Anbietern (IONOS, Strato, HostEurope) reicht für Performance-kritische Projekte oft nicht aus.
Elementor und JetEngine: Performance-Tipps, die kaum jemand kennt
Bei snutig arbeiten wir täglich mit Elementor und JetEngine. Aus dieser Praxis haben sich Optimierungen ergeben, die über Standard-Tipps hinausgehen.
Elementor Experiments aktivieren
Unter Elementor > Einstellungen > Experimente findest Du Features, die Performance verbessern:
- Optimized DOM Output: Reduziert unnötige Wrapper-Elemente.
- Improved CSS Loading: Lädt CSS nur für Widgets, die auf der Seite tatsächlich verwendet werden.
- Inline Font Icons: Reduziert HTTP-Requests für Icon-Fonts.
Diese Experiments sind standardmäßig deaktiviert. Aktiviere sie und teste gründlich.
Unbenutzte Widgets deaktivieren
Elementor lädt standardmäßig Assets für alle registrierten Widgets. Unter Elementor > Einstellungen > Experimente oder mit dem Plugin „Jeuspended“ kannst Du Widgets deaktivieren, die Du nicht nutzt. Weniger registrierte Widgets bedeuten weniger CSS und JavaScript.
JetEngine Query-Optimierung
JetEngine ist mächtig, aber schlecht konfigurierte Queries können die Ladezeit verdoppeln. Unsere Empfehlungen:
- Lazy Load für Listings aktivieren, wo möglich.
- Queries auf die wirklich benötigten Felder beschränken (nicht alle Meta-Felder abfragen).
- Object Cache nutzen (Redis oder Memcached), damit wiederholte Queries aus dem Cache kommen.
- Bei großen Datenmengen Pagination statt „alle Ergebnisse laden“ verwenden.
Container statt Section-Layout
Seit Elementor 3.6 gibt es das Flexbox-Container-Layout als Alternative zum alten Section-Column-System. Container erzeugen weniger DOM-Elemente, sind flexibler und rendern schneller.
Wenn Du ein neues Projekt startest, nutze ausschließlich Container. Bei bestehenden Websites lohnt sich die schrittweise Migration, besonders auf den wichtigsten Landing Pages.
Messen und Monitoring: Die richtigen Tools
Core Web Vitals verbessern ohne Messung ist Raten. Diese Tools brauchst Du:
PageSpeed Insights
PageSpeed Insights zeigt Dir Lab-Daten (simulierte Tests) und Field-Daten (echte Nutzerdaten aus dem Chrome UX Report). Achte auf die Field-Daten: Sie zeigen, was Deine echten Besucher erleben.
Chrome UX Report (CrUX)
Der Chrome UX Report sammelt anonymisierte Performance-Daten von echten Chrome-Nutzern. Du kannst die Daten über BigQuery abfragen oder über das CrUX Dashboard visualisieren.
Google Search Console: Core Web Vitals Report
In der Search Console findest Du unter „Nutzerfreundlichkeit“ > „Core Web Vitals“ einen Report, der Dir zeigt, welche URLs Probleme haben. Der Report unterscheidet zwischen Mobile und Desktop und gruppiert URLs nach ähnlichen Mustern.
Lighthouse CI
Für Entwicklerteams, die Core Web Vitals in ihren Deployment-Prozess integrieren wollen, ist Lighthouse CI ideal. Es läuft automatisch bei jedem Deployment und schlägt Alarm, wenn Werte sich verschlechtern.
Web Vitals Chrome Extension
Die Web Vitals Extension zeigt Dir LCP, CLS und INP in Echtzeit während Du eine Seite nutzt. Perfekt für schnelle Checks und Debugging.
Case: LCP von 4,2 auf 1,7 Sekunden
Ein Produktionsunternehmen aus OWL kam mit einer WordPress-Website zu uns, deren PageSpeed-Score bei 28 (Mobile) lag. Der LCP betrug 4,2 Sekunden, der CLS lag bei 0,38 und der INP bei 340ms. Keine einzige Core Web Vital im grünen Bereich.
Was wir gemacht haben:
- Hosting-Wechsel: Von Shared Hosting zu Raidboxes. Allein dadurch sank der TTFB von 1,1 Sekunden auf 180ms.
- Bild-Optimierung: Alle Bilder zu WebP konvertiert, responsive Größen eingerichtet, Hero-Bilder mit
fetchpriority="high"versehen. LCP-Bild von 1,8 MB auf 95 KB reduziert. - Plugin-Audit: Von 34 aktiven Plugins auf 18 reduziert. Drei Plugins, die auf jeder Seite JavaScript luden (Slider, Social Share, Lightbox), durch leichtere Alternativen ersetzt.
- Elementor-Optimierung: Alle Seiten von Section-Layout auf Container migriert. DOM-Größe von 4.200 auf 1.800 Knoten reduziert. Elementor Experiments aktiviert.
- Font-Optimierung: Google Fonts lokal gehostet,
font-display: swapgesetzt, unbenutzte Font-Gewichte entfernt. - Caching und CDN: WP Rocket eingerichtet plus Cloudflare CDN.
Die Ergebnisse nach vier Wochen:
| Metrik | Vorher | Nachher | Zielwert |
|---|---|---|---|
| LCP | 4,2s | 1,7s | < 2,5s |
| CLS | 0,38 | 0,04 | < 0,1 |
| INP | 340ms | 120ms | < 200ms |
| PageSpeed (Mobile) | 28 | 91 | > 90 |
Der Effekt auf die SEO-Performance: Innerhalb von acht Wochen stiegen die Klicks aus der Google-Suche um 23 %, die durchschnittliche Position verbesserte sich um 4,7 Plätze für die wichtigsten Keywords. Die Conversion-Rate (Kontaktanfragen) stieg um 18 %, weil Besucher nicht mehr absprangen, bevor die Seite geladen hatte.
FAQ
Wie wichtig sind Core Web Vitals für SEO?
Core Web Vitals sind ein offizieller Google-Ranking-Faktor. Allerdings ist ihr Gewicht geringer als Faktoren wie Relevanz und Backlinks. Der eigentliche SEO-Effekt ist indirekt: Schnelle Seiten haben niedrigere Absprungraten, längere Verweildauer und höhere Conversion-Rates. All das sendet positive Nutzersignale an Google. Wenn zwei Seiten ähnlich relevant sind, gewinnt die schnellere.
Welches Hosting für WordPress Core Web Vitals?
Managed WordPress Hosting mit Server-Standort in Deutschland ist die beste Basis. Raidboxes, FLAVOR und Cloudways (Vultr Frankfurt) liefern TTFB-Werte unter 200ms. Shared Hosting bei großen Massenhostern reicht für Performance-kritische Websites nicht aus. Der Hosting-Wechsel allein kann den LCP um 0,5 bis 1,5 Sekunden verbessern.
Kann Elementor gute Core Web Vitals erreichen?
Ja, wenn Du es richtig machst. Elementor hat den Ruf, langsam zu sein, aber mit den richtigen Einstellungen (Container-Layout, Experiments, reduzierte Widget-Anzahl) sind PageSpeed-Scores über 90 auf Mobile realistisch. Das zeigt unser Case oben. Entscheidend ist, wie Du Elementor nutzt: wenige Verschachtelungen, optimierte Bilder, keine überflüssigen Animationen auf Mobile.
Performance als Wettbewerbsvorteil nutzen
Core Web Vitals zu verbessern ist eine der wenigen SEO-Maßnahmen, die gleichzeitig Dein Ranking, Deine User Experience und Deine Conversion-Rate verbessern. Die meisten Deiner Wettbewerber haben das noch nicht umgesetzt. Das ist Deine Chance.
Wenn Du nicht sicher bist, wo Deine Website steht: Lass uns gemeinsam einen Performance-Check machen. Wir analysieren Deine Core Web Vitals, identifizieren die größten Hebel und zeigen Dir, was eine Optimierung konkret bringen kann.
Du willst vorher mehr über Webdesign und Entwicklung bei snutig erfahren? Oder Du planst einen Website-Relaunch und willst Performance von Anfang an richtig aufsetzen? Dann schau Dir auch unseren Leitfaden zu den Kosten einer professionellen Website an.
Noch mehr zum Thema Web und SEO findest Du in unseren Artikeln zu Barrierefreiheit nach dem BFSG, den Webdesign-Trends 2026 und unserer SEO- und GEO-Leistungsseite.
