Core Web Vitals sind ein Bilder-Problem – und wie Fairu es löst

Wenn dein Largest Contentful Paint im roten Bereich liegt, ist die Wahrscheinlichkeit hoch, dass ein Bild daran schuld ist. Das größte Element above the fold ist auf den meisten Seiten ein Hero-Bild, ein Produktfoto oder ein redaktionelles Foto – und genau dieses eine Element ist es, was Google misst. Liegst du hier falsch, scheiterst du an dem einen Core Web Vital, an dem die meisten Seiten ohnehin schon scheitern.

Dieser Artikel geht die drei Core Web Vitals als Erfolgskriterien durch – was jedes davon tatsächlich misst, was es von deiner Bilder-Auslieferung verlangt, und wo dich ein selbst gehostetes CMS oder Framework mit der Handarbeit allein lässt. Anschließend zeigt er, wo fairu.app als Optimierungsschicht zwischen deinem CMS und deinen Nutzern ansetzt.

Die drei Kriterien, und
warum Bilder den Ausschlag geben

Google bewertet Core Web Vitals anhand des 75. Perzentils echter Nutzerdaten, getrennt nach Mobile und Desktop. Drei Messwerte entscheiden über das Urteil.

Largest Contentful Paint (LCP) misst die Ladegeschwindigkeit. Der Schwellenwert für „gut" liegt bei 2,5 Sekunden oder weniger; 2,5–4,0 s gelten als „verbesserungswürdig", alles über 4,0 s als „schlecht". LCP ist von den dreien am schwersten zu bestehen – aktuelle Felddaten zeigen, dass nur rund 55–62 % der mobilen Origins im grünen Bereich liegen – gerade weil er von der gesamten Kette abhängt: Serverantwort, Netzwerk, Bild-Bytes, CSS, JavaScript und Rendering. Ein Engpass irgendwo zerstört den Score, und bei den meisten Seiten ist dieser Engpass das Hero-Bild.

Cumulative Layout Shift (CLS) misst die visuelle Stabilität, mit einem „guten" Schwellenwert unter 0,1. Bilder, die ohne explizite Abmessungen geladen werden, sind eine klassische Ursache: Der Browser reserviert keinen Platz und schiebt das Layout dann nach unten, sobald die Bytes eintreffen.

Interaction to Next Paint (INP) misst die Reaktionsfähigkeit (unter 200 ms gilt als „gut"). Er ist ein reiner JavaScript- und Main-Thread-Messwert, Bilder wirken sich also nur indirekt aus – aber überdimensionierte Bilder, die das Netzwerk blockieren oder aufwendige Dekodierarbeit erzwingen, rauben trotzdem Zeit auf dem Main Thread.

Bei LCP zahlt sich Bildoptimierung am meisten aus, deshalb liegt der Fokus im Folgenden hier.

Erfolgskriterium 1:
Die kleinstmöglichen, korrekten Bytes ausliefern

Das schnellste LCP-Bild ist jenes, das für das anfragende Gerät bereits die richtige Größe, das richtige Format und die richtige Kompressionsstufe hat. In der Praxis bedeutet das:

• Moderne Formate mit Fallback. AVIF und WebP schlagen JPEG bei gleicher Qualität regelmäßig um 30–60 %. Aber du brauchst eine Aushandlung pro Anfrage – AVIF für Browser, die es akzeptieren, WebP oder JPEG für alle anderen.

• Korrekte Abmessungen pro Breakpoint. Ein 4000-px-Original, das an ein 390-px-Handy-Viewport ausgeliefert wird, verschwendet Bandbreite und Dekodierzeit. Jeder Breakpoint braucht seine eigene Variante.

• Abgestimmte Kompression. Überall Qualität 90 zu verwenden ist bequem, aber nicht durchdacht. Fotografische Inhalte vertragen aggressive Kompression, die flache UI-Grafiken nicht verkraften.

Das von Hand zu machen bedeutet eine Build-Time-Image-Pipeline (sharp, libvips, imgproxy) plus eine srcset/sizes-Matrix, die du für immer pflegst. Das funktioniert, aber es ist Infrastruktur, die du selbst betreiben, debuggen und skalieren musst.

Genau diese Ebene ersetzt Fairu. Du lädst das Original einmal hoch; Fairu übernimmt Resizing, Cropping und Formatkonvertierung on the fly und liefert das Ergebnis über ein europäisches CDN aus. Die Kompression läuft automatisch – Fairu berichtet von Dateigrößen-Reduktionen von bis zu 66 %, und genau das entscheidet, ob ein Hero-Bild ins 2,5-Sekunden-Budget passt oder nicht. Formataushandlung und Variantengenerierung passieren zur Laufzeit der Anfrage, du musst also keine Build-Pipeline oder srcset-Tabelle pflegen.

Zwei Details in diesem Snippet sind speziell für LCP wichtig: format=webp liefert eine WebP-Variante aus, die JPEG bei gleicher Qualität deutlich schlägt und von praktisch jedem modernen Browser unterstützt wird. Fairu unterstützt außerdem AVIF (format=avif) für noch kleinere Dateien, wo gewünscht, sodass du das Format explizit pro Anwendungsfall wählen kannst. Das zweite Detail ist fetchpriority="high", das dem Browser signalisiert, den Hero-Download zu priorisieren. Google Flights hat damit LCP um rund 700 ms gesenkt – allein mit diesem einen Attribut. Das hilft aber nur, wenn die dahinterliegenden Bytes bereits klein sind, und genau das übernimmt Fairu.

Erfolgskriterium 2:
Schnell und nah ausliefern

Kleine Bytes verlieren trotzdem, wenn sie weit reisen müssen. LCP umfasst Time-to-First-Byte und Netzwerktransfer, also sind Origin-Distanz und Cache-Verhalten Teil des Scores.

Ein CMS orchestriert Inhalte; es optimiert nicht die Auslieferung. Bilder direkt vom Origin deiner Anwendung auszuliefern bedeutet, dass jede Anfrage mit deinem App-Server konkurriert und von einem einzigen Standort aus reist. Fairu setzt sich als Delivery-Layer davor: Jede hochgeladene Datei bekommt einen einsatzbereiten CDN-Link, gecacht und von europäischen Edge-Standorten ausgeliefert. Für ein Publikum im DACH-Raum ist diese Nähe ein direkter TTFB-Gewinn, und sie entlastet dein Origin komplett vom Bild-Traffic – was deinem Server auch hilft, schneller auf die HTML-Anfrage zu antworten, die die LCP-Uhr startet.

Der Integrationsaufwand ist bewusst nahe null: REST, GraphQL (mit Federation) oder offizielle SDKs für PHP/Laravel, TypeScript und Dart/Flutter. Es gibt außerdem ein Statamic-Addon und eine S3-kompatible Storage-Schicht (RAKU), sodass du es in einen bestehenden Stack einbauen kannst, ohne deine Architektur umzubauen.

Erfolgskriterium 3:
Das Layout stabil halten (CLS)

CLS ist der günstige Gewinn, den viele vergessen. Die Lösung sind immer vorhandene intrinsische Abmessungen, damit der Browser Platz reserviert, bevor das Bild eintrifft. Achte auf die width- und height-Attribute im Snippet oben – sind diese gesetzt, berechnet der Browser das Seitenverhältnis und hält den Platz frei, und das Bild rutscht ein, ohne irgendetwas zu verschieben.

Fairu hilft hier durch Konsistenz: Weil du explizite Abmessungen pro Variante anfragst, passt das ausgelieferte Bild genau in die reservierte Box. Und die Fokuspunkt-Steuerung sorgt dafür, dass eine aggressiv zugeschnittene responsive Variante das Motiv trotzdem korrekt rahmt, statt den wichtigen Teil abzuschneiden – so kannst du für Mobile hart zuschneiden (kleinere Bytes, besseres LCP), ohne die Bildkomposition zu opfern.

Jenseits der Messwerte: warum das für SEO wichtig ist

Core Web Vitals sind ein bestätigtes Google-Ranking-Signal. Sie sind nicht das primäre Signal – Content-Relevanz gewinnt nach wie vor – aber sie fungieren als Tiebreaker zwischen vergleichbaren Seiten und als Zugangsvoraussetzung für Flächen wie das Top-Stories-Karussell. In umkämpften Nischen ist es ein messbarer Vorteil, zu bestehen, wenn die Konkurrenz das nicht tut. Und die Korrelation mit dem Nutzerverhalten ist gut belegt: Eine Verbesserung der mobilen Geschwindigkeit um 0,1 s wurde mit einem Anstieg der Retail-Conversions um 8,4 % in Verbindung gebracht, und ein großer Publisher meldete nach einer LCP-Verbesserung einen Rückgang der Absprungrate um 43 %.

Die praktische Erkenntnis: Bildoptimierung ist keine kosmetische Spielerei, sondern der wirkungsvollste Hebel, den du bei dem Core Web Vital hast, an dem die meisten Seiten scheitern.

Wo Fairu in deine Pipeline passt

Fairu ist die Optimierungsschicht zwischen deinem CMS und deinen Nutzern. Du behältst dein CMS, dein Framework und deinen redaktionellen Workflow. Fairu übernimmt den Teil, der mühsam zu bauen und teuer im Betrieb ist, wenn man ihn richtig machen will:

• Bytes – automatische Kompression und Konvertierung in moderne Formate, on the fly.

• Varianten – Resizing pro Breakpoint und fokuspunkt-bewusstes Cropping, ganz ohne Build-Schritt.

• Delivery – europäisches CDN mit einem einsatzbereiten Link pro Asset, das dein Origin entlastet.

Das Ergebnis ist ein LCP-Bild, das klein, korrekt dimensioniert, in einem modernen Format und über den Edge ausgeliefert ist – das komplette Rezept, um bei dem Kriterium zu bestehen, an dem die meisten Seiten scheitern. Die Messwerte verbessern sich, weil die eigentliche Arbeit endlich gemacht wird; du musst nur die Pipeline nicht selbst bauen.

Wenn du den Effekt auf deinen eigenen Seiten sehen willst, starte eine kostenlose Testphase oder buche eine Demo. Richte ein Hero-Bild auf Fairu, führe Lighthouse erneut aus und beobachte, wie sich der LCP-Balken bewegt.

Nutzt du Statamic?