Core Web Vitals: Der ultimative Guide zur Optimierung von LCP, INP & CLS

Was sind die Core Web Vitals? Eine klare Definition

Die Core Web Vitals sind von Google definierte Metriken, die reale Aspekte der Nutzererfahrung auf einer Webseite messen: die Ladegeschwindigkeit, die Interaktivität und die visuelle Stabilität. Sie sind ein zentraler Bestandteil der Page Experience Signale und damit ein offizieller Rankingfaktor. Anstatt hunderte von Metriken zu überwachen, konzentrieren sich die Core Web Vitals auf die drei wichtigsten Aspekte, die darüber entscheiden, ob ein Nutzer Ihre Seite als schnell und angenehm empfindet oder frustriert verlässt.

Largest Contentful Paint (LCP)

Der LCP misst die Ladeleistung. Konkret gibt er an, wie lange es dauert, bis das größte sichtbare Element (meist ein Bild, Video oder ein großer Textblock) im Viewport des Nutzers geladen ist. Ein guter LCP-Wert liegt bei unter 2,5 Sekunden. Er signalisiert dem Besucher, dass die Seite schnell und relevant ist.

Interaction to Next Paint (INP)

Der INP ist der Nachfolger des First Input Delay (FID) und misst die Reaktionsfähigkeit. Er erfasst die Latenz aller Interaktionen eines Nutzers mit der Seite (Klicks, Taps etc.) und gibt an, wie schnell die Seite darauf visuell reagiert. Ein guter INP-Wert liegt unter 200 Millisekunden. Er ist entscheidend für den Eindruck, ob eine Seite flüssig oder träge funktioniert.

Cumulative Layout Shift (CLS)

Der CLS misst die visuelle Stabilität. Er erfasst unerwartete Layout-Verschiebungen während des Ladevorgangs. Solche Verschiebungen treten auf, wenn Elemente nachträglich geladen werden und bereits sichtbare Inhalte nach unten drängen. Ein guter CLS-Wert liegt unter 0,1. Ein niedriger Wert verhindert, dass Nutzer versehentlich auf falsche Schaltflächen klicken.

So messen Sie Ihre Core Web Vitals: Eine Schritt-für-Schritt-Anleitung

Bevor Sie mit der Optimierung beginnen können, benötigen Sie eine verlässliche Datengrundlage. Google stellt dafür professionelle und kostenlose Werkzeuge zur Verfügung. Die wichtigsten sind PageSpeed Insights und die Google Search Console. So gehen Sie vor:

1. Google PageSpeed Insights nutzen: Besuchen Sie die PageSpeed Insights Webseite und geben Sie die URL ein, die Sie analysieren möchten. Das Tool liefert Ihnen zwei Arten von Daten: Labordaten (eine simulierte Messung) und Felddaten (echte Nutzerdaten der letzten 28 Tage, falls verfügbar). Konzentrieren Sie sich primär auf die Felddaten, da diese die tatsächliche Nutzererfahrung widerspiegeln.
2. Diagnose-Informationen auswerten: Unterhalb der Core Web Vitals Werte finden Sie detaillierte Diagnosen und Empfehlungen. PageSpeed Insights zeigt Ihnen genau, welche Ressourcen (Bilder, Skripte, CSS-Dateien) Ihre Seite verlangsamen oder Layout-Verschiebungen verursachen.
3. Google Search Console prüfen: Navigieren Sie in Ihrer Search Console zum Bericht "Core Web Vitals" unter dem Menüpunkt "Nutzerfreundlichkeit". Hier sehen Sie eine aggregierte Ansicht der Leistung Ihrer gesamten Website. Google gruppiert URLs in "Gut", "Optimierung erforderlich" und "Schlecht".
4. Problematische URL-Gruppen identifizieren: Klicken Sie auf einen der Berichte (z.B. "Schlechte URLs"), um zu sehen, welche Seitentypen (z.B. Blogartikel, Produktseiten) von welchen Problemen (z.B. "LCP-Problem: Länger als 4 s") betroffen sind. Dies hilft Ihnen, Optimierungsmaßnahmen gezielt zu priorisieren.

Pro-Tipp: Messen Sie nicht nur Ihre Startseite. Analysieren Sie auch Ihre wichtigsten Unterseiten, wie z. B. Leistungsseiten, Kontaktformulare oder Blogartikel, da deren Performance ebenso entscheidend für den Gesamteindruck und das Ranking ist.

Largest Contentful Paint (LCP) optimieren: Die Checkliste

Ein langsamer LCP ist oft das Resultat von zu großen Seitenelementen oder einer langsamen Server-Antwortzeit. Gehen Sie die folgenden Punkte durch, um die Ladezeit Ihres Hauptinhalts drastisch zu reduzieren.

• Server-Antwortzeit reduzieren: Ein guter Startpunkt ist ein hochwertiges Hosting. Günstige Shared-Hosting-Pakete sind oft überlastet. Prüfen Sie zudem serverseitiges Caching, um HTML-Dokumente schneller ausliefern zu können. Eine gute Time to First Byte (TTFB) liegt unter 200 ms.
• Bilder komprimieren und moderne Formate nutzen: Bilder sind oft die größten Dateien. Komprimieren Sie JPEGs und PNGs verlustfrei und konvertieren Sie sie in moderne Formate wie WebP oder AVIF, die bei gleicher Qualität deutlich kleiner sind.
• Render-blockierende Ressourcen eliminieren: CSS- und JavaScript-Dateien können das Laden des Hauptinhalts blockieren. Laden Sie kritisches CSS direkt im HTML-Header und verschieben Sie unwichtige CSS- und JavaScript-Dateien ans Ende des Dokuments oder laden Sie sie asynchron.
• Lazy Loading für Bilder implementieren: Bilder, die nicht sofort sichtbar sind ("below the fold"), müssen nicht sofort geladen werden. Nutzen Sie das native `loading="lazy"`-Attribut, um Bandbreite zu sparen und den initialen Ladevorgang zu beschleunigen.
• Preconnect für wichtige Ressourcen nutzen: Weisen Sie den Browser an, frühzeitig eine Verbindung zu wichtigen Drittanbieter-Domains (z.B. Google Fonts) aufzubauen, um spätere Ladezeiten zu verkürzen.

Interaction to Next Paint (INP) verbessern: Reagieren Sie schneller

Ein hoher INP-Wert entsteht fast immer durch zu viel oder ineffizientes JavaScript, das den Haupt-Thread des Browsers blockiert. Wenn der Browser damit beschäftigt ist, Skripte auszuführen, kann er nicht auf Nutzereingaben reagieren. Hier sind die wichtigsten Hebel:

• Lange JavaScript-Tasks aufteilen: Wenn ein Skript länger als 50 Millisekunden am Stück läuft, blockiert es den Main-Thread. Nutzen Sie Techniken wie `setTimeout`, um lange Aufgaben in kleinere Blöcke aufzuteilen und dem Browser zwischendurch Zeit zum "Atmen" und Reagieren zu geben.
• Unbenutztes JavaScript entfernen: Moderne Webseiten laden oft umfangreiche JavaScript-Bibliotheken und Plugins. Analysieren Sie mit den Chrome DevTools (Coverage Tab), welche Teile Ihres Codes tatsächlich ausgeführt werden, und entfernen Sie alles Unnötige.
• Interaktionen priorisieren: Stellen Sie sicher, dass der Code, der für die Reaktion auf Nutzereingaben zuständig ist (z.B. das Öffnen eines Menüs), nicht durch andere, weniger wichtige Skripte (z.B. Analyse-Tracker) verzögert wird. Laden Sie solche Skripte verzögert (deferred).
• DOM-Größe reduzieren: Ein sehr großes und komplexes Document Object Model (DOM) zwingt den Browser bei jeder Interaktion zu aufwendigen Neuberechnungen des Layouts. Halten Sie Ihre HTML-Struktur so schlank und einfach wie möglich.

Cumulative Layout Shift (CLS) vermeiden: Sorgen Sie für visuelle Stabilität

Nichts ist frustrierender als ein Klick auf einen Button, der im letzten Moment nach unten rutscht. Solche CLS-Probleme untergraben das Vertrauen und wirken unprofessionell. Glücklicherweise sind sie oft einfach zu beheben.

"Visuelle Stabilität ist kein Luxus, sondern eine Grundvoraussetzung für eine vertrauenswürdige und barrierefreie Benutzererfahrung. Ein niedriger CLS-Wert zeigt Respekt vor der Aufmerksamkeit des Nutzers."

Die häufigsten Ursachen sind Bilder ohne feste Größenangaben, dynamisch eingefügte Werbebanner oder Inhalte, die durch späte Netzwerkanfragen nachgeladen werden.

Mini-Case-Study aus der Praxis: Eine Steuerkanzlei aus Leipzig hatte ein hohes CLS-Problem auf ihrer Startseite. Die Ursache war ein großflächiges Banner im oberen Bereich, das erst nach den Textinhalten geladen wurde und diese bei Erscheinen ruckartig nach unten verschob. Durch die einfache Angabe von festen Breiten- und Höhenattributen im `<img />` -Tag konnte der Browser den benötigten Platz von Anfang an reservieren. Das Ergebnis: Der CLS-Wert sank von 0.21 auf 0.02, und die Nutzererfahrung verbesserte sich spürbar.

• Feste Dimensionen für Bilder und Videos angeben: Geben Sie für jedes Bild-, Video- oder iframe-Element immer `width`- und `height`-Attribute an. So reserviert der Browser den Platz, bevor die Datei vollständig geladen ist.
• Platz für Werbebanner und Einbettungen reservieren: Wenn Sie dynamische Inhalte wie Werbung laden, definieren Sie für den Container eine feste Höhe (z. B. via `min-height` in CSS), um Sprünge zu vermeiden, wenn der Inhalt erscheint.
• Webfonts optimiert laden: Schriftarten, die spät geladen werden, können einen "Flash of Unstyled Text" (FOUT) verursachen, der das Layout verschiebt. Nutzen Sie `font-display: swap;` in Ihrer `@font-face`-Deklaration, um zunächst eine Systemschrift anzuzeigen und Layout-Sprünge zu minimieren.
• Vermeiden Sie das Einfügen von Inhalten oberhalb des bereits sichtbaren Bereichs: Wenn Sie Inhalte (z.B. einen Cookie-Banner) dynamisch einfügen, sollten diese den bestehenden Inhalt überlagern und nicht nach unten verschieben.

Die 3 häufigsten Fehler bei der Optimierung (und wie Sie sie vermeiden)

Bei der Optimierung der Core Web Vitals gibt es typische Fallstricke. Wenn Sie diese kennen, sparen Sie Zeit und erreichen schneller Ihre Ziele.

1. Nur die Startseite optimieren: Viele konzentrieren sich ausschließlich auf die Homepage. Doch Google bewertet die Page Experience auf URL-Ebene. Eine langsame Leistungs- oder Kontaktseite kann genauso schädlich sein. Analysieren Sie Ihre gesamte Website.
2. Mobile Performance ignorieren: Die Messungen und das Ranking basieren auf der mobilen Nutzererfahrung (Mobile-First-Index). Testen Sie Ihre Website immer mit einer simulierten langsamen 3G-Verbindung, um realistische Ergebnisse für mobile Nutzer zu erhalten.
3. Optimierung als einmaliges Projekt sehen: Die Core Web Vitals sind keine "Set it and forget it"-Aufgabe. Neue Inhalte, Plugins oder Design-Änderungen können die Werte jederzeit wieder verschlechtern. Richten Sie ein regelmäßiges Monitoring über die Google Search Console ein, um Probleme frühzeitig zu erkennen.