Wie konkrete Designentscheidungen deine Core Web Vitals sabotieren – und was du in Webflow dagegen tun kannst.
Deine Website sieht toll aus. Die Animationen sind flüssig, der Hero ist perfekt, die Custom Font passt perfekt zum Branding. Und trotzdem zeigt Google sie kaum jemandem. Das klingt unfair – aber es hat einen konkreten, messbaren Grund.
Core Web Vitals Webdesign ist das Thema, das die meisten Webdesigner und Unternehmer ignorieren, bis es zu spät ist. Denn Google bewertet nicht, wie gut deine Website aussieht. Google bewertet, wie schnell sie lädt, wie stabil das Layout ist und wie schnell sie auf Nutzereingaben reagiert. Und genau diese drei Metriken werden direkt von deinen Designentscheidungen beeinflusst.
Core Web Vitals sind drei Messwerte, die Google nutzt, um die Nutzererfahrung einer Website zu bewerten. Sie sind kein nettes Extra – seit dem März-2026-Update fließen sie als Ranking-Faktor direkt in die Google-Suchergebnisse ein.
LCP (Largest Contentful Paint) misst, wie lange es dauert, bis das größte sichtbare Element auf der Seite vollständig geladen ist – meistens dein Hero-Bild oder deine Hauptüberschrift. Google-Zielwert: unter 2,0 Sekunden.
INP (Interaction to Next Paint) misst, wie schnell deine Website auf Klicks, Taps oder Tastatureingaben reagiert. Ein Button, der sich träge anfühlt, verschlechtert diesen Wert. Google-Zielwert: unter 200 Millisekunden.
CLS (Cumulative Layout Shift) misst, wie stark sich Elemente auf der Seite unerwartet verschieben während sie lädt – zum Beispiel wenn eine Custom Font lädt und dabei den Text verschiebt. Google-Zielwert: unter 0,1.
Das März-2026-Update hat zwei wichtige Veränderungen gebracht: Erstens wurde der LCP-Grenzwert für "Good" von 2,5 auf 2,0 Sekunden gesenkt. Wer vorher knapp im grünen Bereich war, fällt jetzt in "Needs Improvement". Zweitens wurde INP zum gleichrangigen Ranking-Signal neben LCP und CLS erhoben – früher war es noch ein experimenteller Wert.
Das Ergebnis ist deutlich: Laut einer Analyse von digitalapplied.com aus März 2026 verloren Sites mit LCP über 2,5s durchschnittlich 2–4 Positionen bei wettbewerbsstarken Suchanfragen. Nur 43% der mobilen und 54% der Desktop-Websites bestehen aktuell alle drei Tests.
Hero-Bilder sind der häufigste LCP-Killer – und gleichzeitig das Element, das Webdesigner am liebsten mit hoher Qualität und großem Format präsentieren. Das Spannungsfeld ist real, aber lösbar.
Das Problem: Browser laden Bilder standardmäßig "lazy" – also erst, wenn sie in den sichtbaren Bereich scrollen. Beim LCP-Element ist das fatal, weil Google genau darauf wartet. Jede Millisekunde, die das Hero-Bild zu spät erscheint, verschlechtert deinen LCP-Wert.
In Webflow ist die Lösung überraschend einfach. Wähle dein Hero-Bild im Designer aus, öffne die Element-Einstellungen und füge unter "Custom Attributes" folgendes hinzu: loading = eager. Damit überschreibst du das Standard-Lazy-Loading und sagst dem Browser explizit, dieses Bild sofort zu laden.
Zusätzlich lohnt sich das Attribut fetchpriority = high – das signalisiert dem Browser, dieses Bild gegenüber anderen Ressourcen zu priorisieren.
WebP-Bilder sind im Schnitt 25–35% kleiner als vergleichbare PNGs oder JPEGs bei gleicher visueller Qualität. Bei einem typischen Hero-Bild von 800KB bedeutet das eine Einsparung von 200–280KB – was bei einer Ladezeit von unter 2 Sekunden durchaus den Unterschied machen kann.
Webflow unterstützt WebP-Upload nativ. Lade deine Bilder als WebP hoch oder nutze Tools wie Squoosh, um bestehende Bilder zu konvertieren.
Custom Fonts sind wunderschön. Sie machen Branding erkennbar und verleihen Websites Charakter. Aber ohne die richtigen Einstellungen verursachen sie einen der häufigsten CLS-Probleme überhaupt: den Font-Flash.
Das passiert so: Dein Browser lädt zunächst einen System-Fallback-Font, rendert den Text damit – und tauscht ihn dann aus, sobald die Custom Font heruntergeladen ist. Wenn die beiden Fonts unterschiedliche Zeichenbreiten haben, verschiebt sich das gesamte Layout. Das verschlechtert deinen CLS-Score messbar.
font-display: swap ist der Standard-Fix: Er zeigt zuerst den Fallback-Font und wechselt dann zur Custom Font. Das verhindert unsichtbaren Text, löst aber das Layout-Shift-Problem nicht vollständig. Wenn dein Fallback-Font deutlich breiter oder schmaler als die Custom Font ist, entstehen trotzdem Shifts.
Die sauberere Lösung: Wähle einen Fallback-Font mit möglichst ähnlichen Zeichenmetriken und nutze size-adjust, ascent-override, descent-override und line-gap-override in deiner CSS-Font-Deklaration. Diese Werte passen den Fallback-Font so an, dass er nahezu identischen Platzbedarf hat wie die Custom Font – der Shift beim Wechsel ist dann minimal bis unsichtbar.
Für Google Fonts kannst du mit dem Tool "Fallback Font Generator" von Malte Ubl (gwfh.rknight.me) automatisch die passenden Override-Werte berechnen lassen.
Animationen sind das Herzstück vieler moderner Webflow-Sites. Aber nicht alle CSS-Eigenschaften sind gleich: Manche sind für den Browser kostenlos zu animieren, andere lösen aufwendige Neuberechnungen aus – und das schlägt direkt auf den INP-Score durch.
Die ehrliche Antwort: Du musst nicht auf Animationen verzichten. Du musst nur die richtigen CSS-Eigenschaften nutzen.
Nur zwei CSS-Eigenschaften laufen auf dem Browser in einem separaten Compositor-Thread – ohne die Hauptberechnungsschicht zu belasten: transform und opacity. Alles andere – width, height, margin, padding, top, left, background-color – erzwingt sogenannte Repaints oder Reflows, die die Browser-Hauptschicht blockieren und den INP-Score verschlechtern.
Ein Button, der beim Hover seine Breite animiert? Problematisch. Der gleiche Button, der stattdessen per transform: scale() wächst? Kein Problem.
Für Webflow-Interactions bedeutet das: Nutze für Hover-Effekte und Scroll-Animationen bevorzugt transform (translateX, translateY, scale, rotate) und opacity. Vermeide Animationen von width, height, border-radius, box-shadow (mit Blur) und Farb-Animationen komplexer Gradienten.
Was ich in der Praxis häufig sehe: Dropdown-Menüs, die ihre Höhe von 0 auf auto animieren. Das ist ein klassischer CLS- und INP-Killer. Ersetze height: 0 → height: auto durch ein Wrapper-Div mit overflow: hidden und animiere stattdessen transform: translateY(-20px) → transform: translateY(0) plus opacity: 0 → opacity: 1.
Bevor du anfängst zu optimieren, brauchst du eine Baseline. Zwei Tools sind dabei unverzichtbar – mit wichtigen Unterschieden.
Lighthouse (in Chrome DevTools oder als CLI) ist ein synthetischer Test: Er simuliert eine Seite unter definierten Bedingungen. Ideal zum Entwickeln und Debuggen, weil du sofort Feedback auf Änderungen bekommst.
PageSpeed Insights (pagespeed.web.dev) zeigt zusätzlich zu Lighthouse-Daten auch reale Nutzerdaten aus dem Chrome User Experience Report (CrUX). Diese Daten sind die, die Google tatsächlich für das Ranking nutzt. Wenn CrUX-Daten verfügbar sind – das ist der Fall ab etwa 1.000 monatlichen Pageviews – zeigt PSI einen separaten "Field Data"-Bereich.
Optimiere in dieser Reihenfolge: Zuerst LCP (größter Ranking-Impact, oft am einfachsten zu verbessern), dann CLS (in Webflow meist mit Font- und Bildeinstellungen lösbar), dann INP (erfordert tiefere Analyse der Interactions).
Ein LCP-Score von 2,0–4,0s bringt dich in "Needs Improvement". Über 4,0s bist du bei "Poor" – und verlierst bei wettbewerbsstarken Anfragen deutlich.
Beeinflusst ein schlechter LCP wirklich mein Ranking?
Ja, und seit März 2026 stärker als je zuvor. Google hat den LCP-Grenzwert für "Good" auf 2,0 Sekunden gesenkt und INP zum gleichrangigen Signal erhoben. In Wettbewerbsbranchen – Anwälte, Ärzte, lokale Dienstleister, E-Commerce – ist der Ranking-Unterschied zwischen "Good" und "Poor" messbar. Laut der PSI-Studie von digitalapplied.com verloren Sites mit schwachem LCP 2–4 Positionen bei kommerziellen Suchanfragen.
Muss ich auf Animationen verzichten, um gut zu ranken?
Nein. Entscheidend ist nicht ob du animierst, sondern wie. transform und opacity sind für den Browser kostenlos – Scroll-Animationen, Fade-Ins und Slide-Effekte auf Basis dieser Properties haben keinen messbaren INP-Impact. Problematisch werden Animationen erst, wenn du Eigenschaften wie width, height oder margin animierst, die Reflows auslösen.
Gilt das auch für Webflow-Sites oder nur für selbst gehostete Seiten?
Core Web Vitals gelten für jede Website, unabhängig von der Plattform. Webflow-Sites haben jedoch einige spezifische Optimierungsmöglichkeiten: Das Deaktivieren von Lazy Loading per Custom Attribute, die konsequente Nutzung von WebP-Uploads und das Webflow-eigene CSS-Bundling. Webflow-Hosting ist solide – die Unterschiede entstehen meistens durch Designentscheidungen, nicht durch die Plattform selbst.
Wie schnell verbessert sich mein Ranking nach dem Fix?
Google aktualisiert die CrUX-Daten, die ins Ranking einfließen, rollierend über 28 Tage. Das bedeutet: Verbesserungen wirken sich frühestens nach 4 Wochen auf die Ranking-Signale aus, und es kann bis zu 3 Monate dauern, bis sich ein stabiler Trend in den Suchergebnissen zeigt. Wichtig: Messe mit PageSpeed Insights im "Lab Data"-Bereich sofort nach der Optimierung, um zu bestätigen, dass der Fix technisch greift.
Nicht sicher, wie deine Website bei den Core Web Vitals abschneidet? Ich führe einen kostenlosen Performance-Check durch und zeige dir genau, wo Google deine Site ausbremst.
.png)
