Angular Academy · Lektion

Core Web Vitals messen

Leistungsmetriken erfassen und verbessern

Core Web Vitals messen ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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 Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum Vitals wichtig sind

Core Web Vitals sind nutzerorientierte Performance-Metriken von Google. Sie quantifizieren Ladezeit, Interaktivität und visuelle Stabilität und beeinflussen sowohl die UX als auch das Suchranking.

Die drei Metriken

Das Trio besteht aus LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) und INP (Interaction to Next Paint). Jede Metrik betrachtet einen anderen Aspekt der wahrgenommenen Performance.

LCP

LCP misst, wann das größte sichtbare Element (Hero-Bild, Überschrift) vollständig gerendert ist. Ein guter Wert liegt unter 2,5 Sekunden. SSR hilft, indem dieser Inhalt bereits im initialen HTML ausgeliefert wird.

CLS

CLS misst unerwartete Layout-Verschiebungen beim Laden der Seite. Ein guter Wert liegt unter 0,1. Reservieren Sie Platz für Bilder und Anzeigen und vermeiden Sie es, Inhalte vor bereits vorhandene Inhalte einzufügen.

<img src="hero.jpg" width="800" height="450" alt="...">
<!-- explicit dimensions prevent shift -->

INP

INP misst die Reaktionsfähigkeit auf Benutzerinteraktionen während der gesamten Lebensdauer der Seite und ersetzt das ältere FID. Ein guter Wert liegt unter 200 ms. Umfangreiches JavaScript im Hauptthread verschlechtert INP.

Wie SSR die Vitals verbessert

SSR verbessert LCP, indem Inhalte früher dargestellt werden, und kann CLS reduzieren, indem es frühzeitig ein stabiles Layout liefert. Inkrementelle Hydration verbessert INP, weil anfangs weniger JavaScript ausgeliefert wird.

Labordaten und Felddaten

Labordaten stammen aus synthetischen Tools wie Lighthouse in einer kontrollierten Umgebung. Felddaten (CrUX, RUM) stammen von realen Benutzern. Optimieren Sie anhand beider Datenarten; für das Ranking werden die Felddaten verwendet.

Mit Lighthouse messen

Führen Sie Lighthouse in den Chrome DevTools oder in CI aus, um LCP- und CLS-Labordaten sowie einen Proxy für die Total Blocking Time von INP und umsetzbare Diagnosen zu erhalten.

// npx lighthouse https://example.com --view

Die Bibliothek web-vitals

Erfassen Sie Vitals realer Benutzer im Browser mit der Bibliothek web-vitals und senden Sie sie an Ihren Analytics-Endpunkt.

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

onLCP(console.log);
onCLS(console.log);
onINP(console.log);

JavaScript reduzieren

Kleinere Bundles verbessern INP und Time-to-Interactive. Verwenden Sie Lazy Loading auf Routenebene, @defer, inkrementelle Hydration und Tree-Shaking, um das ausgelieferte JavaScript zu reduzieren.

Iterieren und überprüfen

Performance-Arbeit bedeutet: messen, ändern, erneut messen. Führen Sie nach der Aktivierung von SSR, Hydration oder defer Lighthouse erneut aus und beobachten Sie über mehrere Wochen den Trend der Felddaten, um echte Verbesserungen zu bestätigen.

Kurzer Check

Überprüfen Sie Ihr Wissen zu den Core Web Vitals.

Zusammenfassung

Sie haben die Core Web Vitals (LCP, CLS, INP) kennengelernt, erfahren, wie SSR und inkrementelle Hydration sie verbessern, den Unterschied zwischen Labor- und Felddaten verstanden und gelernt, mit Lighthouse und der Bibliothek web-vitals zu messen und anschließend durch erneute Messungen weiter zu optimieren.

Häufig gestellte Fragen

Ist die Lektion „Core Web Vitals messen“ kostenlos?

Ja — der vollständige Text von „Core Web Vitals 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 Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Core Web Vitals messen“?

Leistungsmetriken erfassen und verbessern Du übst Angular 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 Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular 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 4 von 4.

Wie lange dauert die Lektion „Core Web Vitals 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 Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular 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

← Zurück zu Angular Academy