Core Web Vitals – LCP, CLS, INP optimieren

Schnelle Websites fühlen sich leicht an und konvertieren besser. Google misst dafür die Core Web Vitals. Dahinter stecken drei Kennzahlen, die du auch ohne tiefe Entwicklerkenntnisse verstehst und verbesserst: LCP für die wahrgenommene Ladezeit, CLS für visuelle Stabilität und INP für Reaktionsfähigkeit.

Das Ziel ist nicht Perfektion, sondern spürbare Fortschritte. Wenn du größte Inhalte früher lieferst, Layout-Sprünge vermeidest und Eingaben schneller beantwortest, steigen Zufriedenheit und Rankingchancen. In diesem Guide bekommst du konkrete, einfache Schritte für den Start.

Core Web Vitals in kurz

LCP – Largest Contentful Paint: Zeit bis der größte sichtbare Inhalt lädt, meist Hero-Bild oder H1. Ziel: ≤ 2.5 s.
CLS – Cumulative Layout Shift: Summe der Layout-Verschiebungen während des Ladens. Ziel: ≤ 0.1.
INP – Interaction to Next Paint: Wie schnell die Seite nach einer Interaktion reagiert. Ziel: ≤ 200 ms.

Wichtig ist der Unterschied zwischen Lab-Daten (Tests im Tool) und Field-Daten (echte Nutzer). Optimiere beides: zuerst im Labor Fehler finden, dann mit Real User Monitoring prüfen, ob es bei deinen Besuchern wirkt.

LCP verbessern – das wichtigste Element zuerst liefern

Der LCP ist oft das Hero-Bild oder die große Überschrift. Dein Ziel: dieses Element schnell verfügbar machen.

Server und Netzwerk:
Setze HTTP/2 oder HTTP/3, Brotli für HTML/CSS/JS und einen CDN Cache für HTML, Bilder und Fonts. Kurze TTFB hilft dem LCP.

Bilder priorisieren:

• Komprimiere in WebP oder AVIF.
• Nutze responsive Größen mit srcset und sizes.
• Gib dem Hero-Bild Priorität.

<link rel="preload" as="image" href="/img/hero@2x.avif" imagesrcset="/img/hero.avif 1x, /img/hero@2x.avif 2x" imagesizes="100vw" fetchpriority="high">
<img src="/img/hero.avif" alt="Hero" width="1600" height="900" fetchpriority="high">

Critical CSS:
Lade kritisches CSS inline für Above-the-Fold Inhalt. Vermeide große Frameworks im Render-Blocking Pfad. Nicht kritisches CSS defern oder asynchron laden.

CLS senken – Layout stabil halten

Layout-Sprünge nerven. Du vermeidest sie, indem du Platz reservierst und späte Einblendungen in ruhige Bereiche schiebst.

Feste Größen und Platzhalter:
Bilder, Videos und Ads mit breite/höhe oder CSS aspect-ratio definieren. So weiß der Browser von Anfang an, wie viel Platz gebraucht wird.

<img src="/img/card.webp" alt="Produkt" width="800" height="600" loading="lazy" decoding="async">

.card-thumb { aspect-ratio: 4/3; object-fit: cover; }

Webfonts ohne Springen:

• Fonts preconnecten und preloaden, dann mit font-display: swap einsetzen.
• Vermeide späte Banner oberhalb des Contents.
• UI-Elemente, die nachgeladen werden, unterhalb des Hauptinhalts platzieren.

<link rel="preconnect" href="https://fonts.example.com" crossorigin>
<link rel="preload" as="font" type="font/woff2" href="/fonts/inter.woff2" crossorigin>
<style> @font-face { font-family: Inter; src: url(/fonts/inter.woff2) format("woff2"); font-display: swap; } </style>

INP verbessern – schneller auf Aktionen reagieren

INP misst, wie flott die Seite nach Klicks, Taps oder Eingaben reagiert. Bremsklötze sind meist JavaScript und lange Tasks.

JavaScript im Griff:

• Bündle und minimiere. Alles nicht Kritische defern oder dynamic import.
• Lange Aufgaben in kleine Schritte teilen, Web Worker für schwere Arbeit nutzen.
• Event Listener sparsam und passive setzen, damit Scrolling nicht blockiert.

<script src="/app.js" defer></script>
<script>
  // teure Aufgabe zerlegen
  requestIdleCallback(()=>doHeavyWorkInChunks());
  addEventListener('touchstart', onTouch, { passive: true });
</script>

Animations-Performance:
Nutze CSS Transform/Opacity statt Layout-Eigenschaften. So landet die Arbeit auf der GPU und blockiert nicht das Rendering.

Messen – ohne Blindflug geht es nicht

PageSpeed Insights und Lighthouse zeigen dir Lab-Werte und Hinweise. Für echte Nutzer brauchst du RUM: z. B. mit einem kleinen Script, das LCP, CLS, INP sammelt und an dein Analytics schickt. Vergleiche Mobil vs. Desktop und Land vs. Stadt. So siehst du, wo Optimierungen zuerst wirken sollen.

Ein schlanker 7-Schritte-Plan

1. LCP-Element identifizieren und priorisieren – Bild komprimieren, preload, critical CSS.
2. TTFB senken – Caching, CDN, serverseitiges Rendering prüfen.
3. CLS fixen – Größen setzen, aspect-ratio, Webfonts mit swap.
4. JS entschlacken – defer, Split, lange Tasks vermeiden.
5. Bilder unterhalb der Falz mit lazy loading und sinnvollen width/height.
6. Monitoring einbauen – Metriken regelmäßig ansehen, Regressionen verhindern.
7. Iterieren – erst große Gewinne, dann Feinschliff.

Häufige Fehler und schnelle Lösungen

Hero-Bild ohne Priorität: Setze fetchpriority="high" oder Preload, sonst konkurriert es mit vielen kleinen Assets.
Fehlende Größenangaben: Ohne Breite/Höhe oder aspect-ratio steigt CLS.
Zu viel JavaScript im Head: Alles Nichtkritische defern.
Drittanbieter-Wildwuchs: Tags und Widgets regelmäßig prüfen und entfernen, was nicht gebraucht wird.
Nur Lab-Daten verbessern: Immer mit Field-Daten gegenprüfen, sonst optimierst du an der Zielgruppe vorbei.

Fazit

Die Core Web Vitals sind kein Hexenwerk. Wenn du das wichtigste Element zuerst lieferst, Platz reservierst und JavaScript entschlackst, steigen LCP, CLS und INP zuverlässig. Starte mit dem Hero-Bild, sichere Layoutflächen, aktiviere swap für Fonts und miss die Wirkung mit RUM. So wird deine Seite sichtbar schneller und fühlt sich für Nutzer sofort besser an.