Core Web Vitals: Konkrete Praxis-Fixes

Warum CWV nicht nur Ranking-Signal sind

Core Web Vitals sind Laufschrift-Updates in der Branche. Aber es geht nicht nur um Rankings – es geht um User Experience.

Schnelle Seiten konvertieren besser. Das ist das eigentliche Ziel.

LCP (Largest Contentful Paint)

Ziel: < 2.5 Sekunden

Häufige Ursachen

1. Render-blocking Resources

   • Externe CSS-Dateien
   • Synchrones JavaScript
   • Web Fonts

2. Nicht optimierte Bilder

   • Zu grosse Dateien
   • Falsches Format
   • Kein Lazy Loading

3. Server-Response-Time

   • Langsame Backend
   • Kein Caching
   • Weite Server-Distanz

Schnelle Fixes

<!-- Hero-Bild priorisieren -->
<img src="hero.jpg" fetchpriority="high" decoding="async" />

<!-- Preload kritischer Assets -->
<link rel="preload" href="critical.css" as="style" />
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

Server-seitig

• CDN nutzen (Cloudflare, Fastly)
• Edge-Caching aktivieren
• Database-Queries optimieren
• PHP/Node Response Time < 200ms

INP (Interaction to Next Paint)

Ziel: < 200ms

Was INP misst

Die Zeit von der Interaktion (Klick, Tap) bis zur nächsten visuellen Änderung.

Häufige Böckel

• Event Handler mit schwerer Arbeit
• Lange JavaScript-Tasks (>50ms)
• Unnötige Re-Renders

Optimierungen

// Langlaufende Tasks aufteilen
function processLargeArray(items) {
  const chunk = items.splice(0, 100);
  processChunk(chunk);
  if (items.length > 0) {
    requestAnimationFrame(() => processLargeArray(items));
  }
}

// Passive Event Listener
document.addEventListener('touchstart', handler, { passive: true });

Framework-spezifisch

• React: useMemo, useCallback, React.memo
• Vue: Computed Properties, v-once
• Vanilla: Debounce, Throttle

CLS (Cumulative Layout Shift)

Ziel: < 0.1

Häufige Ursachen

1. Bilder ohne Dimensionen
2. Dynamisch nachgeladene Inhalte
3. Web Fonts, die Layouts verschieben
4. Animationen mit Layout-Shift

Fixes

<!-- Immer Dimensionen angeben -->
<img src="image.jpg" width="800" height="450" alt="..." />

<!-- Aspect Ratio Container -->
<div style="aspect-ratio: 16/9;">
  <img src="image.jpg" alt="..." />
</div>

<!-- Platzhalter für dynamische Inhalte -->
<div style="min-height: 300px;">
  <!-- Content lädt hier -->
</div>

Font-Loading

/* Font-Display swap */
@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

/* Oder: Preload + optional */
<link rel="preload" href="font.woff2" as="font" crossorigin />

Messung

PageSpeed Insights

• Lab-Daten (Lighthouse)
• Field-Daten (CrUX)
• Konkrete Vorschläge

Chrome DevTools

• Performance Tab
• Web Vitals Extension
• Lighthouse lokal

Search Console

• Core Web Vitals Report
• URLs mit Problemen
• Mobile vs Desktop

Priorisierung

1. LCP zuerst: Meist größter Impact
2. CLS: Oft am einfachsten zu fixen
3. INP: Komplexer, aber wichtig für interaktive Seiten

Intern weiterlernen

• → Technical SEO 2026: Der komplette Überblick
• → Tracking und Analytics: GSC und GA4 meistern