# Core Web Vitals optimieren: So verbessern Sie Ihre Website-Performance
Ihre Website lädt zwei Sekunden zu langsam. Klingt harmlos? Laut Google-Studien verlassen 53 % der mobilen Nutzer eine Seite, wenn sie länger als drei Sekunden zum Laden braucht. Gleichzeitig fließen die Core Web Vitals seit 2021 direkt als Rankingfaktor in den Google-Algorithmus ein. Wer seine Website-Performance vernachlässigt, zahlt doppelt: durch schlechtere Sichtbarkeit in den Suchergebnissen und durch eine höhere Absprungrate potenzieller Kunden.
In diesem Leitfaden erfahren Sie, was Core Web Vitals konkret bedeuten, wie Sie den Status Ihrer Website schnell messen und welche technischen Maßnahmen den größten Hebel für Ihre Performance bieten.
Was sind Core Web Vitals – und warum sind sie geschäftskritisch?
Core Web Vitals sind drei von Google definierte Metriken, die die tatsächliche Nutzererfahrung einer Website messbar machen. Im Gegensatz zu rein technischen Kennzahlen wie dem Server-Response-Time messen sie, was der Besucher wirklich wahrnimmt.
Die drei aktuellen Metriken im Überblick:
- LCP (Largest Contentful Paint): Misst, wie schnell das größte sichtbare Inhaltselement – meist ein Bild oder eine Überschrift – geladen wird. Zielwert: unter 2,5 Sekunden.
- INP (Interaction to Next Paint): Seit März 2024 ersetzt INP den alten FID-Wert und misst die Reaktionsfähigkeit der Seite auf Nutzereingaben wie Klicks oder Tastatureingaben. Zielwert: unter 200 Millisekunden.
- CLS (Cumulative Layout Shift): Erfasst unerwartete Layout-Verschiebungen während des Ladens – also Elemente, die springen, bevor der Nutzer klickt. Zielwert: unter 0,1.
Für Entscheider bedeutet das: Eine schlechte Performance ist kein rein technisches Problem. Sie hat direkte Auswirkungen auf Conversion-Rate, Absprungrate und organische Reichweite. Eine Studie von Portent zeigt, dass Websites, die in unter einer Sekunde laden, eine Conversion-Rate von 39 % erzielen – gegenüber nur 22 % bei einer Ladezeit von fünf Sekunden.
Core Web Vitals messen: Diese Tools sollten Sie kennen
Bevor Sie optimieren, brauchen Sie belastbare Daten. Die gute Nachricht: Es gibt kostenlose Tools, mit denen Sie Ihre aktuelle Situation in wenigen Minuten analysieren können.
Google PageSpeed Insights
Das bekannteste Tool liefert sowohl Lab-Daten (simulierte Tests) als auch Field-Daten (echte Nutzerdaten aus dem Chrome User Experience Report). Rufen Sie einfach pagespeed.web.dev auf, geben Sie Ihre URL ein und erhalten Sie sofort eine detaillierte Auswertung mit konkreten Verbesserungsvorschlägen.
Google Search Console
Unter „Core Web Vitals" zeigt die Search Console, wie viele Ihrer URLs als „gut", „verbesserungswürdig" oder „schlecht" eingestuft werden – aufgeteilt nach Desktop und Mobil. Das ist besonders wertvoll, weil hier echte Nutzerdaten aus Ihrem Traffic ausgewertet werden.
Lighthouse in den Chrome DevTools
Für Entwickler ist Lighthouse das Werkzeug der Wahl. Es lässt sich direkt im Browser ausführen und liefert zusätzlich Optimierungshinweise für Accessibility, Best Practices und SEO.
Wichtig: Messen Sie immer sowohl die Desktop- als auch die Mobile-Version. In der Praxis schneiden mobile Seiten häufig deutlich schlechter ab – und Google bewertet primär die mobile Version Ihrer Website.
LCP optimieren: Das größte sichtbare Element beschleunigen
Der Largest Contentful Paint ist in den meisten Fällen das größte Optimierungspotenzial. Häufig ist ein Hero-Bild oder eine große Überschrift der LCP-Auslöser. Folgende Maßnahmen helfen am meisten:
Bilder richtig ausliefern
- Nutzen Sie moderne Formate wie WebP oder AVIF statt JPEG oder PNG – sie bieten bei gleicher Qualität 25–50 % kleinere Dateigrößen.
- Setzen Sie das `loading="eager"`-Attribut für das LCP-Bild und `loading="lazy"` für alle anderen Bilder unterhalb des sichtbaren Bereichs.
- Verwenden Sie `fetchpriority="high"` für das LCP-Element, damit der Browser es priorisiert lädt.
Server und Hosting optimieren
- Setzen Sie auf einen Content Delivery Network (CDN), um statische Inhalte geografisch näher beim Nutzer auszuliefern. Dienste wie Cloudflare oder AWS CloudFront reduzieren Ladezeiten für deutsche Nutzer spürbar.
- Prüfen Sie Ihre Time to First Byte (TTFB) – sie sollte unter 600 Millisekunden liegen. Ein träger Server verhindert jeden anderen Optimierungsversuch.
Ressourcen vorausladen
Nutzen Sie `<link rel="preload">` für kritische Ressourcen wie Schriftarten oder das LCP-Bild. Damit signalisieren Sie dem Browser, diese Dateien früh im Ladeprozess zu holen.
INP optimieren: Reaktionsfähigkeit spürbar verbessern
Ein schlechter INP-Wert entsteht meist durch zu viel JavaScript, das den Haupt-Thread des Browsers blockiert. Nutzer erleben das als „eingefrorene" Seite nach einem Klick.
Konkrete Maßnahmen:
- JavaScript-Ausführung aufteilen: Nutzen Sie die `scheduler.postTask()`-API oder einfach `setTimeout()`, um lange Tasks in kleinere Einheiten zu zerlegen, die den Haupt-Thread freigeben.
- Schwere Third-Party-Skripte reduzieren: Tag Manager, Chat-Widgets und Analytics-Tools addieren sich schnell. Laden Sie sie asynchron oder deferred, und entfernen Sie alle Skripte, die nicht aktiv genutzt werden.
- React und andere Frameworks optimieren: Übermäßiges Re-Rendering von Komponenten ist ein häufiger INP-Killer. Setzen Sie `React.memo()`, `useMemo()` und `useCallback()` gezielt ein, um unnötige Neuberechnungen zu vermeiden.
CLS optimieren: Layout-Verschiebungen eliminieren
Cumulative Layout Shift ist die Metrik, die Nutzer am unmittelbarsten spüren – ein Bild lädt nach, der Text springt, der Klick landet an der falschen Stelle. Für Conversion-Optimierung ist ein stabiles Layout entscheidend.
Die häufigsten CLS-Ursachen und ihre Lösungen:
- Bilder ohne definierte Maße: Setzen Sie immer `width` und `height`-Attribute in Ihrem HTML. Der Browser kann dann den Platz reservieren, bevor das Bild lädt.
- Schriftarten, die nachladen (FOUT/FOIT): Nutzen Sie `font-display: swap` und laden Sie Schriftarten per `<link rel="preload">` vor. Noch besser: Hosten Sie Schriften selbst statt auf Google Fonts zu verlinken.
- Dynamisch eingeblendete Inhalte: Banner, Cookie-Hinweise oder Werbeanzeigen, die nachträglich eingefügt werden, verschieben bestehende Elemente. Reservieren Sie für solche Elemente von Anfang an feste Platzhalterbereiche mit definierter Höhe.
- Webfonts und Custom Fonts: Binden Sie kritische Schriften direkt im `<head>` ein und nutzen Sie `font-display: optional` für nicht-kritische Schriften.
Core Web Vitals als kontinuierlicher Prozess
Ein häufiger Fehler: Unternehmen optimieren ihre Website einmalig und betrachten das Thema als erledigt. In der Realität ist Performance-Optimierung ein fortlaufender Prozess. Jedes neue Plugin, jedes JavaScript-Update und jede Design-Änderung kann die Core Web Vitals beeinflussen.
Empfehlungen für nachhaltiges Performance-Management:
- Performance-Budget definieren: Legen Sie intern verbindliche Grenzwerte fest, z. B. „LCP darf 2,5 Sekunden nie überschreiten". Tools wie Lighthouse CI können dieses Budget automatisch bei jedem Deployment prüfen.
- Monitoring einrichten: Nutzen Sie die Google Search Console und ergänzen Sie sie durch Tools wie Sentry, Datadog oder das kostenlose SpeedCurve für kontinuierliches Real-User-Monitoring.
- Regelmäßige Audits: Planen Sie alle drei bis sechs Monate einen vollständigen Performance-Audit ein – insbesondere nach größeren Website-Überarbeitungen oder der Integration neuer Tools.
Fazit: Performance ist eine strategische Investition
Core Web Vitals optimieren bedeutet nicht, sich in technischen Details zu verlieren. Es bedeutet, die Nutzererfahrung ernst zu nehmen – und damit direkt in bessere Rankings, niedrigere Absprungraten und höhere Conversion-Rates zu investieren. Die Maßnahmen in diesem Leitfaden lassen sich in vielen Fällen innerhalb weniger Wochen umsetzen und erzielen messbare Ergebnisse.
Für Unternehmen ohne eigenes Entwicklerteam oder mit bestehenden Websites auf veralteter Technologie ist es häufig sinnvoll, einen erfahrenen Webentwicklungspartner hinzuzuziehen, der sowohl die technische Umsetzung als auch das laufende Monitoring übernimmt.
Sie möchten wissen, wie Ihre Website bei den Core Web Vitals abschneidet? Pilecode analysiert Ihre aktuelle Performance und zeigt Ihnen konkret, wo die größten Optimierungspotenziale liegen. Kontaktieren Sie uns für ein kostenloses Erstgespräch – ohne Verpflichtung, mit klaren Handlungsempfehlungen.
Haben Sie Fragen zu diesem Thema? Jetzt Kontakt aufnehmen.