Core Web Vitals Monitoring

Überwachen Sie Googles Core Web Vitals, um die Nutzererfahrung und Suchmaschinen-Rankings zu verbessern.

Was sind Core Web Vitals?

Core Web Vitals sind Googles Metriken zur Messung der Nutzererfahrung:

Metrik	Vollständiger Name	Misst	Gut	Verbesserungsbedarf	Schlecht
LCP	Largest Contentful Paint	Ladezeit	≤2,5s	2,5–4s	>4s
INP	Interaction to Next Paint	Interaktivität	≤200ms	200–500ms	>500ms
CLS	Cumulative Layout Shift	Visuelle Stabilität	≤0,1	0,1–0,25	>0,25

Warum sie wichtig sind

• SEO-Auswirkung: Google verwendet CWV als Ranking-Signale
• Nutzererfahrung: Korreliert mit Engagement und Konversion
• Performance-Budget: Setzen Sie messbare Ziele

CWV-Monitoring aktivieren

Die Erfassung der Core Web Vitals ist in jedem Tarif standardmäßig aktiv, einschließlich Free. Solange Ihr Tracking-Skript geladen wird, erfasst der Tracker LCP, CLS, INP, FCP und TTFB aus jeder echten Besucher-Session und sendet beim Verlassen der Seite genau einen Beacon.

Ihr Standard-Script-Tag genügt:

<script
  defer
  data-tracking-code="YOUR_TRACKING_CODE"
  src="https://api.zenovay.com/z.js"
></script>

Keine zusätzlichen Attribute, keine Script-Änderungen. Wenn Sie prüfen möchten, ob der Tracker überhaupt feuert, öffnen Sie den Tab Install Health in den Einstellungen Ihrer Website.

Für eine bestimmte Seite deaktivieren (fortgeschritten)

Wenn Sie die CWV-Erfassung für eine einzelne getrackte Seite deaktivieren möchten, setzen Sie das Feature-Flag enable_core_web_vitals in deren Einstellungen auf false. Es gibt keine In-App-Schaltfläche, da der Standard für alle aktiv ist — kontaktieren Sie den Support unter [email protected], wenn Sie das für eine Ihrer Seiten ändern möchten.

Dashboard-Übersicht

CWV-Zusammenfassung

Öffnen Sie das Dashboard Ihrer Website und wählen Sie den Tab Performance (unter der Gruppe BEHAVIOR in der Seitenleiste):

Core Web Vitals Übersicht

LCP    ████████████████░░░░ 2.1s  ✓ Gut
INP    ██████████████████░░ 156ms ✓ Gut
CLS    ████████████████████ 0.05  ✓ Gut

P75-Werte

Die Symbolleiste ermöglicht es Ihnen, das Perzentil zu wechseln (P75, P90, P95, P99), nach Gerät zu filtern (Alle, Desktop, Mobil) und den Zeitraum zu ändern (24 Stunden, 7 Tage, 30 Tage oder 90 Tage).

Bewertungsverteilung

Jede Metriken-Kachel zeigt, wie sich Ihre Besuche auf die Kategorien „Gut/Verbesserungsbedarf/Schlecht" für das ausgewählte Perzentil verteilen:

Bewertung	LCP	INP	CLS
Gut	65%	72%	85%
Verbesserungsbedarf	25%	20%	10%
Schlecht	10%	8%	5%

Largest Contentful Paint (LCP)

Was es misst

Zeit, bis das größte Inhaltselement sichtbar ist:

• Bilder
• Video-Thumbnails
• Hintergrundbilder
• Textblöcke

LCP im Dashboard

• Trend über die Zeit: LCP beim ausgewählten Perzentil über den gewählten Zeitraum
• Nach Seite: Langsamste Seiten
• Nach Gerät: Desktop vs Mobil
• Nach Geografie: Eine Choroplethenkarte mit LCP nach Land/Region
• Problematische Elemente: Die spezifischen gemessenen LCP-Elemente

Häufige LCP-Probleme

Problem	Auswirkung	Lösung
Langsame Serverantwort	Hoch	TTFB optimieren, CDN verwenden
Render-blockierende Ressourcen	Hoch	Nicht-kritisches CSS/JS verzögern
Große Bilder	Hoch	Optimieren, WebP verwenden, Lazy Loading
Client-seitiges Rendering	Mittel	SSR, Pre-Rendering
Drittanbieter-Skripte	Mittel	Asynchron laden, Unnötiges entfernen

LCP verbessern

Bildoptimierung:

<!-- LCP-Bild vorladen -->
<link rel="preload" as="image" href="hero.webp">

<!-- Responsive Bilder -->
<img
  src="hero.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="100vw"
  loading="eager"
  fetchpriority="high"
/>

Resource Hints:

<!-- Vorabverbindung zu kritischen Ursprüngen -->
<link rel="preconnect" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://api.example.com">

Interaction to Next Paint (INP)

Was es misst

Reaktionsfähigkeit auf Benutzerinteraktionen:

• Klicks
• Taps
• Tastatureingaben

INP misst die Zeit von der Interaktion bis zur nächsten visuellen Aktualisierung.

INP im Dashboard

• INP-Wert: Beim ausgewählten Perzentil (Standard P75)
• Nach Seite: Langsamste Seiten für Interaktivität
• Nach Gerät: Desktop vs Mobil

Häufige INP-Probleme

Problem	Auswirkung	Lösung
Lange JavaScript-Aufgaben	Hoch	Aufgaben aufteilen, Web Workers verwenden
Großes DOM	Mittel	Listen virtualisieren, Struktur vereinfachen
Aufwendige Event-Handler	Hoch	Debounce, Handler optimieren
Layout Thrashing	Mittel	DOM-Lese-/Schreibvorgänge bündeln
Drittanbieter-Skripte	Mittel	Lazy Loading, isolieren

INP verbessern

Lange Aufgaben aufteilen:

// Vorher: Lange synchrone Aufgabe
function processLargeArray(items) {
  items.forEach(item => expensiveOperation(item));
}

// Nachher: Dem Main Thread nachgeben
async function processLargeArray(items) {
  for (const item of items) {
    expensiveOperation(item);
    // Nachgeben, um Rendering zu ermöglichen
    await new Promise(r => setTimeout(r, 0));
  }
}

requestIdleCallback verwenden:

function runWhenIdle(callback) {
  if ('requestIdleCallback' in window) {
    requestIdleCallback(callback, { timeout: 2000 });
  } else {
    setTimeout(callback, 100);
  }
}

Cumulative Layout Shift (CLS)

Was es misst

Visuelle Stabilität – wie stark sich Inhalte unerwartet verschieben:

• Bilder, die ohne Abmessungen laden
• Werbung/Einbettungen, die ihre Größe ändern
• Dynamisches Einfügen von Inhalten
• Laden von Web-Schriftarten

CLS im Dashboard

• CLS-Wert: Beim ausgewählten Perzentil (Standard P75)
• Nach Seite: Seiten mit den meisten Verschiebungen
• Nach Gerät: Desktop vs Mobil

Häufige CLS-Probleme

Problem	Auswirkung	Lösung
Bilder ohne Abmessungen	Hoch	Immer Breite/Höhe angeben
Werbung ohne reservierten Platz	Hoch	Platzhalter-Container verwenden
Dynamische Inhalte über dem Fold	Mittel	Platz reservieren, Transforms verwenden
Laden von Web-Schriftarten	Mittel	font-display: swap verwenden
Spät ladende Einbettungen	Mittel	Platz reservieren, Lazy Loading

CLS verbessern

Platz für Bilder reservieren:

<!-- Immer Abmessungen angeben -->
<img src="photo.jpg" width="800" height="600" alt="Photo">

<!-- Oder Seitenverhältnis verwenden -->
<style>
.image-container {
  aspect-ratio: 16 / 9;
}
</style>

Platz für Werbung reservieren:

.ad-slot {
  min-height: 250px;
  background: #f0f0f0;
}

Schriftarten-Ladestrategie:

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

Seitenebene-Analyse

Aufschlüsselung nach Seite

Auf der Registerkarte „Performance" können Sie eine Aufschlüsselung pro Route sehen, um festzustellen, welche Seiten eine Metrik herunterziehen:

1. Öffnen Sie die Registerkarte Performance
2. Scrollen Sie zur Aufschlüsselung nach Seite
3. Sortieren Sie nach den schlechtesten Ergebnissen
4. Verwenden Sie das Panel „Problematische Elemente" um zu sehen, was als LCP gemessen wird

Seiten-Performance-Karte

/products/widget

LCP:  2.8s   ⚠ Verbesserungsbedarf
INP:  145ms  ✓ Gut
CLS:  0.18   ⚠ Verbesserungsbedarf

Problematische Elemente:
• LCP-Element:   img.hero-banner
• CLS-Quelle:    .reviews-widget
• INP-Ziel:      button.add-to-cart

Stichproben: 12.450

Das Panel „Problematische Elemente" zeigt das spezifische Seiten-Element an, das als LCP gemessen wird, die größte Quelle von Layout-Verschiebungen und das Element, mit dem ein Benutzer bei der langsamsten INP interagiert hat. Diese CSS-Selektoren zeigen direkt, was zu beheben ist.

Segmentierung

Nach Gerätetyp

Filtern Sie die gesamte Registerkarte „Performance" nach Gerät (Alle, Desktop oder Mobil):

Gerät       LCP      INP     CLS
Desktop     2.0s     120ms   0.05
Mobil       3.2s     210ms   0.12

Nach Geografie

Die Choroplethenkarte zeigt CWV-Werte nach Land/Region, um CDN- oder Server-Standort-Probleme zu identifizieren:

Region             LCP      INP     CLS
Nordamerika        2.1s     140ms   0.05
Europa             2.4s     150ms   0.06
Asien              3.6s     180ms   0.08

Benachrichtigungen und Berichte

Zenovays automatisierte Benachrichtigungen decken Anomalieerkennung und Traffic-Spitzen ab, anstatt pro-Metrik Web-Vital-Schwellenwerte. Um eine Benachrichtigung zu erhalten, wenn sich die Gesamtperformance ändert, und um wiederkehrende Zusammenfassungen zu planen, lesen Sie den dedizierten Leitfaden Performance-Benachrichtigungen.

Integration mit anderen Tools

Google Search Console

Vergleichen Sie Zenovay-Daten mit GSC:

• Zenovay: Echte Nutzerdaten (RUM)
• GSC: Labordaten + Felddaten

Lighthouse

Korrelieren Sie Lighthouse-Audits mit realen Daten.

PageSpeed Insights

Verwenden Sie Zenovay für die Überwachung und PageSpeed für Empfehlungen.

Historischer Vergleich

Trendanalyse

• Vergleichen Sie die Zeiträume 24h, 7d, 30d und 90d
• Sehen Sie Verbesserungen über die Zeit
• Korrelieren Sie Trends mit Ihren Deployment-Daten
• Verfolgen Sie den Fortschritt zu Ihren Zielen

Best Practices

Monitoring-Strategie

1. Basiswerte festlegen: Kennen Sie die aktuelle Performance
2. Ziele definieren: Basierend auf Branche/Wettbewerbern
3. Kontinuierlich überwachen: Nicht nur einmalige Audits
4. Segmentierte Analyse: Mobil ist oft schlechter
5. Fixes priorisieren: Auswirkung vs. Aufwand

Performance-Budget

Metrik     Aktuell   Ziel     Budget
LCP        2.8s      2.0s     ✗ Überschritten
INP        150ms     150ms    ✓ Im Ziel
CLS        0.08      0.1      ✓ Unter Ziel

Regelmäßige Überprüfungen

• Wöchentlich: Auf Regressionen prüfen
• Monatlich: Tiefgehende Analyse
• Vierteljährlich: Strategische Planung

Fehlerbehebung

Daten erscheinen nicht

Prüfen Sie:

• Script korrekt installiert (verwenden Sie die Registerkarte Install Health in den Einstellungen Ihrer Website, um zu bestätigen, dass der Tracker feuert)
• Core Web Vitals-Erfassung wurde für die Seite nicht deaktiviert (sie ist standardmäßig an — siehe „Für eine bestimmte Seite deaktivieren" oben)
• Ausreichend Traffic (echte Nutzer erforderlich)

Unerwartete Werte

Bedenken Sie:

• Bot-Traffic verfälscht Daten
• Entwicklungs-/Staging-Traffic
• Unterschiede in der Browser-Unterstützung

Abweichung von Labordaten

Normal – RUM erfasst:

• Reale Netzwerkbedingungen
• Tatsächliche Geräteleistung
• Echtes Nutzerverhalten
• Geografische Verteilung

Nächste Schritte

• Seitenladegeschwindigkeit
• Performance nach Gerät
• Performance-Benachrichtigungen