Core Web Vitals optimieren

Core Web Vitals sind seit 2021 ein offizieller Google-Ranking-Faktor. In diesem Leitfaden zeige ich Ihnen, wie Sie die drei Kernmetriken systematisch optimieren – mit konkreten Maßnahmen und Code-Beispielen.

Was sind Core Web Vitals?

Google misst mit den Core Web Vitals die Nutzererfahrung anhand von drei Metriken:

Metrik	Beschreibung	Gut	Verbesserungswürdig	Schlecht
LCP	Largest Contentful Paint	≤ 2,5s	≤ 4,0s	> 4,0s
FID/INP	First Input Delay / Interaction to Next Paint	≤ 100ms	≤ 300ms	> 300ms
CLS	Cumulative Layout Shift	≤ 0,1	≤ 0,25	> 0,25

1. LCP optimieren (Largest Contentful Paint)

LCP misst, wie lange es dauert, bis das größte sichtbare Element geladen ist.

Häufige LCP-Probleme

Langsame Server-Response
Render-blockierende Ressourcen
Nicht optimierte Bilder
Client-Side Rendering

Lösung: Server-Response optimieren

TTFB (Time to First Byte) verbessern:

# Nginx Konfiguration
gzip on;
gzip_types text/plain text/css application/json application/javascript;

# Browser-Caching
location ~* \.(jpg|jpeg|png|gif|ico|css|js|webp)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

PHP-Optimierungen:

OPcache aktivieren
Datenbankabfragen optimieren
Caching-Layer (Redis, Memcached) einsetzen

Lösung: Bilder optimieren

Moderne Bildformate verwenden:

<picture>
  <source srcset="/bild.avif" type="image/avif">
  <source srcset="/bild.webp" type="image/webp">
  <img src="/bild.jpg" alt="Beschreibung" width="800" height="600">
</picture>

LCP-Bild priorisieren:

<!-- Hero-Bild mit hoher Priorität laden -->
<link rel="preload" as="image" href="/hero.webp" type="image/webp">

<img
  src="/hero.webp"
  alt="Hero"
  fetchpriority="high"
  loading="eager"
>

Lösung: Critical CSS inlinen

<head>
  <style>
    /* Critical CSS für Above-the-Fold */
    body { margin: 0; font-family: sans-serif; }
    .hero { height: 100vh; display: flex; align-items: center; }
    .hero h1 { font-size: 3rem; }
  </style>

  <!-- Rest-CSS asynchron laden -->
  <link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>

2. FID/INP optimieren (Interaktivität)

FID misst die Zeit von der ersten Nutzerinteraktion bis zur Browserreaktion. INP (Interaction to Next Paint) wird FID als neue Metrik ablösen und misst alle Interaktionen.

Häufige Interaktivitätsprobleme

Lange JavaScript-Ausführung
Blockierende Third-Party-Scripts
Unnötige JavaScript-Bundles
Hydration bei SSR-Frameworks

Lösung: JavaScript aufteilen

Code-Splitting mit dynamischen Imports:

// Statt alles sofort zu laden
import { heavyFunction } from './heavy-module.js';

// Nur bei Bedarf laden
const button = document.querySelector('#action-button');
button.addEventListener('click', async () => {
  const { heavyFunction } = await import('./heavy-module.js');
  heavyFunction();
});

Lösung: Long Tasks vermeiden

Tasks in kleinere Einheiten aufteilen:

// Schlecht: Eine lange Task
function processItems(items) {
  items.forEach(item => processItem(item)); // Blockiert den Main Thread
}

// Besser: Mit Yielding
async function processItemsWithYielding(items) {
  for (const item of items) {
    processItem(item);

    // Gibt dem Browser Zeit für andere Aufgaben
    if (shouldYield()) {
      await scheduler.yield();
    }
  }
}

function shouldYield() {
  return performance.now() - taskStartTime > 50; // 50ms Chunks
}

Lösung: Third-Party-Scripts optimieren

<!-- Defer für nicht-kritische Scripts -->
<script defer src="https://analytics.example.com/script.js"></script>

<!-- Oder dynamisches Laden nach Nutzerinteraktion -->
<script>
  let analyticsLoaded = false;

  function loadAnalytics() {
    if (analyticsLoaded) return;
    analyticsLoaded = true;

    const script = document.createElement('script');
    script.src = 'https://analytics.example.com/script.js';
    document.body.appendChild(script);
  }

  // Nach erster Interaktion oder nach 5 Sekunden laden
  ['scroll', 'click', 'touchstart'].forEach(event => {
    window.addEventListener(event, loadAnalytics, { once: true });
  });
  setTimeout(loadAnalytics, 5000);
</script>

3. CLS optimieren (Layout-Stabilität)

CLS misst, wie stark sich Elemente während des Ladens verschieben.

Häufige CLS-Probleme

Bilder ohne Dimensionen
Dynamisch eingefügte Inhalte
Web Fonts (FOIT/FOUT)
Werbung und Embeds

Lösung: Dimensionen für Medien angeben

<!-- Immer width und height angeben -->
<img
  src="/bild.jpg"
  alt="Beschreibung"
  width="800"
  height="600"
>

<!-- Oder mit aspect-ratio in CSS -->
<style>
  .responsive-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
</style>

Lösung: Platzhalter für dynamische Inhalte

/* Feste Höhe für Werbebanner */
.ad-container {
  min-height: 250px;
  background: #f0f0f0;
}

/* Skeleton-Screens für Ladezeiten */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

Lösung: Web Fonts optimieren

/* font-display: swap verhindert FOIT */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
}

/* Optional: Fallback mit ähnlichen Metriken */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap;
  size-adjust: 105%; /* Anpassung an System-Font */
}

Font-Preloading:

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

Messung und Monitoring

Tools für Core Web Vitals

PageSpeed Insights – Schnelltest mit Empfehlungen
Google Search Console – Reale Nutzerdaten (CrUX)
Chrome DevTools – Performance-Tab, Lighthouse
Web Vitals Extension – Echtzeit-Messung beim Browsen

Real User Monitoring (RUM)

// Web Vitals Bibliothek einbinden
import { onCLS, onFID, onLCP, onINP } from 'web-vitals';

function sendToAnalytics({ name, value, rating }) {
  // An Ihr Analytics-System senden
  gtag('event', name, {
    value: Math.round(name === 'CLS' ? value * 1000 : value),
    event_category: 'Web Vitals',
    event_label: rating,
    non_interaction: true,
  });
}

onCLS(sendToAnalytics);
onFID(sendToAnalytics);
onLCP(sendToAnalytics);
onINP(sendToAnalytics);

Priorisierung: Was zuerst optimieren?

Reihenfolge nach Impact:

LCP – Größter Einfluss auf wahrgenommene Geschwindigkeit
CLS – Frustriert Nutzer am meisten
FID/INP – Wichtig für interaktive Seiten

Quick Wins identifizieren:

Problem	Aufwand	Impact
Bilder optimieren	Niedrig	Hoch
Lazy Loading	Niedrig	Mittel
Font-Optimierung	Niedrig	Mittel
Code-Splitting	Mittel	Hoch
Serverside Rendering	Hoch	Sehr hoch

Fazit

Core Web Vitals zu optimieren ist kein einmaliges Projekt, sondern ein kontinuierlicher Prozess. Beginnen Sie mit den Quick Wins und arbeiten Sie sich zu den komplexeren Optimierungen vor.

Die wichtigsten Takeaways:

Messen Sie regelmäßig – sowohl Lab- als auch Field-Daten
Priorisieren Sie nach Impact und Aufwand
Testen Sie Änderungen auf Staging-Umgebungen
Monitoren Sie die Auswirkungen nach dem Deployment

Benötigen Sie Unterstützung bei der Performance-Optimierung? Ich analysiere Ihre Website und entwickle einen maßgeschneiderten Optimierungsplan.