Core Web Vitals: LCP, FID, CLS
Verstehen Sie, was Largest Contentful Paint, First Input Delay und Cumulative Layout Shift messen und warum Google sie als Ranking-Signale verwendet.
Core Web Vitals: LCP, FID, CLS ist eine kostenlose Frontend 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 Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum Performance wichtig ist
Langsame Seiten verlieren Benutzer. Google hat Performance zu einem Ranking-Signal gemacht: Websites mit schlechten Core-Web-Vitals-Werten werden in den Suchergebnissen schlechter eingestuft. Über SEO hinaus verringert jede Verzögerung von 100 ms messbar die Conversion-Rate und das Engagement.
Die drei Core Web Vitals
Google misst drei Metriken für die Nutzererfahrung: LCP (Ladegeschwindigkeit), FID (Interaktivität) und CLS (visuelle Stabilität). Für jede Metrik gibt es die Schwellenwerte „Gut“, „Verbesserungsbedürftig“ und „Schlecht“.
Largest Contentful Paint (LCP)
LCP misst, wann das größte sichtbare Inhaltselement (Bild, Video-Poster oder Textblock) vollständig gerendert wurde. Gut: unter 2,5 s. Schlecht: über 4 s. Optimieren Sie den Wert, indem Sie Hero-Bilder vorab laden, renderblockierende Ressourcen reduzieren und ein schnelles CDN verwenden.
First Input Delay (FID) und INP
FID misst die Verzögerung zwischen der ersten Interaktion eines Benutzers (Klick, Tippen) und der Reaktion des Browsers. Gut: unter 100 ms. Im Jahr 2024 wurde FID durch Interaction to Next Paint (INP) ersetzt. INP misst alle Interaktionen und nicht nur die erste.
Cumulative Layout Shift (CLS)
CLS misst unerwartete Layout-Verschiebungen während des Ladens einer Seite. Gut: unter 0,1. Schlecht: über 0,25. Verursacht wird dies durch Bilder ohne Abmessungen, spät geladene Schriftarten und Anzeigen, die nach dem ersten Rendering eingefügt werden.
CWV im Browser messen
Verwenden Sie das npm-Paket web-vitals, um Messwerte echter Nutzer zu erfassen und an Ihren Analytics-Endpunkt zu senden.
import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(metric => sendToAnalytics(metric));
onINP(metric => sendToAnalytics(metric));
onCLS(metric => sendToAnalytics(metric));
function sendToAnalytics({ name, value, id }) {
fetch('/analytics', {
method: 'POST',
body: JSON.stringify({ name, value, id }),
keepalive: true
});
}LCP verbessern: Hero-Bild vorladen
Weisen Sie den Browser an, das Hero-Bild frühzeitig herunterzuladen, bevor der restliche HTML-Code geparst wird.
<!-- In <head> -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- In <body> -->
<img src="/hero.webp" alt="Hero" width="1200" height="600" fetchpriority="high">CLS verbessern: Platz reservieren
Legen Sie für Bilder und eingebettete Inhalte immer width und height fest, damit der Browser Platz reserviert, bevor das Asset eintrifft. Verwenden Sie für responsive Container die CSS-Eigenschaft aspect-ratio.
.video-embed {
aspect-ratio: 16 / 9;
width: 100%;
}
/* HTML */
<img src="/photo.jpg" width="800" height="450" alt="">INP verbessern: Lange Tasks aufteilen
Lange JavaScript-Tasks blockieren den Hauptthread und verzögern dadurch die Reaktion auf Klicks. Teilen Sie die Arbeit mit scheduler.yield() oder setTimeout in Abschnitte auf, damit der Browser rendern und auf Eingaben reagieren kann.
async function processLargeList(items) {
for (let i = 0; i < items.length; i++) {
process(items[i]);
if (i % 50 === 0) await new Promise(r => setTimeout(r, 0));
}
}Labordaten vs. Felddaten
Labordaten (Lighthouse) stammen aus einem synthetischen Test in einer kontrollierten Umgebung. Felddaten (CrUX, RUM) werden von echten Nutzern auf echten Geräten erfasst. Felddaten sind die maßgebliche Grundlage für das SEO-Ranking.
Performance-Budgets
Legen Sie konkrete Grenzwerte fest, z. B. LCP unter 2 s und ein JavaScript-Bundle unter 200 KB. Erzwingen Sie diese in der CI mit Lighthouse CI oder @bundle-analyzer, sodass Builds mit verschlechterter Performance fehlschlagen.
Schnelltest
Welche Core Web Vital misst unerwartete visuelle Sprünge während des Ladens einer Seite?
Zusammenfassung: Core Web Vitals
LCP: Ladegeschwindigkeit des größten Elements, Zielwert unter 2,5 s. INP (früher FID): Reaktionsfähigkeit, Zielwert unter 200 ms. CLS: visuelle Stabilität, Zielwert unter 0,1. Messen Sie in der Produktion mit dem Paket web-vitals und verwenden Sie Lighthouse in der CI. Für SEO sind Felddaten ausschlaggebend, nicht Labordaten.
Häufig gestellte Fragen
Ist die Lektion „Core Web Vitals: LCP, FID, CLS“ kostenlos?
Ja — der vollständige Text von „Core Web Vitals: LCP, FID, CLS“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Core Web Vitals: LCP, FID, CLS“?
Verstehen Sie, was Largest Contentful Paint, First Input Delay und Cumulative Layout Shift messen und warum Google sie als Ranking-Signale verwendet. Du übst Frontend 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 Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend 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: LCP, FID, CLS“?
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 Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend 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: LCP, FID, CLS
- Lighthouse-Audits und Bewertung
- Bildoptimierung: Lazy Loading und WebP-Formate
- Code Splitting und Lazy Routes