Core Web Vitals meistern – Der ultimative Leitfaden

Was sind Core Web Vitals?

Core Web Vitals sind Googles wichtigste Metriken für die Nutzererfahrung einer Website. Sie messen, wie schnell eine Seite lädt, wie schnell sie auf Interaktionen reagiert und wie visuell stabil sie ist.

Seit 2024 sind sie ein offizielles Ranking-Signal. Websites mit guten Werten haben einen messbaren Vorteil in den Suchergebnissen.

Die drei Metriken im Detail

Largest Contentful Paint (LCP)

Was es misst: Wie lange es dauert, bis das größte sichtbare Element im Viewport vollständig gerendert ist.

Zielwert: Unter 2,5 Sekunden

Typische Ursachen für schlechte Werte:

• Nicht optimierte Bilder (falsche Formate, fehlende Größenangaben)
• Langsame Serverantwortzeiten (TTFB > 800ms)
• Render-blockierendes CSS und JavaScript
• Fehlende Priorisierung von Above-the-fold-Inhalten

Optimierungsstrategien:

1. Bilder optimieren – AVIF/WebP statt PNG/JPEG, responsive srcset mit korrekten sizes
2. Kritisches CSS inlinen – Das CSS für den sichtbaren Bereich direkt im HTML
3. Preload für LCP-Elemente – <link rel="preload"> für Hero-Bilder und Fonts
4. Server-Antwortzeit reduzieren – CDN, Edge-Caching, statische Generierung

<!-- Hero-Bild priorisieren -->
<img
  src="hero.avif"
  fetchpriority="high"
  loading="eager"
  width="1200"
  height="600"
  alt="Hero Image"
/>

Interaction to Next Paint (INP)

Was es misst: Die Reaktionszeit der Seite auf Nutzerinteraktionen (Klicks, Taps, Tastatureingaben).

Zielwert: Unter 200 Millisekunden

Typische Ursachen für schlechte Werte:

• Schwere JavaScript-Bundles, die den Main Thread blockieren
• Event-Handler mit aufwändiger Logik
• Synchrone DOM-Manipulationen in großem Umfang
• Third-Party-Scripts ohne async/defer

Optimierungsstrategien:

1. JavaScript aufteilen – Code-Splitting und dynamische Imports
2. Long Tasks vermeiden – Aufgaben über 50ms aufbrechen
3. requestAnimationFrame nutzen – Für visuelle Updates
4. Web Worker verwenden – Rechenintensive Aufgaben auslagern

Astro hat hier einen strukturellen Vorteil: Durch die Zero-JS-Architektur wird standardmäßig kein JavaScript an den Browser gesendet. Nur explizit interaktive Komponenten liefern JS aus.

Cumulative Layout Shift (CLS)

Was es misst: Wie stark sich Elemente auf der Seite nach dem initialen Laden verschieben.

Zielwert: Unter 0,1

Typische Ursachen für schlechte Werte:

• Bilder und Videos ohne feste Dimensionen
• Nachladen von Web Fonts (FOUT/FOIT)
• Dynamisch eingefügte Inhalte (Werbebanner, Cookie-Hinweise)
• Late-loading Embeds ohne Platzhalter

Optimierungsstrategien:

1. Immer width und height angeben – Auf allen Bildern und Videos
2. aspect-ratio in CSS nutzen – Container vorab dimensionieren
3. Font-Display-Strategie – font-display: swap oder optional
4. Platzhalter für dynamische Inhalte – Skeleton-Screens verwenden

Astro als Performance-Framework

Astro ist von Grund auf für maximale Performance gebaut. Hier die wichtigsten Vorteile:

Feature	Performance-Impact
Static Site Generation	Minimalste TTFB durch Pre-Rendering
Zero JS by Default	Kein JavaScript-Overhead
Component Islands	JS nur wo nötig
Automatische Bildoptimierung	AVIF/WebP mit responsiven Varianten
CSS Scoping	Kein ungenutztes CSS
Prefetching	Sofortige Navigation

Bildoptimierung mit Astro

Astro optimiert Bilder automatisch beim Build:

• Konvertierung in moderne Formate (AVIF, WebP)
• Generierung mehrerer Größenvarianten
• Automatische width/height-Attribute
• Lazy Loading als Standard

Messung und Monitoring

Nutze diese Tools zur kontinuierlichen Überwachung:

• Google Search Console – Core Web Vitals Report für echte Nutzerdaten
• PageSpeed Insights – Einzelseiten-Analyse mit Optimierungsvorschlägen
• Chrome DevTools (Lighthouse) – Lokale Messung während der Entwicklung
• web-vitals Library – Real User Monitoring (RUM) im eigenen Code

Praxis-Checkliste

• Alle Bilder mit width, height und loading="lazy" versehen
• LCP-Element mit fetchpriority="high" priorisieren
• JavaScript-Bundle unter 100 KB (gzipped) halten
• Keine Layout-Verschiebungen nach Initial Load
• TTFB unter 800ms (idealerweise unter 200ms bei CDN)
• Keine render-blockierenden Ressourcen
• Font-Loading-Strategie implementieren

Fazit

Core Web Vitals sind keine abstrakte Metrik – sie messen die reale Nutzererfahrung. Websites, die hier gut abschneiden, belohnt Google mit besseren Rankings. Mit Astro als Framework und den richtigen Optimierungsstrategien erreichst du konstant grüne Werte in allen drei Metriken.