Core Web Vitals verbessern: Guide 2026

Core Web Vitals verbessern: Der vollständige Guide für 2026

Core Web Vitals verbessern ist eine der effektivsten SEO-Massnahmen für 2026. Google nutzt diese drei Metriken — LCP, INP und CLS — als direkten Ranking-Faktor. Websites mit guten Core Web Vitals ranken im Schnitt 5-10 Positionen besser als vergleichbare Seiten mit schlechten Werten. Für Schweizer Unternehmen, die über Google gefunden werden müssen, ist die Optimierung dieser Metriken geschäftskritisch.

In diesem Guide erkläre ich jede Metrik im Detail, zeige die konkreten Optimierungsmassnahmen und liefere Benchmarks für Schweizer Websites.

Die drei Core Web Vitals erklärt

Metrik	Misst	Gut	Verbesserungswürdig	Schlecht
LCP (Largest Contentful Paint)	Ladegeschwindigkeit	≤2.5s	2.5-4.0s	>4.0s
INP (Interaction to Next Paint)	Interaktivität	≤200ms	200-500ms	>500ms
CLS (Cumulative Layout Shift)	Visuelle Stabilität	≤0.1	0.1-0.25	>0.25

LCP (Largest Contentful Paint): Wie lange dauert es, bis das grösste sichtbare Element der Seite (meistens ein Bild oder eine grosse Textblock) vollständig geladen ist? Ziel: unter 2.5 Sekunden.

INP (Interaction to Next Paint): Wie schnell reagiert die Seite auf Nutzer-Interaktionen (Klicks, Tippen, Tastatureingaben)? Misst die Zeit von der Interaktion bis zur nächsten visuellen Aktualisierung. Ziel: unter 200 Millisekunden. INP hat 2024 den alten FID (First Input Delay) ersetzt.

CLS (Cumulative Layout Shift): Wie stark verschiebt sich das Layout während des Ladens? Kennst du das: Du willst auf einen Button klicken, aber eine Werbung lädt und alles verschiebt sich? Das ist schlechter CLS. Ziel: unter 0.1.

Key Takeaway: Alle drei Metriken müssen im grünen Bereich sein, um von Google als "gute Nutzererfahrung" eingestuft zu werden. Eine Metrik im roten Bereich kann die positiven Effekte der anderen zunichtemachen.

LCP verbessern: Ladegeschwindigkeit optimieren

LCP ist die wichtigste Metrik — sie hat den grössten Einfluss auf Rankings und Conversions.

Was beeinflusst LCP?

Das LCP-Element ist typischerweise:

• Ein Hero-Bild (65% der Fälle)
• Ein grosser Textblock (25% der Fälle)
• Ein Video-Poster (5% der Fälle)
• Ein Hintergrund-Bild (5% der Fälle)

LCP-Optimierungsmassnahmen

1. Hero-Bild priorisieren:

• priority-Attribut bei next/image für das Hero-Bild
• fetchpriority="high" für das wichtigste Bild
• Kein Lazy Loading für Above-the-fold-Bilder

2. Server-Response beschleunigen:

• Server-Side Rendering statt Client-Side Rendering
• CDN nutzen (Vercel Edge: 10-50ms TTFB)
• Datenbank-Queries optimieren

3. Render-blockierende Ressourcen eliminieren:

• CSS inlinen für Above-the-fold-Content
• JavaScript defer/async laden
• Fonts mit next/font optimieren

4. Bildgrösse reduzieren:

• WebP/AVIF statt JPEG/PNG
• Responsive Images mit srcset
• Qualität auf 75-85% setzen (visuell kaum Unterschied)

Massnahme	LCP-Verbesserung	Aufwand
Bilder in WebP/AVIF	-500-1500ms	Tief
SSR statt CSR	-1000-3000ms	Mittel
CDN (Vercel)	-200-600ms	Tief
Font-Optimierung	-100-300ms	Tief
JS-Bundle reduzieren	-200-800ms	Mittel

INP verbessern: Interaktivität steigern

INP misst, wie schnell deine Website auf Nutzer-Aktionen reagiert. Ein schlechter INP-Wert fühlt sich an wie eine "träge" Website — der Nutzer klickt, aber nichts passiert sofort.

Was verursacht schlechten INP?

• Langes JavaScript auf dem Main Thread: Grosse JavaScript-Ausführungen blockieren den Browser
• Komplexe Event-Handler: Klick-Handler die viel Logik ausführen
• Übermässige DOM-Grösse: Seiten mit 5'000+ DOM-Elementen
• Third-Party-Scripts: Analytics, Chat-Widgets, Werbung

INP-Optimierungsmassnahmen

1. JavaScript aufteilen:

• Code Splitting: Nur der Code für die aktuelle Seite wird geladen
• Dynamic Imports: Schwere Libraries erst bei Bedarf laden
• Web Workers: Rechenintensive Aufgaben vom Main Thread auslagern

2. Event-Handler optimieren:

• Debouncing für Scroll- und Resize-Events
• requestAnimationFrame für visuelle Updates
• State-Updates batchen (React 18+ macht das automatisch)

3. DOM-Grösse reduzieren:

• Virtualisierung für lange Listen (React Virtual, TanStack Virtual)
• Lazy Rendering für nicht-sichtbare Bereiche
• Content unterhalb des Folds erst beim Scrollen rendern

4. React Server Components nutzen:

• Server Components senden kein JavaScript an den Client
• Nur interaktive Elemente sind Client Components
• Reduziert das JavaScript-Bundle um 30-50%

CLS verbessern: Visuelle Stabilität sicherstellen

CLS misst, wie stark sich das Layout während und nach dem Laden verschiebt. Layout-Shifts sind nicht nur ärgerlich — sie führen zu Fehlklicks und frustrierten Nutzern.

Was verursacht Layout-Shifts?

• Bilder ohne Dimensionen: Browser weiss nicht, wie gross das Bild wird
• Spät ladende Fonts: Text wird mit Fallback-Font angezeigt, dann springt er beim Swap
• Dynamisch eingefügter Content: Werbung, Cookie-Banner, Newsletter-Popups
• Spät ladende Embeds: YouTube-Videos, Google Maps, Social-Media-Widgets

CLS-Optimierungsmassnahmen

1. Bild-Dimensionen immer angeben:

• width und height bei jedem <img>-Tag
• next/image macht das automatisch
• aspect-ratio CSS-Property als Fallback

2. Font-Loading optimieren:

• next/font mit display: swap — Text sofort sichtbar
• Font-Grösse und Zeilenhöhe des Fallback-Fonts an Custom-Font anpassen
• size-adjust Property für minimalen Shift

3. Platzhalter für dynamischen Content:

• Feste Höhe für Werbebanner reservieren
• Cookie-Banner über dem Content (overlay) statt im Content (push)
• Skeleton-Screens statt Spinner

4. Embeds erst bei Bedarf laden:

• YouTube: Thumbnail mit Play-Button, Video erst bei Klick laden
• Maps: Statisches Bild, interaktive Karte bei Klick
• Social Media: Screenshot statt Embed

Core Web Vitals messen: Die richtigen Tools

Tool	Datentyp	Kosten	Für
Google PageSpeed Insights	Field + Lab	Kostenlos	Schneller Überblick
Google Search Console	Field	Kostenlos	Seitenübergreifender Überblick
Chrome DevTools (Lighthouse)	Lab	Kostenlos	Detaillierte Analyse
Chrome UX Report (CrUX)	Field	Kostenlos	Echte Nutzerdaten
Vercel Analytics	Field (RUM)	Ab CHF 0	Bei TYTOS inklusive
WebPageTest	Lab	Kostenlos	Wasserfall-Analyse

Field Data vs. Lab Data:

• Field Data: Echte Messdaten von realen Nutzern. Das ist, was Google für Rankings verwendet.
• Lab Data: Simulierte Messungen unter kontrollierten Bedingungen. Nützlich für Debugging, aber nicht ranking-relevant.

Key Takeaway: Google verwendet Field Data für Rankings. Dein Lighthouse-Score (Lab Data) ist ein Indikator, aber nicht das, was Google sieht. Prüfe immer die Field Data in PageSpeed Insights oder der Search Console.

Benchmarks: Schweizer Websites im Vergleich

Wie stehen Schweizer Websites bei den Core Web Vitals da?

Branche (CH)	LCP (Median)	INP (Median)	CLS (Median)	Status
E-Commerce	3.1s	280ms	0.18	Schlecht
Immobilien	2.8s	220ms	0.15	Verbesserungswürdig
Finanzdienstleistungen	2.5s	190ms	0.12	Knapp gut
Gastronomie	3.5s	310ms	0.22	Schlecht
IT-Dienstleister	2.2s	170ms	0.08	Gut
TYTOS-Websites	1.0s	80ms	0.02	Exzellent

Der Grund für die exzellenten Werte von TYTOS-Websites: Next.js 15 + Tailwind CSS + Vercel ist von Grund auf für Performance optimiert. Kein WordPress, keine Plugins, keine Server-Engpässe.

Core Web Vitals und SEO-Impact

Die konkreten Auswirkungen auf Rankings:

• Alle 3 Metriken gut: Website ist im oberen Drittel der Ranking-Kandidaten für Page Experience
• 1-2 Metriken gut: Neutraler Effekt — kein Bonus, kein Malus
• Alle 3 Metriken schlecht: Ranking-Nachteil von 5-15 Positionen gegenüber vergleichbaren Seiten

Für ein Schweizer KMU, das für "Softwareentwicklung Luzern" oder "CRM für KMU" ranken will, kann der Unterschied zwischen Seite 1 und Seite 2 bei Google liegen.

Praxis-Checkliste: Core Web Vitals optimieren

LCP unter 2.5 Sekunden:

• Hero-Bild optimiert (WebP/AVIF, responsive, priority)
• Server-Side Rendering aktiviert
• CDN konfiguriert (Vercel, Cloudflare)
• Render-blockierendes CSS/JS eliminiert
• Font-Loading optimiert

INP unter 200 Millisekunden:

• JavaScript-Bundle unter 200 KB
• Code Splitting implementiert
• Long Tasks identifiziert und aufgeteilt
• Third-Party-Scripts deferriert
• DOM-Grösse unter 3'000 Elemente

CLS unter 0.1:

• Alle Bilder mit width/height
• Font-Loading mit next/font
• Platzhalter für dynamischen Content
• Cookie-Banner als Overlay
• Keine Layout-Shifts nach Interaktion

Der schnellste Weg zu exzellenten Core Web Vitals

Für bestehende Websites mit schlechten Core Web Vitals gibt es zwei Wege:

Weg 1: Bestehende Website optimieren

• Aufwand: CHF 2'000-10'000, 2-6 Wochen
• Ergebnis: Verbesserung um 20-40%
• Limitierung: Architektur-bedingte Grenzen (WordPress, altes Framework)

Weg 2: Neuaufbau mit modernem Stack

• Aufwand: ab CHF 500 bei TYTOS, 1-3 Wochen
• Ergebnis: Lighthouse 95-100, alle Core Web Vitals im grünen Bereich
• Vorteil: Zukunftssicher, keine technischen Schulden, tiefere Wartungskosten

Für die meisten Fälle ist Weg 2 schneller, günstiger und nachhaltiger. Die Kosten für den Neuaufbau einer Website bei TYTOS liegen unter dem, was viele Agenturen allein für ein Performance-Audit verlangen. Lies den vollständigen Kostenvergleich im Artikel Was kostet Softwareentwicklung in der Schweiz?.

Fazit: Core Web Vitals sind kein optionales Feature

Core Web Vitals verbessern ist eine der wirkungsvollsten SEO-Massnahmen für 2026. Google verstärkt den Einfluss von Page Experience auf Rankings kontinuierlich. Websites mit guten Werten ranken besser, konvertieren mehr und bieten eine bessere Nutzererfahrung.

Bei TYTOS sind exzellente Core Web Vitals Standard — nicht das Ergebnis nachträglicher Optimierung, sondern das Resultat des richtigen Tech-Stacks von Anfang an. Next.js 15, Tailwind CSS, Vercel — Websites ab CHF 500, Online-Shops ab CHF 10'000, SaaS ab CHF 15'000. Festpreis. 80% günstiger als traditionelle Agenturen.

Bereit? Kontaktiere uns für eine kostenlose Demo in 24 Stunden. Wir bauen dir eine Website mit Lighthouse 95+.