EINEN CORE WEB VITAL BEHEBEN

Largest Contentful Paint ist üblicherweise ein Hero-Image, eine grosse Headline oder ein Poster-Frame. Finde dieses Element. Alles andere ist nebensächlich, bis es schnell ist.

Hebel, die LCP bewegen: komprimiere und skaliere die Ressource, nutze ein modernes Format, setze Dimensionen, lade die exakte URL vor, wenn sie spät erkannt wird, lege sie auf ein CDN, und reduziere TTFB, damit die Bytes starten können. Vermeide Lazy-Loading des LCP-Images. Vermeide Karussells, die den echten LCP-Node verzögern.

Server-Seite: Wenn das HTML selbst spät ist, hilft kein Image-Trick. Repariere zuerst Cache und Origin.

Kernaussage: Benenne das LCP-Element, dann mache diese Datei und ihren Erkennungspfad unaufgeregt schnell.

Interaction to Next Paint kümmert sich darum, wie schnell die Seite nach einem Tippen oder Klick reagiert. Schweres JavaScript auf dem Main-Thread ist üblicherweise der Schuldige: grosse Hydration, teure Handler, Third-Party-Scripts, die für immer laufen.

Hebel: lösche oder verschiebe Third Parties, splitte Handler, vermeide grosse synchrone Komponenten auf Marketing-Seiten, bevorzuge server-gerendetes HTML mit kleinen Islands, und teste auf einem echten Mid-Tier-Android-Gerät, nicht nur auf einem Desktop-Drossungs-Preset.

Kernaussage: INP verbessert sich, wenn du Arbeit vom Main-Thread entfernst, nicht wenn du eine CSS-Transition Mikro-Optimierst.

Cumulative Layout Shift ist visuelle Instabilität. Images ohne Dimensionen, Schriften, die spät tauschen und Text vergrössern, Anzeigen und Embeds, die ein Loch im Layout öffnen, Banner, die über dem Content injiziert werden.

Hebel: Breite und Höhe oder CSS aspect-ratio auf Medien, reservierte Slots für Anzeigen, font-display-Strategien, die kein Layout sprengen, und kein spät-ladendes UI über existierendem Content. Bevorzuge das Transformieren von existierendem Platz statt das Einfügen neuer Blöcke oben.

Wichtigste Erkenntnis: Wenn etwas später erscheint, reserviere seinen Platz früher.

Wichtigste Erkenntnis: Die meisten wiederholten Fehler sind Prozessfehler, nicht fehlende Micro-Optimierungen.

Reihenfolge der Maßnahmen auf einer fehlerhaften Website: LCP klären, dann INP, dann CLS. Messdaten zwischen den Schritten erneut erfassen. Verwende die CWV-Checkliste als Launch-Gate und den Slow-Site-Guide, wenn du Server und Frontend immer noch nicht unterscheiden kannst.

Das Bestehen aller drei Metriken beim 75. Perzentil auf dem Mobilgerät ist ausreichend. Halte einen Release nicht für Lab-100er hostage, sobald die Felddaten gesund sind.

Wichtigste Erkenntnis: LCP zuerst klären. INP und CLS sind einfacher, sobald der Hauptinhalt-Pfad honest ist.

Tag 1: Felddaten abrufen, das LCP-Element auf den Top-drei-Templates benennen, jedes Third-Party-Skript mit einem Owner auflisten. Tag 2 und 3: nur LCP-Media- und Discovery-Fixes versenden. Tag 4: die schlimmsten Third Parties entfernen oder aufschieben und INP auf einem Telefon erneut prüfen. Tag 5: Platz für die CLS-Störenfriede reservieren, die du im Feld-Erlebnis sehen kannst. Tag 6 und 7: erneut messen, dokumentieren, was bleibt, und entscheiden, ob die verbleibende Arbeit Launch-blockierend ist.

Diese Woche schlägt einen Monat gemischter Refaktoren, weil jeder Tag eine Metrik und eine Evidence Loop hat. Falls LCP nach Tag 3 immer noch rot ist, starte keine Design-System-Bereinigung. Bleibe beim LCP-Element, bis es sich bewegt.

Wichtigste Erkenntnis: Eine Metrik pro Tag mit erneuter Messung schlägt ein gemischtes Performance-Backlog.