SEO, Shopify

Core Web Vitals 2025: INP, LCP & CLS verbessern – 7 Schritte für WordPress & Shopify

0 Comments

Inhalt

Core Web Vitals 2025: INP, LCP, CLS im Blick.

Kurzfassung & Zielwerte

INP (Interaction to Next Paint): ≤ 200 ms ist gut, 200–500 ms verbesserungswürdig, > 500 ms schlecht.
LCP (Largest Contentful Paint): ≤ 2,5 s gut; 2,5–4,0 s verbesserungswürdig; > 4,0 s schlecht.
CLS (Cumulative Layout Shift): ≤ 0,1 gut; 0,1–0,25 verbesserungswürdig; > 0,25 schlecht.

Was sind die Core Web Vitals 2025?

Die Core Web Vitals messen echte Nutzererfahrung (Feld-Daten) und sind ein wichtiger Ranking-Faktor. Seit 2024 ersetzt INP die alte Metrik FID. Ergänzend sind TTFB und Bytes/Requests hilfreiche Diagnosewerte, zählen jedoch nicht direkt als CWV.

Die 7 Schritte zur Verbesserung

1) Diagnostik: Feld- vs. Labordaten

  • Search Console → Core Web Vitals: Feld-Daten (CrUX), priorisiere Templates/Seiten mit schlechtem Status.
  • PageSpeed Insights / Lighthouse: Labordaten je URL, identifiziere LCP-Element, Script-Kosten, Layout-Shifts.
  • WebPageTest / Web Vitals Extension: Tiefergehende Waterfalls, CPU-Time, Third-Party-Einflüsse.

2) Bilder & Medien (LCP/CLS)

  • Hero/LCP-Bild priorisieren: HTML-Attribut fetchpriority="high" und rel="preload" für die richtige Quelle.
  • WebP/AVIF nutzen, responsive srcset, unnötig große Dimensionen vermeiden.
  • Lazy-Loading: loading="lazy" für Non-Critical-Images; nicht für LCP.
  • CLS verhindern: Immer width/height oder aspect-ratio setzen (auch bei Ads/Embeds).
<link rel="preload" as="image" href="/media/hero.webp" imagesrcset="/media/hero-1200.webp 1200w, /media/hero-2400.webp 2400w" imagesizes="100vw">
<img src="/media/hero-1200.webp" srcset="/media/hero-1200.webp 1200w, /media/hero-2400.webp 2400w"
     sizes="100vw" width="2400" height="1350" fetchpriority="high" alt="Hero">

3) Fonts & Schriftladeverhalten (INP/CLS)

  • Self-Hosting & Preload der kritischen Schnitte (WOFF2), font-display:swap.
  • Preconnect zu Font-CDNs (falls extern unvermeidbar).
  • CLS vermeiden: Fallback-Fonts mit ähnlicher Metrik wählen oder size-adjust in CSS nutzen.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="font" href="/fonts/Inter-Variable.woff2" type="font/woff2" crossorigin>
/* CSS */
@font-face{font-family:Inter;src:url(/fonts/Inter-Variable.woff2) format("woff2");font-display:swap;}
html{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}

4) CSS & JavaScript verschlanken (INP/LCP)

  • Critical CSS inline, restliches CSS defer/asynchron laden.
  • JS reduzieren: Unnötige Bibliotheken/Tracker entfernen, Code-Splitting, Inline-Events vermeiden.
  • Defer/Module: Render-Blocker beseitigen, nur notwendige Skripte früh laden.
<link rel="preload" href="/css/critical.css" as="style">
<link rel="stylesheet" href="/css/critical.css">
<script type="module" src="/js/app.js" defer></script>

5) Server, Caching & Netzwerk (TTFB/LCP)

  • HTTP/2/3, TLS 1.3, Gzip/Brotli aktivieren.
  • CDN für statische Assets/Images; Geolocation-Caching für internationale Zugriffe.
  • Object Cache (z. B. Redis) + aktuelle Laufzeit (PHP 8.3) + OPcache.
  • TTFB < 0,8 s anstreben (Datenbank/Cache/Template-Logik optimieren).

6) WordPress & Shopify: Systemspezifische Hinweise

  • WordPress: Leichtes Theme, wenige Plugins, Bild-CDN, Server-Caching, sauberer Editor-Output, keine aufgeblähten Page-Builder für Simple-Pages.
  • Shopify: LCP-Bild in der ersten Section platzieren, Apps kritisch prüfen (nur die, die wirklich JS einbringen müssen), Skripte defer, unnötige 3rd-Party-Snippets entfernen.

7) Monitoring & Regression-Schutz

  • Search Console monatlich prüfen (URLs/Template-Cluster).
  • Lighthouse CI in Build-Prozess integrieren; Grenzwerte für LCP/INP/CLS definieren.
  • WebPageTest nach großen Änderungen (Theme/App/Plugin-Updates).

Troubleshooting: Symptome → Ursachen → Fix

SymptomWahrscheinliche UrsacheKonkreter Fix
LCP > 4sHero-Bild zu groß, keine Priorisierung, langsamer ServerWebP/AVIF + fetchpriority="high", Preload Quelle, CDN & Caching aktivieren
CLS > 0,25Keine fixe Größe bei Bildern/Embeds/Ads, dynamische UI-Elementewidth/height bzw. aspect-ratio setzen, Platzhalter reservieren
INP > 500msSchweres JS, Hauptthread blockiert, lange Event-HandlerJS reduzieren, Handlers splitten/defer, Idle-Callbacks nutzen, 3rd-Party prüfen
Gute Lab-, schlechte FelddatenMobilnetz, echte Nutzerpfade, App-Skripte nur in ProdCrUX/SC-Reports priorisieren, kritische Seiten aus realen Sessions analysieren
Typische Performance-Muster & Maßnahmen

FAQ

Wie finde ich das LCP-Element?
PageSpeed Insights zeigt das LCP-Element an. Prüfe dort Quelle/Größe/Priorisierung und optimiere genau dieses Asset.

Kann ich „lazy“ für das Hero-Bild nutzen?
Nein, das LCP-Bild sollte nicht lazy sein. Nutze fetchpriority="high" und ggf. preload.

Warum ist INP hoch, obwohl LCP okay ist?
INP misst Interaktionslatenzen. Häufige Gründe sind schweres JavaScript, blockierende Event-Handler oder teure Reflows nach Klicks/Eingaben.

Wie schnell sehe ich Effekte in der Search Console?
Feld-Daten brauchen oft 28 Tage bis zur Aktualisierung. Lab-Verbesserungen sind sofort in Lighthouse sichtbar.

Interne Links & nächste Schritte

Kostenfreie Website-Checks