Cyberknecht

Wissen / Checklisten / Webentwicklung

Core Web Vitals: Performance-Checkliste

Ein verständlicher Leitfaden für schnellere und stabilere Webseiten.

Stand: 27.10.2026 · Redaktion: Carl Thorns · Kostenlos und ohne Anmeldung

PDF herunterladenAlle Ressourcen

Dieser Leitfaden führt dich vom konkreten Ausgangsproblem über die praktische Umsetzung bis zur überprüfbaren Abnahme. Jeder Abschnitt nennt eine Methode, ein Beispiel, ein Erfolgskriterium und eine typische Fehlerquelle.

Arbeitsablauf auf einen Blick

1. Felddaten vor Labordaten

Prüfe reale Nutzerdaten in Search Console oder CrUX und ergänze Labortests mit PageSpeed Insights. Trenne Mobilgeräte und Desktop.

Praxisbeispiel
75. Perzentil: LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 als gute Orientierung.
So erkennst du, dass es funktioniert: Messquelle, Zeitraum und URL-Gruppe sind dokumentiert.
Typischer Fehler: Ein einzelner Lighthouse-Wert als repräsentativ für alle Nutzer.

2. LCP verbessern

Ermittle das größte sichtbare Inhaltselement. Optimiere dessen Ladepriorität, Dateigröße und Serverantwort. Lade das Hero-Bild nicht unnötig lazy.

Praxisbeispiel
<img src="hero.webp" fetchpriority="high" width="1200" height="630" alt="…">
So erkennst du, dass es funktioniert: LCP-Element und Wasserfall zeigen eine nachvollziehbare Verbesserung.
Typischer Fehler: Alle Bilder pauschal mit hoher Priorität laden.

3. INP verbessern

Untersuche langsame Interaktionen und lange Main-Thread-Tasks. Zerlege teure JavaScript-Arbeit und reduziere unnötige Event-Handler.

Praxisbeispiel
Performance-Profil beim Öffnen eines komplexen Menüs aufnehmen.
So erkennst du, dass es funktioniert: Klicks und Tastaturaktionen reagieren auch auf schwächeren Geräten flüssig.
Typischer Fehler: Nur Ladezeit messen und Interaktionen ignorieren.

4. CLS reduzieren

Reserviere Platz für Bilder, Embeds und dynamische Elemente. Vermeide nachträglich eingefügte Banner ohne Platzhalter.

Praxisbeispiel
img { aspect-ratio: 16 / 9; } und feste Bildabmessungen.
So erkennst du, dass es funktioniert: Beim Scrollen und Nachladen springen Inhalte nicht sichtbar.
Typischer Fehler: Layoutverschiebungen durch Cookie-Banner oder Fonts übersehen.

5. Nach Änderungen kontrollieren

Vergleiche dieselben Seitentypen unter vergleichbaren Bedingungen und beobachte Felddaten über mehrere Wochen.

Praxisbeispiel
Vorher/Nachher-Tabelle je Seitentyp und Gerät.
So erkennst du, dass es funktioniert: Verbesserung ist nicht nur in einem einzelnen Labortest sichtbar.
Typischer Fehler: Unterschiedliche Testbedingungen als Optimierungseffekt verkaufen.

Abnahmeprotokoll für die Praxis

Nutze die folgenden Punkte als dokumentierbare Abnahme. Trage bei jedem Punkt Datum, getestete URL beziehungsweise System, Ergebnis und gegebenenfalls einen offenen Befund ein.

  1. Abnahmekriterium: Messquelle, Zeitraum und URL-Gruppe sind dokumentiert.

  2. Abnahmekriterium: LCP-Element und Wasserfall zeigen eine nachvollziehbare Verbesserung.

  3. Abnahmekriterium: Klicks und Tastaturaktionen reagieren auch auf schwächeren Geräten flüssig.

  4. Abnahmekriterium: Beim Scrollen und Nachladen springen Inhalte nicht sichtbar.

  5. Abnahmekriterium: Verbesserung ist nicht nur in einem einzelnen Labortest sichtbar.

Fachquellen und weiterführende Dokumentation

Diese Primärquellen dienen zur Vertiefung und zur Prüfung versionsabhängiger Details. Bei rechtlichen Themen ersetzt der Leitfaden keine individuelle Rechtsberatung.

Praxisvertiefung: LCP, INP und CLS richtig unterscheiden

LCP beschreibt, wann der größte sichtbare Inhaltsbereich geladen ist; INP misst Reaktionsfähigkeit und CLS unerwartete Layoutverschiebungen. Beginne mit realen Nutzerdaten, nicht allein einem einzelnen Labortest.

Technische Umsetzung

Richtwerte am 75. Perzentil: LCP höchstens 2,5 s, INP höchstens 200 ms und CLS höchstens 0,1. Reserviere Bildgrößen, reduziere blockierendes JavaScript und priorisiere das Hero-Bild.

So überprüfst du das Ergebnis

Vergleiche mobile und Desktop-Daten über mindestens einen ausreichend großen Messzeitraum. Ein schneller Lighthouse-Lauf ersetzt keine Felddaten.