Core Web Vitals in React-Apps messen
Verwenden Sie Lighthouse, WebPageTest und die web-vitals-Bibliothek, um LCP-, INP- und CLS-Werte zu erfassen.
Core Web Vitals in React-Apps messen ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was sind Core Web Vitals?
Core Web Vitals sind Messwerte von Google zur Nutzererfahrung, die das SEO-Ranking beeinflussen: LCP (Largest Contentful Paint – Ladegeschwindigkeit), INP (Interaction to Next Paint – Reaktionsfähigkeit) und CLS (Cumulative Layout Shift – visuelle Stabilität).
Gute Schwellenwerte
Zielwerte: LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1. Werte über dem Schwellenwert für „schlecht“ (LCP > 4s, INP > 500ms, CLS > 0.25) beeinträchtigen die Nutzererfahrung und das SEO-Ranking deutlich.
web-vitals-Bibliothek
Das npm-Package web-vitals misst CWV in echten Browsern über eine einfache API.
npm install web-vitals
import { onCLS, onINP, onLCP } from 'web-vitals';
onCLS(metric => console.log('CLS:', metric.value));
onINP(metric => console.log('INP:', metric.value));
onLCP(metric => console.log('LCP:', metric.value));Vitals an Analytics senden
Senden Sie die Vitals an Ihren Analytics-Endpunkt, um Real User Monitoring (RUM) zu ermöglichen – Lighthouse misst die Performance unter Laborbedingungen, während RUM zeigt, was echte Nutzer erleben.
function sendToAnalytics(metric) {
fetch('/api/vitals', {
method: 'POST',
body: JSON.stringify(metric),
headers: { 'Content-Type': 'application/json' },
});
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);Integrierte Vitals in Next.js
Next.js erfasst Core Web Vitals automatisch. Exportieren Sie in _app.js (Pages) eine Funktion reportWebVitals oder verwenden Sie die integrierte Unterstützung des App Routers.
// pages/_app.js (Pages Router)
export function reportWebVitals(metric) {
if (metric.label === 'web-vital') {
console.log(metric.name, metric.value);
}
}Lighthouse in den Chrome DevTools
Führen Sie in den Chrome DevTools (Tab „Lighthouse“) ein Lighthouse-Audit für CWV-Messungen unter Laborbedingungen aus. Verwenden Sie den Inkognito-Modus, um Beeinträchtigungen durch Erweiterungen zu vermeiden, und drosseln Sie die Verbindung, um ein Mobilgerät zu simulieren.
WebPageTest
WebPageTest.org bietet detaillierte Wasserfalldiagramme, Videoaufzeichnungen und CWV-Messungen von echten Geräten an verschiedenen geografischen Standorten – realistischer als ein lokales Lighthouse-Audit.
Chrome User Experience Report (CrUX)
Der CrUX-Datensatz von Google aggregiert CWV-Daten echter Nutzer für Millionen von Websites. Sie können über die Google Search Console, PageSpeed Insights oder die CrUX API darauf zugreifen.
PerformanceObserver für LCP
Verwenden Sie die native PerformanceObserver-API, um LCP-Einträge zu beobachten und zu ermitteln, welches Element den Largest Contentful Paint darstellt.
const po = new PerformanceObserver(entries => {
for (const entry of entries.getEntries()) {
console.log('LCP element:', entry.element, 'time:', entry.startTime);
}
});
po.observe({ type: 'largest-contentful-paint', buffered: true });CLS-Fehlerbehebung
Verwenden Sie in den Chrome DevTools die Layout Shift Regions (im Rendering-Panel), um Elemente, die Layoutverschiebungen verursachen, mit roten Overlays hervorzuheben.
Attributionsdaten
Die web-vitals-Bibliothek stellt Attributionsdaten bereit, die zeigen, was den schlechten Messwert verursacht hat – das LCP-Element, die INP-Interaktion oder das CLS-verursachende Element.
onLCP(metric => {
const { element, url } = metric.attribution.lcpEntry;
console.log('LCP element:', element);
}, { reportAllChanges: true });Kurztest
Welches Core Web Vital misst die Reaktionsfähigkeit – insbesondere, wie schnell die Seite auf Nutzerinteraktionen reagiert?
Zusammenfassung
Messen Sie CWV mit der web-vitals-Bibliothek oder Lighthouse. Senden Sie die Messwerte für Real User Monitoring an Ihr Analytics-System. Streben Sie LCP ≤ 2.5s, INP ≤ 200ms und CLS ≤ 0.1 an. Verwenden Sie Attributionsdaten, um die konkreten Elemente oder Interaktionen zu identifizieren, die schlechte Werte verursachen.
Häufig gestellte Fragen
Ist die Lektion „Core Web Vitals in React-Apps messen“ kostenlos?
Ja — der vollständige Text von „Core Web Vitals in React-Apps messen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Core Web Vitals in React-Apps messen“?
Verwenden Sie Lighthouse, WebPageTest und die web-vitals-Bibliothek, um LCP-, INP- und CLS-Werte zu erfassen. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um React Academy zu starten?
Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Core Web Vitals in React-Apps messen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Core Web Vitals in React-Apps messen
- Bundle-Analyse und Strategie zur Codeaufteilung
- Bild- und Font-Optimierung in React
- INP reduzieren: Optimierung von Event-Handlern