Ihr wollt Core Web Vitals verstehen, aber bitte ohne diesen „Lass uns erst mal bei Adam und Eva anfangen“-Workshop-Vibe? Sehr gut. Ich auch.
2026 ist die Geduld im Web ungefähr so lang wie ein Swipe – und eure Website wird daran gemessen, ob sie in dieser Zeit etwas Sinnvolles zustande bringt.
Heute klären wir drei Werte, die sich anhören wie ein Geheimbund aus dem Browser-Untergrund: FCP, LCP und CLS.
Unser Ziel: Ihr versteht in unter 10 Minuten, was dahintersteckt, wie man’s misst – und welche Quick Wins ihr sofort umsetzen könnt, ohne vorher den Quellcode zu heiraten.
Ich schreibe das hier als Software Engineer und Social Media Managerin mit Psychologie-Background – sprich: Ich kenne sowohl die technischen Stellschrauben als auch das menschliche Drama dahinter. Und das Drama lautet: Nutzer*innen warten nicht. Sie urteilen. Sofort. Still. Brutal.
Core Web Vitals sind Googles Versuch, „User Experience“ messbar zu machen – also die erlebte Qualität einer Seite, nicht das Gefühl eures Dev-Teams, dass „es bei mir lokal eigentlich ganz okay lädt“.
Was sind die Core Web Vitals und LCP, FCP und CLS?
Core Web Vitals sind von Google definierte Kennzahlen, die die Nutzererfahrung rund um Laden, Interaktivität und visuelle Stabilität quantifizieren.
LCP und CLS sind Core Web Vitals. FCP ist nicht Teil der Core Web Vitals, aber eine Lighthouse-Performance-Metrik, die extrem nützlich ist:
- FCP: erste Inhalte sichtbar
- LCP: Hauptinhalt sichtbar
- CLS: nichts springt herum
Wenn ihr nur das mitnehmt, seid ihr schon gefährlich kompetent.
FCP: First Contentful Paint
First Contentful Paint (FCP) ist der Zeitpunkt, an dem der Browser das erste Mal irgendeinen Inhalt aus dem DOM rendert – Text, Bild – darunter fallen auch Hintergrundbilder –, SVG, Canvas, Video. Es ist die erste sichtbare Rückmeldung: „Die Seite lebt.“
Lighthouse erklärt FCP als Metrik, die zeigt, wie lange es dauert, bis „das erste Stück DOM-Content“ sichtbar wird.
Warum FCP wichtig ist, obwohl es kein Core Web Vital ist
FCP ist euer „Lebenszeichen“. Ihr könnt einen okayen LCP haben und trotzdem ein mieses Gefühl erzeugen, wenn vorher zu lange gar nichts passiert. FCP ist also nicht der Hauptpreis, aber der Applaus, der euch zeigt, dass das Publikum noch nicht aufgestanden ist.
Was FCP schnell verbessert
- Weniger kritische Requests: Alles, was unbedingt zuerst geladen werden muss, sollte minimal sein.
- Schriften clever laden: Wenn Text erst mal unsichtbar bleibt, wirkt eure Seite wie kaputt.
- HTML priorisieren: Der Browser kann nur rendern, was er kennt. Überraschend, ich weiß.
LCP: Largest Contentful Paint
Largest Contentful Paint (LCP) misst, wann das größte sichtbare Inhaltselement im Viewport gerendert wurde – meist Hero-Bild, großer Textblock oder prominentestes Element. Der häufig zitierte Zielwert für „gut“ liegt bei 2,5 Sekunden oder schneller.
Übersetzt: LCP ist der Augenblick, in dem eure Seite von „leere Bühne“ zu „Aha, da ist das Stück“ wechselt. Wenn das zu lange dauert, passiert psychologisch etwas Hässliches: Menschen füllen die Lücke mit Misstrauen. Und ich fülle sie mit Sarkasmus.
Was LCP typischerweise ruiniert
- Zu große Bilder im sichtbaren Bereich: Das Hero-Image wiegt mehr als eure letzte Steuererklärung.
- Render-blockierendes CSS und JavaScript: Der Browser muss erst fünf Dinge „zu Ende denken“, bevor er euch etwas zeigt.
- Langsame Serverantwort: Wenn euer Hosting klingt wie ein Faxgerät, wird’s schwierig.
Sofort-Check für LCP
Wenn euer LCP schlecht ist, schaut als Erstes auf das größte Element above the fold. Es ist fast immer ein Bild, ein Slider (ja, der Feind) oder ein Block, der durch JavaScript erst „zusammengebaut“ wird. Und dann fragt ihr euch: Muss das wirklich so sein – oder ist das nur historisch gewachsen, wie schlechte Bürokaffee-Kultur?
CLS: Cumulative Layout Shift
Cumulative Layout Shift (CLS) misst die visuelle Stabilität: Wie stark verschieben sich Elemente während des Ladens unerwartet? Ein „guter“ CLS liegt bei 0,1 oder darunter.
Google beschreibt in der Herleitung der Grenzwerte, dass Abweichungen ab etwa 0,15 regelmäßig als störend wahrgenommen wurden und dass 0,1 und darunter als „gute“ Grenze gewählt wurde.
CLS ist dieser Moment, wenn ihr auf „Jetzt kaufen“ klicken wollt – und in der Millisekunde vorher poppt ein Banner rein, schiebt alles nach unten und ihr kauft aus Versehen ein E-Book über Selbstheilung durch Sellerie. Herzlichen Glückwunsch. Ihr wurdet ge-CLS-t.
Die üblichen CLS-Täter
- Bilder und Embeds ohne feste Maße: Der Browser reserviert keinen Platz, bis das Element da ist – und dann verschiebt sich alles.
- Nachträglich eingefügte Inhalte: Cookie-Banner, Ads, Pop-ups, Tooltips, „nur noch heute“-Leisten.
- Webfonts, die spät laden: Wenn sich die Schrift ändert, ändern sich Zeilenumbrüche – und zack, Layout-Shifts.
Wie misst man LCP, FCP und CLS ohne Lebenskrise?
Ihr braucht zwei Perspektiven: Labor-Daten (kontrollierte Tests) und Felddaten (echte Nutzer*innen). Labor ist gut für Debugging, Feld ist gut für die Wahrheit – und die Wahrheit ist selten hübsch.
Labor: Schnell, reproduzierbar, gnadenlos
- Lighthouse (Chrome DevTools): Zeigt euch FCP, LCP, CLS und mehr in einem Performance-Report.
- PageSpeed Insights: Praktischer Einstieg, kombiniert Labor- und (wenn verfügbar) Felddaten.
Feld: Echte Nutzer*innen, echte Probleme
- Google Search Console: Core-Web-Vitals-Berichte auf Basis echter Nutzung (CrUX), gut zum Priorisieren von URLs.
- RUM (Real User Monitoring): Wenn ihr es ernst meint, messt ihr direkt bei euren echten Besucher*innen.
Der Mobile-Filter: Die nackte Wahrheit
2026 surfen die meisten eurer Nutzer*innen nicht mit einem High-End-MacBook und Glasfaser-Anschluss. Sie sitzen in der Regionalbahn mit zwei Balken Edge oder nutzen ein drei Jahre altes Mittelklasse-Handy.
Achtet bei euren Messungen immer auf den Mobile-Score. Ein glänzender Desktop-LCP bringt euch bei Google wenig, wenn die mobile Version beim Laden so sehr schwitzt wie ein Pinguin in der Wüste.
Google bewertet primär die mobile Experience (Mobile-First Indexing).
Quick Wins: Drei Werte, sieben schnelle Hebel
Jetzt der Teil, den ihr eigentlich wolltet: „Sag mir, was ich tun muss, damit es besser wird.“ Okay. Aber ihr müsst mir kurz versprechen, dass ihr nicht bei „Installier noch ein Plugin“ stehen bleibt wie bei „Ich mach morgen Sport“.
Quick Wins für FCP
- Kritisches CSS reduzieren: Damit früh etwas gerendert wird, statt ewig auf Styles zu warten.
- Fonts klug konfigurieren: Text soll sichtbar bleiben, auch wenn die perfekte Schrift noch unterwegs ist.
Quick Wins für LCP
- Hero-Image abspecken: Komprimieren, modernes Format nutzen, Größe passend ausliefern (kein 4000px-Bild für ein 1200px-Layout).
- Above-the-fold nicht lazy-loaden: Das Wichtigste zuerst, nicht „vielleicht später, wenn’s sich ergibt“.
- Server- und Cache-Thema ernst nehmen: Wenn der erste Byte ewig braucht, könnt ihr vorne hübsch optimieren, bis euch die Axt 2000 aus der Hand rutscht.
Quick Wins für CLS
- Immer Platz reservieren: Bilder, Videos, Embeds brauchen feste Dimensionen oder zumindest stabile Aspect-Ratio-Platzhalter.
- Pop-ups und Banner zähmen: Wenn’s unbedingt sein muss, dann so, dass es nichts wegschiebt – und bitte nicht above the fold als Überraschungsei.
Was ihr euch 2026 bitte abgewöhnt
- Slider als Hero: Sie sind oft LCP-Schrott und UX-Klappstuhl zugleich.
- Jedes Tracking-Skript sofort laden: Der Browser ist kein Weihnachtsbaum, den man mit 30 Third-Party-Kugeln behängt.
- „Bei mir lädt’s schnell“ als Beweis: Labor ist nett, Feld ist Realität.
Und ja: Eigentlich müsste ich euch jetzt auch INP um die Ohren hauen, weil das seit 2024 zum harten Kern der Core Web Vitals gehört und misst, wie schnell die Seite reagiert, wenn ihr sie berührt. Aber wir bleiben heute beim visuellen Part. Wenn die Optik nicht stimmt, klickt eh keiner – und dann gibt’s auch kein INP zu messen.
Außerdem: Aber ich habe FCP, LCP und CLS verspochen; ihr erwartet FCP, LCP und CLS – und ich respektiere eure Ungeduld.
Fragen und Antworten
Was sind Core Web Vitals einfach erklärt?
Core Web Vitals sind Google-Metriken für reale Nutzererfahrung rund um Ladezeit, Reaktionsfähigkeit und visuelle Stabilität einer Website.
Was ist der Unterschied zwischen FCP und LCP?
FCP misst, wann der erste sichtbare Inhalt erscheint.
LCP misst, wann das größte sichtbare Hauptelement im Viewport geladen ist, und gilt als zentrale Kennzahl für die wahrgenommene Ladegeschwindigkeit.
Welche Werte gelten bei LCP und CLS als gut?
Ein guter LCP liegt bei 2,5 Sekunden oder schneller.
Ein guter CLS liegt bei 0,1 oder darunter.
Wie messe ich FCP, LCP und CLS?
Für Labordaten eignen sich Lighthouse und PageSpeed Insights, weil sie reproduzierbare Tests und konkrete Optimierungshinweise liefern.
Für echte Nutzerdaten sind die Berichte in der Google Search Console relevant, weil sie auf realer Nutzung basieren.
Was verbessert den LCP am schnellsten?
Häufig helfen ein optimiertes Hero-Bild, weniger render-blockierende Ressourcen und eine schnellere Serverantwort besonders stark.
Google empfiehlt generell, gute Core Web Vitals-Werte anzustreben, um Nutzerfreundlichkeit und Sichtbarkeit in der Suche zu stärken.
Fazit
- FCP sorgt dafür, dass ihr früh ein Lebenszeichen bekommt.
- LCP sorgt dafür, dass der Hauptinhalt nicht erst nach eurer Midlife-Crisis erscheint.
- CLS sorgt dafür, dass eure Seite sich nicht bewegt wie ein nervöser Pudding.
Wenn ihr diese drei Dinge in den Griff bekommt, wirkt eure Website plötzlich… seriös. Und das ist 2026 schon fast wieder provokant.
Also: Messt, priorisiert, optimiert.
Und wenn ihr bei CLS wieder aus Versehen auf eine Ad klickt, denkt an mich – ich sitze dann irgendwo mit einem Kaffee und der Axt 2000 und flüstere: „Reservier. Den. Platz.“
Schreibe einen Kommentar