?>

Core Web Vitals erklärt: LCP, INP, CLS – Ein vollständiger Leitfaden für Einsteiger (2026)

Core Web Vitals sind Googles benutzerzentrierte Messgrößen zur Messung der realen Seitenerfahrung. Sie sind seit 2021 Ranking-Faktoren und im Jahr 2026 wichtiger denn je – sie zu bestehen kann Ihre Suchrankings und Konversionsraten direkt verbessern. Dieser Leitfaden erklärt jede Messgröße, wie man sie misst und wie man häufige Probleme genau behebt.

Warum Core Web Vitals wichtig sind (Der Business Case)

• Seiten, die Core Web Vitals bestehen, werden zu 24 % weniger wahrscheinlich abgebrochen.
• Eine Verbesserung des LCP um 0,5 s kann die Conversions um 12–15 % steigern (Google-Fallstudie).
• Schlechte Core Web Vitals sind ein Entscheidungskriterium – wenn zwei Seiten ähnlich relevant sind, wird die schnellere, stabilere Seite höher eingestuft.

Wenn Ihre Seite eine der drei Messgrößen nicht besteht, lassen Sie Geld und Rankings auf dem Tisch liegen.

Die drei Core Web Vitals – Detaillierte Aufschlüsselung

1. LCP (Largest Contentful Paint) – Ladegeschwindigkeit

Was sie misst: Die Zeit, die das größte sichtbare Element (Hero-Bild, Überschrift, Video) zum Rendern benötigt. Gut: unter 2,5 Sekunden. Schlecht: über 4 Sekunden.

Warum sie wichtig ist: Benutzer nehmen Geschwindigkeit danach wahr, wann der Hauptinhalt erscheint. Ein langsamer LCP fühlt sich an wie eine defekte Seite.

Häufige Ursachen für schlechten LCP:

• Große Hero-Bilder (> 200 KB).
• Langsame Serverantwortzeit (TTFB > 600 ms).
• Render‑blockierendes CSS oder JavaScript.
• Clientseitiges Rendering (React/Vue), das die Darstellung verzögert.

2. INP (Interaction to Next Paint) – Reaktionsfähigkeit

Was sie misst: Die Zeit zwischen einer Benutzerinteraktion (Klick, Tippen, Tastendruck) und der nächsten visuellen Aktualisierung. Gut: unter 200 Millisekunden. Ersetzte FID im Jahr 2024.

Warum sie wichtig ist: Ein langsamer INP lässt Ihre Seite träge wirken. Der Benutzer klickt auf eine Schaltfläche und nichts passiert – er nimmt an, dass sie defekt ist.

Häufige Ursachen für schlechten INP:

• Lange JavaScript-Aufgaben, die den Hauptthread blockieren (> 50 ms).
• Schwere Ereignisbehandlungen bei jeder Interaktion.
• Drittanbieter-Skripte (Analysen, Chat-Widgets), die bei der Interaktion ausgeführt werden.

3. CLS (Cumulative Layout Shift) – Visuelle Stabilität

Was sie misst: Das Ausmaß unerwarteter Layoutverschiebungen (Bewegungen) sichtbarer Elemente. Gut: unter 0,1. Schlecht: über 0,25.

Warum sie wichtig ist: Sich verschiebende Inhalte lassen Benutzer die Orientierung verlieren, versehentlich auf Anzeigen klicken oder frustrieren. Es ist ein direkter Benutzererfahrungsfehler.

Häufige Ursachen für schlechten CLS:

• Bilder oder Videos ohne explizite `width` und `height`.
• Spät ladende Schriftarten, die Text austauschen und verschieben.
• Dynamisch eingefügte Inhalte (Anzeigen, Banner), die vorhandene Inhalte nach unten drücken.

So messen Sie die Core Web Vitals Ihrer Website

• Felddaten (echte Benutzer, bestimmen Ranking): Google Search Console → Core Web Vitals Bericht. Auch CrUX (Chrome User Experience Report).
• Labordaten (simuliert, zum Debuggen): PageSpeed Insights, Lighthouse in DevTools, WebPageTest.

Konzentrieren Sie sich für die Ranking-Auswirkung auf Felddaten, verwenden Sie jedoch Labordaten, um Probleme zu finden und zu beheben.

Schlechten LCP beheben – Schritt für Schritt

1. Optimieren Sie Hero-Bilder

Konvertieren Sie in WebP, komprimieren Sie mit Tools wie Squoosh oder ImageOptim. Verwenden Sie `srcset`, um gerätegerechte Bilder bereitzustellen.

<code>&lt;img src="hero-800.webp" srcset="hero-400.webp 400w, hero-800.webp 800w" sizes="(max-width: 600px) 400px, 800px" width="800" height="500" fetchpriority="high" alt="Hero"&gt;</code>

2. Preloaden Sie das LCP-Element

<code>&lt;link rel="preload" as="image" href="hero.webp" fetchpriority="high"&gt;</code>

3. Verbessern Sie TTFB (Time to First Byte)

• Verwenden Sie einen VPS anstelle von Shared Hosting.
• Aktivieren Sie PHP‑FPM mit OPcache.
• Implementieren Sie Datenbankindizierung und Caching (Redis oder Memcached).
• Ziehen Sie ein CDN (Cloudflare, Bunny.net) für die globale Verteilung in Betracht.

4. Eliminieren Sie render‑blockierende Ressourcen

Fügen Sie kritisches CSS inline ein, verschieben Sie nicht kritisches CSS und fügen Sie JavaScript-Dateien `defer` oder `async` hinzu.

<code>&lt;style&gt; /* kritisches CSS */ &lt;/style&gt;<br>&lt;link rel="preload" href="full.css" as="style" onload="this.rel='stylesheet'"&gt;<br>&lt;script defer src="analytics.js"&gt;&lt;/script&gt;</code>

Schlechten INP beheben – Vertiefung der Reaktionsfähigkeit

1. Teilen Sie lange JavaScript-Aufgaben auf

<code>function heavyTask() {<br>  let i = 0;<br>  function chunk() {<br>    const start = performance.now();<br>    while (i < items.length && performance.now() - start < 5) {<br>      process(items[i]);<br>      i++;<br>    }<br>    if (i < items.length) setTimeout(chunk, 0);<br>  }<br>  chunk();<br>}</code>

2. Optimieren Sie Ereignisbehandlungen

<code>addEventListener('scroll', () => { ... }, { passive: true });</code>

3. Entfernen oder verschieben Sie Drittanbieter-Skripte

<code>document.getElementById('chat-trigger').addEventListener('click', () => {<br>  const script = document.createElement('script');<br>  script.src = 'https://chatwidget.com/script.js';<br>  document.head.appendChild(script);<br>});</code>

Schlechten CLS beheben – Layoutverschiebungen eliminieren

1. Fügen Sie allen Medien explizite Breite/Höhe hinzu

<code>&lt;img src="image.webp" width="800" height="500"&gt;</code>

2. Reservieren Sie Platz für Schriftarten

<code>@font-face {<br>  font-family: 'Inter';<br>  font-display: swap;<br>  /* ... */<br>}</code>

3. Vermeiden Sie das Einfügen von Inhalten über vorhandenen Inhalten

Wenn Sie ein Banner oder eine Benachrichtigung anzeigen müssen, reservieren Sie Platz dafür mit einem Platzhalter-Div mit fester Höhe.

WordPress vs. benutzerdefiniertes PHP für Core Web Vitals

Benutzerdefinierte PHP-Seiten erzielen durchweg höhere Punktzahlen, da es keine Plugin-Aufblähung, keinen Theme-Overhead und kein erzwungenes JavaScript gibt. Eine Standard-WordPress-Installation fällt beim CLS häufig durch, weil die Admin-Leiste für eingeloggte Benutzer Inhalte verschiebt (auch wenn Besucher sie nicht sehen). Mit benutzerdefiniertem PHP kontrollieren Sie jedes Byte. Sie können kritisches CSS inline einfügen, genau das preloaden, was benötigt wird, und Layoutverschiebungen vollständig vermeiden.

Echte Fallstudie: Von Nichtbestehen zu Bestehen in 7 Tagen

Ein Dienstleistungsunternehmen für zu Hause hatte eine WordPress-Seite mit schlechten Core Web Vitals: LCP 4,2 s, INP 540 ms, CLS 0,29. Wir haben das Front‑End auf eine benutzerdefinierte statische PHP-Seite migriert (wobei das vorhandene Backend für Buchungen erhalten blieb).

Ergriffene Maßnahmen:

• Hero-Bild in WebP konvertiert und pregeladen.
• Kritisches CSS für den Hero-Bereich und die Navigation inline eingefügt.
• Alles JavaScript auf `defer` verschoben oder nach Benutzerinteraktion geladen.
• Explizite Abmessungen für alle Bilder und Iframes festgelegt.

Ergebnisse nach 1 Woche (Felddaten von GSC):

• LCP: 4,2 s → 1,1 s (bestanden).
• INP: 540 ms → 98 ms (bestanden).
• CLS: 0,29 → 0,02 (bestanden).
• Organischer Traffic: +34 % nach 60 Tagen (aufgrund von Ranking-Verbesserungen).

Der Kunde zahlt jetzt keine laufenden Gebühren für Plugins und besitzt den schlanken, schnellen Code.

Schritt-für-Schritt-Aktionsplan zur Behebung Ihrer Core Web Vitals

1. Messen Sie den aktuellen Zustand – Führen Sie PageSpeed Insights aus. Notieren Sie LCP, INP, CLS für Mobilgeräte.
2. Beheben Sie einfache Probleme – Komprimieren Sie Bilder, aktivieren Sie Caching, verwenden Sie ein CDN.
3. Wenn LCP > 2,5 s: Preloaden Sie das Hero-Bild, fügen Sie kritisches CSS inline ein, verbessern Sie die Serverantwort.
4. Wenn INP > 200 ms: Teilen Sie lange JS-Aufgaben auf, verschieben Sie Drittanbieter-Skripte, optimieren Sie Ereignisbehandlungen.
5. Wenn CLS > 0,1: Fügen Sie allen Medien Abmessungen hinzu, verwenden Sie `font-display: swap`, vermeiden Sie das Einfügen dynamischer Inhalte oberhalb des Faltbereichs.
6. Testen Sie erneut und überwachen Sie – Verwenden Sie den Core Web Vitals Bericht der Google Search Console, um echte Benutzerdaten im Laufe der Zeit zu verfolgen.

Wenn Sie auf WordPress sind, sollten Sie auf ein leichtes Theme (GeneratePress, Kadence) umsteigen, unnötige Plugins entfernen und ein Plugin wie Perfmatters oder FlyingPress verwenden. Die ultimative Lösung ist jedoch eine benutzerdefinierte PHP-Seite, die auf Leistung ausgelegt ist.

Bereit, Core Web Vitals zu bestehen und Rankings zu verbessern?

Ich erstelle benutzerdefinierte PHP-Websites, die 100 auf Lighthouse erreichen und alle Core Web Vitals sofort bestehen. Sie zahlen eine einmalige Gebühr – keine Abonnements, keine versteckten Kosten. Ich behebe auch die Core Web Vitals Ihrer bestehenden Website, wenn Sie nicht bereit sind zu migrieren.

Sprechen wir über Ihre Website – ich biete ein kostenloses Core Web Vitals Audit an.

Daten aus echten Kundenprojekten und veröffentlichten Fallstudien von Google. Individuelle Ergebnisse können variieren.