Core Web Vitals

Warum traditionelle Ladezeiten als Messwert ausgedient haben

Jahrelang verließen sich Entwickler und Marketer auf den "Onload"-Wert, also die Sekundenzahl bis eine Seite komplett fertig geladen ist. Dieser Wert ist jedoch blind für die Realität. Eine Website kann im Hintergrund technisch fertig geladen sein, während der Nutzer trotzdem sekundenlang auf einen weißen Bildschirm starrt oder frustriert klickt, weil einfach nichts reagiert.

Genau hier schlagen die Core Web Vitals die Brücke zur echten User Experience (UX). Sie basieren auf realen Nutzerdaten aus dem Chrome User Experience Report (CrUX) und messen nicht, was der Server tut, sondern was der Anwender tatsächlich erlebt.

Wichtig für die richtige Interpretation: Hier trennen sich zwei Datenwelten, die viele Agenturen munter durcheinanderwerfen. Field Data stammt aus CrUX, also aus echten Besuchen realer Nutzer mit echten Geräten und echten Internetverbindungen. Lab Data, wie sie zum Beispiel Google Lighthouse liefert, simuliert dagegen einen Testlauf unter Laborbedingungen. Lab Data eignet sich hervorragend zum Debuggen während der Entwicklung, für Dein tatsächliches Google-Ranking zählt aber ausschließlich Field Data. Wer nur auf einen guten Lighthouse-Score im Labor optimiert und die echten Feldwerte ignoriert, optimiert am Ranking-Faktor vorbei.

Google hat diese Metriken fest in seinen Ranking-Algorithmus integriert. Langsame Ladezeiten und ein ruckelnder Bildaufbau kosten direkt Platzierungen und damit Reichweite. Für Unternehmen und SaaS-Anbieter sind sie der entscheidende Hebel für den ROI von Marketing-Budgets und für die Kundenbindung.

Die drei Säulen der User Experience: LCP, CLS und der neue Standard INP

1. Largest Contentful Paint (LCP): Das visuelle Erlebnis

• Was es misst: Wann ist das größte sichtbare Element im Sichtfeld des Nutzers, etwa das Hero-Image oder die Hauptüberschrift, komplett geladen?
• Der Business-Impact: Ein langsamer LCP signalisiert sofort "diese Website ist träge". Die Absprungrate steigt mit jeder Zehntelsekunde Verzögerung exponentiell.
• Zielwert: Unter 2,5 Sekunden.

2. Cumulative Layout Shift (CLS): Die visuelle Stabilität

• Was es misst: Verschieben sich Elemente auf der Seite, während sie lädt? Das passiert oft, wenn Bilder oder Schriften verspätet reinspringen.
• Der Business-Impact: Frustration pur. Der Nutzer will auf einen Link klicken, das Layout springt, er verklickt sich. Im E-Commerce führt das zu abgebrochenen Käufen, bei SaaS-Anwendungen zerstört es die Usability im Dashboard. Ein häufig unterschätzter Übeltäter sind übrigens Cookie-Banner, die nachträglich ins Layout schießen und den kompletten Above-the-Fold-Bereich verschieben. Genau das verhindern wir bei unseren Projekten strukturell, statt es nachträglich zu flicken.
• Zielwert: Ein Score unter 0,1.

3. Interaction to Next Paint (INP): Die neue Ära der Interaktivität

• Was es misst: Seit März 2024 die wichtigste Metrik für Web-Apps. INP misst die Verzögerung aller Klicks und Tastatureingaben während des gesamten Besuchs.
• Der Business-Impact: Wenn ein Nutzer in Deinem SaaS-Dashboard einen Filter anklickt und die UI verzögert reagiert, fühlt sich die Software billig an. Ein schlechter INP treibt die Churn-Rate in die Höhe.
• Zielwert: Unter 200 Millisekunden.

Warum Performance im SaaS- und B2B-Sektor über den Umsatz entscheidet

Der ROI-Hebel bei der Conversion Rate Optimization (CRO)

Performance ist die Basis jeder Conversion-Optimierung. Eine Studie von Google und Deloitte zeigt, dass schon eine Optimierung der mobilen Ladezeit um 0,1 Sekunden die Conversion Rate im Einzelhandel um 8,4 % und auf Dynamic-Seiten um bis zu 10,1 % steigert. Ein minimaler Unterschied mit enormer Auswirkung.

Investierst Du für Dein Unternehmen oder SaaS-Produkt monatlich fünf- bis sechsstellige Beträge in Paid Ads, verbrennt eine schlechte Performance einfach nur bares Geld. Ein optimierter Core Web Vital Score senkt die Absprungrate auf Deinen Landingpages und wandelt teuer eingekauften Traffic spürbar effizienter um.

Aber Vorsicht: Die beste Performance bringt nichts, wenn der gewonnene Traffic danach ziellos auf Deiner Seite verweilt. Damit Nutzer nicht sofort wieder abspringen, sondern strategisch zu Deinen Angeboten geleitet werden, brauchst Du im nächsten Schritt eine durchdachte interne Verlinkung. Erst das Zusammenspiel aus technischer Geschwindigkeit und intelligenter Linkstruktur führt den Nutzer flüssig durch die Buyers Journey. Die schnellste Website bringt Dir wenig, wenn der Nutzer danach nicht weiß, wohin er als Nächstes klicken soll.

SaaS-Usability und die Verringerung der Churn Rate

Im SaaS-Modell entscheidet die Benutzererfahrung nach dem Login über das Überleben des Produkts. Wenn das Dashboard beim Laden von Berichten stockt, haben die Nutzer im Kopf schon gekündigt, lange bevor sie den Button tatsächlich anklicken. Schlechte Core Web Vitals in geschlossenen Web-Apps führen zu Frustration und sinkendem Engagement. Gute Performance sorgt dafür, dass sich die Web-App so mühelos anfühlt wie eine native Desktop-Anwendung, nicht wie ein zusammengeklicktes Plugin-Konstrukt.

Performance-Engineering: So optimieren wir Web-Infrastrukturen systematisch

Oberflächliche Kosmetik wie das nachträgliche Komprimieren von Bildern reicht im Enterprise- und SaaS-Segment nicht aus. Klassische WordPress-Installationen mit zwanzig aktiven Plugins erreichen diese Werte grundsätzlich nicht, egal wie viele Cache-Plugins man darauf wirft. Erstklassige Core Web Vitals erfordern fundamentale architektonische Eingriffe von Anfang an, nicht nachträgliches Flicken.

LCP-Optimierung: Daten nah an den Nutzer bringen

• Edge-Netzwerke nutzen: Moderne Hosting-Architekturen wie Cloudflare Workers oder Vercel Edge verteilen die Rechenleistung weltweit. Die Time to First Byte (TTFB) sinkt auf ein Minimum.
• Render-Blocking Resources eliminieren: Kritisches CSS laden wir inline, während nicht-relevantes JavaScript asynchron (defer) läuft.
• Priority Hints setzen: Mit fetchpriority="high" auf dem Haupt-Hero-Image weiß der Browser sofort, welches Asset absolute Priorität hat.

CLS-Beseitigung: Layouts fest zementieren

• Maßangaben erzwingen: Jedes Bild und jeder Video-Container braucht feste width- und height-Attribute oder CSS-Aspect-Ratios. Der Browser reserviert den Platz, noch bevor das Medium geladen ist.
• Dynamic Content abfangen: Dynamische Elemente wie Cookie-Banner oder Newsletter-Formulare dürfen niemals bestehenden Content verschieben. Hier arbeiten wir mit präzisen Platzhaltern (Skeleton Screens).

INP-Tuning: Den Main-Thread entlasten

• JavaScript-Bloat reduzieren: Moderne Frameworks laden oft zu viel Code auf einmal. Konsequentes Code-Splitting sorgt dafür, dass nur das geladen wird, was gerade gebraucht wird.
• Lange Tasks aufbrechen: Blockiert JavaScript den Main-Thread länger als 50ms, ruckelt das Interface spürbar. Über APIs wie requestIdleCallback() oder Web Worker lagern wir komplexe Berechnungen in den Hintergrund aus.

Wie Du Deine eigenen Werte überhaupt misst

Bevor Du optimierst, musst Du wissen, wo Du stehst. Google PageSpeed Insights liefert Dir sowohl Lab Data als auch, sofern genug Traffic vorhanden ist, echte Field Data aus CrUX für Deine konkrete URL. Für die technische Tiefenanalyse arbeiten wir zusätzlich mit den Chrome DevTools (Performance-Tab) und WebPageTest, um exakt zu sehen, welcher einzelne Request oder welches Skript eine Metrik ausbremst.

Wichtig für Unternehmen mit mehreren Domains oder Subdomains: Die Google Search Console zeigt unter "Core Web Vitals" eine aggregierte Übersicht über alle Deine URLs hinweg und gruppiert Probleme nach Ursache. So siehst Du auf einen Blick, ob zum Beispiel eine ganze Vorlage für Produktseiten unter einem schlechten CLS-Wert leidet, statt jede Seite einzeln zu prüfen.

Die wichtigsten Learnings auf einen Blick

• LCP, CLS und INP sind keine Entwickler-Spielerei, sondern feste Ranking-Faktoren mit direktem Einfluss auf Absprungrate und Umsatz.
• Field Data aus CrUX zählt fürs Ranking, Lab Data aus Lighthouse dient nur zum Debuggen während der Entwicklung.
• Oberflächliche Kosmetik wie Bildkompression reicht im Enterprise-Segment nicht, echte Performance braucht architektonische Eingriffe von Anfang an.
• Performance ohne durchdachte interne Verlinkung verpufft, schneller Traffic muss auch strategisch geführt werden.