Core Web Vitals verstehen und optimieren
LCP, FID und CLS erklärt. Konkrete Schritte zur Optimierung deiner Website für bessere Rankings und Nutzererlebnis.
Was sind Core Web Vitals?
Google hat eine Reihe von Metriken definiert, die wirklich wichtig sind. Diese heißen Core Web Vitals und sie beeinflussen direkt, wie deine Website in den Suchergebnissen rankt. Nicht nur das — sie bestimmen auch, ob Besucher bleiben oder sofort wieder gehen.
Drei Messgrößen stehen dabei im Fokus: Wie schnell lädt deine Seite? Wie flüssig läuft sie? Und wie stabil bleibt das Layout während des Ladens? Das klingt technisch, aber die gute Nachricht ist: Du kannst konkrete Schritte unternehmen, um alle drei zu verbessern.
Die drei Core Web Vitals im Detail
Jede Metrik misst einen anderen Aspekt der Nutzererfahrung. Zusammen ergeben sie ein vollständiges Bild.
LCP — Largest Contentful Paint
Misst, wie lange es dauert, bis der größte Inhalt auf deiner Seite sichtbar ist. Das kann ein Bild, ein Heading oder ein Video sein. Google sagt: Das sollte unter 2,5 Sekunden passieren. Alles über 4 Sekunden ist kritisch schlecht.
INP — Interaction to Next Paint
Das ist die neue Metrik, die FID ersetzt hat. Sie misst, wie schnell deine Website auf Klicks, Tippen und Tastatureingaben reagiert. Wenn jemand auf einen Button klickt, sollte die Seite in unter 200 Millisekunden antworten. Benutzer merken es sofort, wenn das nicht klappt.
CLS — Cumulative Layout Shift
Das ist wahrscheinlich die frustrierendste Erfahrung: Du liest etwas und plötzlich springt das Layout herum. CLS misst diese unerwarteten Verschiebungen. Der Score sollte unter 0,1 liegen. Unter 0,25 ist noch akzeptabel, aber nicht ideal.
So optimierst du dein LCP
Largest Contentful Paint ist oft die erste Herausforderung, auf die Teams stoßen. Der Grund ist meistens nicht schwer zu finden: Das größte Element lädt einfach zu langsam.
Konkret bedeutet das: Wenn dein Hero-Bild 3 MB groß ist, wird es lange dauern. Du musst dein Bild komprimieren — nicht schlecht, sondern klug. Nutze moderne Formate wie WebP. Das ist 30-40% kleiner als JPG, sieht aber genauso gut aus. Oder verwende ein CDN, damit deine Bilder von Servern geladen werden, die näher bei deinen Besuchern sind.
Ein weiterer Trick: Lazy Loading. Du musst nicht alle Bilder sofort laden. Bilder, die der Nutzer erst sieht, wenn er scrollt, können später geladen werden. Das spart massiv Zeit beim initialen Laden.
- Bilder komprimieren (WebP Format, max. 100 KB für Hero)
- CDN einsetzen für schnellere Auslieferung
- Lazy Loading implementieren für Off-Screen-Bilder
- Server-Side Rendering (SSR) für schnellere erste Paint
- Font Loading optimieren (font-display: swap)
INP optimieren: Schnelle Reaktionen sind das Ziel
Interaction to Next Paint ist manchmal schwieriger zu verbessern, weil es oft an JavaScript liegt. Wenn dein Code zu viel CPU-Zeit frisst, wird die Seite langsam.
Das Problem ist oft: Du hast viel JavaScript, das beim Laden ausgeführt wird. Das blockiert alles andere. Stattdessen solltest du Code aufteilen und nur laden, was du gerade brauchst. Das heißt Code Splitting.
Noch ein Tipp: Verwende Web Workers. Das sind spezielle Scripts, die im Hintergrund laufen und die Hauptseite nicht blockieren. Wenn du schwere Berechnungen durchführst, pack sie in einen Web Worker.
Praktisch bedeutet das: Eine einfache Regel ist die 200ms-Regel. Wenn deine Seite länger als 200 Millisekunden braucht, um auf einen Klick zu reagieren, wird es für den Nutzer spürbar langsam. Das ist deine Ziellinie.
CLS bekämpfen: Stabiles Layout von Anfang an
Cumulative Layout Shift ist eigentlich die einfachste Metrik zu verbessern. Das Problem: Elemente verschieben sich während des Ladens. Das passiert meist, weil Bilder und Fonts keine feste Größe haben.
Hier’s die Lösung: Reserviere Platz für deine Inhalte. Wenn du weißt, dass ein Bild 800×600 Pixel ist, sag dem Browser das von Anfang an. Nutze das aspect-ratio Property oder gib width und height an. Der Browser kann dann den Platz reservieren, bevor das Bild geladen ist.
Das gleiche gilt für Fonts. Wenn dein Web Font lädt, ändert sich die Größe des Textes. Das ist ärgerlich. Mit font-display: swap sagst du dem Browser: Nutze erst die Standard-Font, und wenn meine Web Font kommt, wechsle sofort. Das ist viel besser als zu warten.
CLS-Optimierungen auf einen Blick:
- Bilder: width und height setzen (oder aspect-ratio)
- Fonts: font-display: swap verwenden
- Ads: Reservierter Platz für Anzeigen
- Keine Elemente mit position: absolute am Anfang
- Modals und Pop-ups nur bei echtem User-Intent
Tools zur Messung und Analyse
Du brauchst konkrete Zahlen, um zu wissen, wo du stehst. Diese Tools helfen dir dabei.
Google PageSpeed Insights
Das beste Tool, um deine Website zu testen. Es zeigt dir deine Core Web Vitals Scores und gibt konkrete Verbesserungsvorschläge. Kostenlos und direkt von Google. Du brauchst nur die URL eingeben.
Chrome DevTools
Öffne die Developer Tools in Chrome (F12) und geh zum Performance-Tab. Du kannst genau sehen, was beim Laden passiert, welche Dateien wie lange dauern und wo die Bottlenecks sind. Das ist für Deep Dives unerlässlich.
Lighthouse
Lighthouse ist in Chrome eingebaut. Es testet nicht nur Performance, sondern auch SEO, Accessibility und Best Practices. Der Report ist detailliert und zeigt dir genau, was zu tun ist.
Web Vitals Chrome Extension
Eine kleine Browser-Extension von Google, die deine Core Web Vitals live anzeigt, während du eine Website besuchst. Super praktisch, um schnell einen Überblick zu bekommen.
Dein Action Plan
Du weißt jetzt, was Core Web Vitals sind und wie du sie verbesserst. Das Wichtigste: Fang an. Du musst nicht alles auf einmal machen.
Schritt eins ist einfach: Teste deine Website mit PageSpeed Insights. Schau dir den Report an und identifiziere das größte Problem. Ist es LCP? Dann optimiere deine Bilder. Ist es CLS? Dann setz width und height auf deine Images. Kleine Verbesserungen summieren sich schnell.
Das beste daran: Wenn deine Core Web Vitals besser werden, werden auch deine Google-Rankings besser. Das ist kein Versprechen, sondern Google’s eigenes Ranking-Signal. Plus: Deine Besucher werden eine bessere Erfahrung haben. Das ist wirklich eine Win-Win-Situation.
Brauchst du spezifische Hilfe bei der Optimierung? Wir helfen dir gerne weiter.
Kontakt aufnehmen
Hinweis
Dieser Artikel bietet Informationen und Best Practices zur Optimierung von Core Web Vitals. Die genannten Metriken und Schwellwerte basieren auf Google’s aktuellen Standards (2026). Allerdings können sich diese Anforderungen ändern. Für die neuesten Informationen empfehlen wir, die offizielle Google Search Central Dokumentation zu besuchen. Jede Website ist unterschiedlich, und was für eine Website funktioniert, muss nicht zwingend für eine andere gelten. Wir empfehlen dir, deine Optimierungen zu testen und zu messen.
Weitere Artikel zum Thema
CSS Grid vs. Flexbox: Wann verwendest du welches?
Artikel lesen