Core Web Vitals: So optimieren Sie Ihre Website-Geschwindigkeit

Die Ladegeschwindigkeit Ihrer Website ist nicht nur ein technisches Detail – sie entscheidet darüber, ob Besucher bleiben oder abspringen, ob Google Sie gut rankt oder in den Suchergebnissen versteckt. Seit 2021 sind die Core Web Vitals ein offizieller Rankingfaktor. Wenn Sie Ihre Website-Performance verbessern wollen, führt kein Weg an diesen drei Metriken vorbei.

In diesem Artikel zeige ich Ihnen, was Core Web Vitals sind, warum sie wichtig sind und wie Sie konkret vorgehen, um Ihre Website schneller zu machen.

Was sind Core Web Vitals?

Core Web Vitals sind drei Kennzahlen, mit denen Google die Nutzererfahrung einer Website misst:

• LCP (Largest Contentful Paint): Wie schnell lädt das größte sichtbare Element?
• FID (First Input Delay): Wie schnell reagiert die Seite auf die erste Nutzer-Interaktion?
• CLS (Cumulative Layout Shift): Wie stabil ist das Layout während des Ladens?

Google verwendet diese Metriken, um zu bewerten, ob eine Website eine gute, mittelmäßige oder schlechte Nutzererfahrung bietet. Die Werte werden direkt aus echten Nutzerdaten (Chrome User Experience Report) gezogen.

Die drei Metriken im Detail

LCP – Largest Contentful Paint

LCP misst, wie lange es dauert, bis das größte sichtbare Element im Viewport vollständig geladen ist. Das kann ein Bild, ein Video oder ein großer Textblock sein.

• ✅ Gut: unter 2,5 Sekunden
• ⚠️ Verbesserungsbedarf: 2,5 bis 4 Sekunden
• ❌ Schlecht: über 4 Sekunden

FID – First Input Delay

FID misst die Zeit zwischen der ersten Nutzer-Interaktion (Klick, Tap, Tastendruck) und dem Moment, in dem der Browser darauf reagiert.

• ✅ Gut: unter 100 Millisekunden
• ⚠️ Verbesserungsbedarf: 100 bis 300 ms
• ❌ Schlecht: über 300 ms

Hinweis: FID wird ab März 2024 durch INP (Interaction to Next Paint) ersetzt, das die gesamte Interaktionslatenz misst, nicht nur die erste.

CLS – Cumulative Layout Shift

CLS misst visuelle Stabilität: Wie sehr verschieben sich Elemente, während die Seite lädt? Kennen Sie das: Sie wollen auf einen Button klicken, plötzlich lädt ein Bild nach und Sie klicken daneben?

• ✅ Gut: unter 0,1
• ⚠️ Verbesserungsbedarf: 0,1 bis 0,25
• ❌ Schlecht: über 0,25

Warum sind Core Web Vitals wichtig?

1. Google-Ranking

Seit dem Page Experience Update 2021 sind Core Web Vitals ein offizieller Rankingfaktor. Websites mit guten Werten haben einen Vorteil gegenüber langsamen Seiten – besonders bei gleichwertigen Inhalten.

2. Nutzererfahrung

53 % der mobilen Nutzer verlassen eine Seite, die länger als 3 Sekunden lädt (Google-Studie). Eine schnelle, stabile Website verbessert die Nutzererfahrung, reduziert Absprungraten und erhöht Conversions.

3. Wettbewerbsvorteil

Viele Unternehmen ignorieren Website-Performance. Wenn Sie Ihre Core Web Vitals optimieren, heben Sie sich ab – technisch und in den Suchergebnissen.

Core Web Vitals messen

Bevor Sie optimieren, müssen Sie den Status Quo kennen. Diese Tools helfen:

Google Search Console

Die Search Console zeigt Core Web Vitals-Daten für Ihre gesamte Website. Gehen Sie zu Erlebnis → Core Web Vitals und sehen Sie, welche URLs problematisch sind.

Vorteil: Echte Nutzerdaten (Field Data) Nachteil: Daten sind verzögert (28-Tage-Durchschnitt)

PageSpeed Insights

PageSpeed Insights kombiniert Field Data (reale Nutzer) mit Lab Data (simulierte Tests). Geben Sie eine URL ein und Sie erhalten:

• Core Web Vitals-Werte
• Konkrete Verbesserungsvorschläge
• Performance-Score (0-100)

Link: https://pagespeed.web.dev/

Lighthouse

Lighthouse ist ein Audit-Tool (integriert in Chrome DevTools). Es testet Performance, Accessibility, SEO und Best Practices.

So geht's:

1. Öffnen Sie Chrome DevTools (F12)
2. Wechseln Sie zum Tab "Lighthouse"
3. Klicken Sie auf "Generate report"

Chrome User Experience Report (CrUX)

CrUX liefert echte Nutzerdaten aus dem Chrome-Browser. Sie können diese Daten in BigQuery abfragen oder über die CrUX API abrufen.

LCP optimieren – So wird Ihre Seite schneller

1. Bilder optimieren

Bilder sind oft das größte Element im Viewport – und die häufigste Ursache für langsamen LCP.

Was tun:

• Komprimieren: Nutzen Sie Tools wie TinyPNG, Squoosh oder ImageOptim
• Moderne Formate: WebP oder AVIF statt JPEG/PNG (50-80% kleiner)
• Lazy Loading: Bilder außerhalb des Viewports erst laden, wenn der Nutzer scrollt
• Responsive Images: Nutzen Sie srcset und sizes, um passende Bildgrößen auszuliefern

Achtung: Das LCP-Bild (Hero-Image) sollte NICHT lazy-geladen werden!

2. Server-Response-Time verbessern (TTFB)

TTFB (Time to First Byte) ist die Zeit, die der Server braucht, um die erste Antwort zu senden.

Was tun:

• CDN nutzen: Content Delivery Network reduziert Latenz
• Caching aktivieren: Browser-Caching und Server-Caching einrichten
• Hosting upgraden: Shared Hosting ist oft langsam – wechseln Sie zu Managed WordPress Hosting (z. B. Kinsta, WP Engine)
• Datenbank optimieren: Alte Revisionen löschen, Datenbank-Queries optimieren

3. Render-Blocking-Ressourcen eliminieren

CSS und JavaScript im <head> blockieren das Rendering.

Was tun:

• CSS minimieren: Entfernen Sie ungenutztes CSS
• Critical CSS inline einbinden: Inline-CSS für Above-the-Fold-Content
• JavaScript defer/async: Nicht-kritisches JavaScript mit defer oder async laden

4. Fonts optimieren

Webfonts können LCP verzögern, weil der Browser auf den Font-Download wartet.

Was tun:

• Font-Display: font-display: swap sorgt dafür, dass Text sofort mit Fallback-Font angezeigt wird
• Fonts hosten: Hosten Sie Google Fonts lokal (DSGVO-konform + schneller)
• Weniger Font-Varianten: Laden Sie nur die Schriftschnitte, die Sie wirklich brauchen

FID/INP verbessern – Interaktivität beschleunigen

1. JavaScript-Execution reduzieren

Lange JavaScript-Aufgaben blockieren den Main Thread und verzögern Interaktionen.

Was tun:

• Code-Splitting: Teilen Sie JavaScript-Bundles auf
• Ungenutzten Code entfernen: Tree-shaking, Dead Code Elimination
• Third-Party-Scripts überprüfen: Google Analytics, Facebook Pixel, Chatbots – alle verzögern Interaktivität

2. Third-Party-Code optimieren

Viele Websites laden 20+ externe Scripts. Jedes davon kostet Performance.

Was tun:

• Lazy-Load für Third-Party-Scripts: Laden Sie Widgets (Chat, Social Media) erst nach User-Interaktion
• Self-Hosting: Hosten Sie Google Analytics lokal (z. B. mit Plausible oder Matomo)
• Scripts priorisieren: Kritische Scripts zuerst, Rest später

3. Polyfills und alte Browser-Unterstützung

Moderne JavaScript-Features brauchen keine Polyfills mehr.

Was tun:

• Module/Nomodule-Pattern: Liefern Sie modernen Code an moderne Browser, Polyfills nur an alte Browser
• Browserslist aktualisieren: Keine Unterstützung für IE11 nötig

CLS vermeiden – Layout-Stabilität sicherstellen

1. Explizite Größenangaben für Bilder und Videos

Wenn Bilder ohne Höhen- und Breitenangabe geladen werden, "springt" das Layout.

Was tun:

• Setzen Sie immer width und height im HTML:

  <img src="bild.jpg" width="800" height="600" alt="Beschreibung">
  

• Nutzen Sie aspect-ratio in CSS für responsive Bilder

2. Fonts mit font-display vorbereiten

Wenn ein Webfont erst spät lädt, springt der Text (FOIT – Flash of Invisible Text oder FOUT – Flash of Unstyled Text).

Was tun:

• font-display: swap oder font-display: optional verwenden
• Fonts preloaden:

  <link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>
  

3. Ads, Embeds und dynamische Inhalte reservieren

Werbebanner, YouTube-Videos und Social-Media-Embeds laden asynchron und verschieben den Content.

Was tun:

• Reservieren Sie Platz mit festen Container-Höhen:

  .ad-container {
    min-height: 250px;
  }
  

• Nutzen Sie aspect-ratio für Videos:

  .video-container {
    aspect-ratio: 16 / 9;
  }
  

4. Keine Content-Injection oberhalb des Viewports

Banner, Cookie-Hinweise und Ankündigungen, die nachträglich eingefügt werden, verschieben den Content nach unten.

Was tun:

• Cookie-Banner sticky am unteren oder oberen Rand
• Ankündigungen statisch im HTML einbinden

Tools und Plugins für WordPress

Wenn Sie WordPress nutzen, gibt es hilfreiche Plugins:

• WP Rocket: Caching, Lazy Loading, CSS/JS-Minimierung
• ShortPixel / Imagify: Automatische Bildkomprimierung
• Autoptimize: CSS/JS-Optimierung
• Perfmatters: Performance-Tweaks ohne Code
• Flying Images / Lazy Load by WP Rocket: Lazy Loading für Bilder

Wichtig: Nicht zu viele Plugins gleichzeitig! Testen Sie Performance nach jeder Installation.

Häufige Fehler bei der Core Web Vitals-Optimierung

❌ LCP-Bild lazy-loaden

Das Hero-Bild sollte sofort laden – nicht mit loading="lazy".

❌ Zu viele Plugins

Jedes Plugin kostet Performance. Deaktivieren Sie ungenutzte Tools.

❌ Nur Lab Data beachten

PageSpeed Insights zeigt Lab Data (simuliert) und Field Data (echte Nutzer). Priorisieren Sie Field Data.

❌ Optimierung nur für Desktop

Über 60 % der Nutzer sind mobil. Testen Sie immer Mobile First.

❌ Caching vergessen

Ohne Caching bringt Optimierung wenig. Aktivieren Sie Browser-Caching, Server-Caching und CDN.

Checkliste: Core Web Vitals optimieren

✅ Bilder komprimieren (WebP/AVIF, max. 100 KB pro Bild)
✅ LCP-Bild sofort laden (kein lazy loading)
✅ CSS/JS minimieren (ungenutzten Code entfernen)
✅ Fonts optimieren (font-display: swap, lokal hosten)
✅ Caching aktivieren (Browser + Server + CDN)
✅ Third-Party-Scripts reduzieren (Chatbots, Analytics lazy-loaden)
✅ Explizite Bildgrößen setzen (width/height im HTML)
✅ Ads/Embeds Platz reservieren (min-height, aspect-ratio)
✅ TTFB unter 600 ms (Server-Response optimieren)
✅ Mobile testen (über 60 % der Nutzer sind mobil)

Fazit

Core Web Vitals sind kein Nice-to-have – sie sind ein Muss für moderne Websites. Eine schnelle, stabile Seite verbessert nicht nur Ihr Google-Ranking, sondern auch die Nutzererfahrung, Conversion-Rate und Kundenzufriedenheit.

Die wichtigsten Takeaways:

• LCP unter 2,5 Sekunden: Bilder optimieren, Server beschleunigen, Render-Blocking vermeiden
• FID/INP unter 100 ms: JavaScript reduzieren, Third-Party-Scripts lazy-loaden
• CLS unter 0,1: Explizite Größenangaben, keine Content-Verschiebungen

Starten Sie mit einer Messung in der Google Search Console oder PageSpeed Insights. Priorisieren Sie die URLs mit den schlechtesten Werten. Optimieren Sie Schritt für Schritt – und testen Sie nach jeder Änderung.

Brauchen Sie Hilfe bei der Optimierung? Bei Alpine Marketing analysieren wir Ihre Website, identifizieren Performance-Probleme und setzen technische SEO-Maßnahmen um – damit Sie schneller ranken und mehr Kunden gewinnen.