Skip to main content
Web-Entwicklung

Core Web Vitals optimieren: Technischer Leitfaden

Roger M.12. März 20265 Min. Lesezeit

Core Web Vitals sind Google-Ranking-Faktoren. Schlechte Werte bedeuten schlechtere Rankings. Dieser Leitfaden zeigt, wie Sie LCP, INP und CLS systematisch verbessern.

Die drei Core Web Vitals

LCP (Largest Contentful Paint)

Was es misst: Wie schnell das grösste sichtbare Element lädt.

Zielwert: unter 2.5 Sekunden

Häufigste Probleme und Lösungen:

  • Grosse Bilder: Verwenden Sie loading="lazy" und moderne Formate (WebP, AVIF)
  • Render-blockierende Ressourcen: CSS und JS asynchron laden
  • Langsamer Server: CDN einsetzen, Server-Response-Zeit optimieren
  • Client-Side Rendering: Prerendering für statische Inhalte nutzen

INP (Interaction to Next Paint)

Was es misst: Wie schnell die Seite auf Nutzerinteraktionen reagiert.

Zielwert: unter 200 Millisekunden

Häufigste Probleme und Lösungen:

  • Lange JavaScript-Tasks: Code-Splitting mit React.lazy() und Suspense
  • Schwere Event-Handler: requestAnimationFrame oder requestIdleCallback nutzen
  • Übermässige Re-Renders: React.memo(), useMemo(), useCallback() einsetzen

CLS (Cumulative Layout Shift)

Was es misst: Wie stabil das Layout während des Ladens bleibt.

Zielwert: unter 0.1

Häufigste Probleme und Lösungen:

  • Bilder ohne Dimensionen: Immer width und height angeben
  • Web Fonts: font-display: swap und Font-Preloading
  • Dynamische Inhalte: Platzhalter mit festen Dimensionen verwenden
  • Ads und Embeds: Reservierten Platz definieren

Messen und Monitoring

web-vitals Library

Die einfachste Methode zur Messung:

import { onCLS, onINP, onLCP } from 'web-vitals'

function sendToAnalytics(metric) {
  gtag('event', metric.name, {
    value: Math.round(metric.value),
    event_category: 'Web Vitals',
    event_label: metric.id,
  })
}

onCLS(sendToAnalytics)
onINP(sendToAnalytics)
onLCP(sendToAnalytics)

Google Search Console

Der Core Web Vitals Report in der Search Console zeigt aggregierte Daten Ihrer Live-Nutzer. Prüfen Sie diesen regelmässig.

Chrome DevTools

Im Performance Tab können Sie einzelne Metriken im Detail analysieren. Besonders nützlich für die Diagnose von INP-Problemen.

React-spezifische Optimierungen

Lazy Loading mit Code-Splitting

const HeavyComponent = lazy(() => import('./HeavyComponent'))

function App() {
  return (
    <Suspense fallback={<Skeleton />}>
      <HeavyComponent />
    </Suspense>
  )
}

Prerendering für SEO

Single-Page-Apps haben von Natur aus schlechte LCP-Werte, da der Browser erst JavaScript laden und ausführen muss. Build-time Prerendering löst dieses Problem:

  1. Vite baut die App
  2. Playwright besucht jede Route
  3. Der gerenderte HTML wird als statische Datei gespeichert
  4. Suchmaschinen erhalten sofort den fertigen Content

Image Optimization

<img
  src="/hero.webp"
  alt="Hero image"
  width={1200}
  height={630}
  loading="lazy"
  decoding="async"
/>

Für Above-the-fold Bilder: loading="eager" und fetchPriority="high".

Checkliste

  • [ ] LCP unter 2.5s für alle wichtigen Seiten
  • [ ] INP unter 200ms (testen mit echten Interaktionen)
  • [ ] CLS unter 0.1 (besonders auf Mobile prüfen)
  • [ ] Bilder in WebP/AVIF mit expliziten Dimensionen
  • [ ] Fonts preloaded mit font-display: swap
  • [ ] JavaScript-Bundle unter 200 KB (gzipped)
  • [ ] web-vitals Library installiert und an Analytics angebunden
  • [ ] Regelmässige Überprüfung in Search Console

Fazit

Core Web Vitals sind kein einmaliges Projekt, sondern ein laufender Prozess. Messen Sie regelmässig, setzen Sie Prioritäten basierend auf den Daten, und optimieren Sie schrittweise. Die grössten Gewinne erzielen Sie fast immer bei Bildern und JavaScript-Bundle-Grösse.

Zurück zum Blog