LCP killt Rankings? Bilder & Next.js: So optimierst du ohne Qualitätsverlust

Viele Websites verlieren unnötig Performance – nicht wegen „zu wenig Technik“, sondern wegen Bildern. Und Performance ist 2026 nicht nur UX, sondern messbarer SEO- und Conversion-Faktor.

Wenn du gerade denkst: „Ok … aber was ist LCP überhaupt?“ – genau darum geht’s hier.

Was ist LCP (Largest Contentful Paint)?

LCP misst, wie schnell der größte sichtbare Inhalt im Viewport geladen und gerendert ist.

In der Praxis ist das sehr oft:

• Hero-Bild
• großer Heading-Block mit Webfont
• Slider/Video

Warum das wichtig ist: Wenn der Hauptinhalt „spät“ kommt, fühlt sich die Seite langsam an – selbst wenn Header/Navigation schon sichtbar sind.

Als grobe Orientierung (Google „good“): LCP < 2,5s.

Mehr Grundlagen (inkl. Messung Felddaten vs. Lighthouse): Core Web Vitals erklärt

Bevor du optimierst: So findest du das echte LCP-Element

Du willst nicht „irgendwelche Bilder“ optimieren, sondern das eine Element, das wirklich den LCP treibt.

1) Schnellcheck mit Lighthouse (Lab)

• Lighthouse/PageSpeed Insights öffnen
• In den Diagnosen nach „Largest Contentful Paint element“ schauen

2) Sicherer in DevTools (Debug)

• Chrome DevTools → Performance aufnehmen
• In den Timings/Events das LCP-Event öffnen
• Element identifizieren (oft ein img / Hero)

Wenn dein LCP ein Bild ist: sehr gut – das ist meistens der schnellste Hebel.

Warum Bilder LCP so häufig „kaputt machen"

Typische Gründe:

• Zu groß ausgeliefert: ein 2500px-Bild wird in 800px angezeigt
• Zu spät geladen: falsches Lazy-Loading oder kein Preload
• Falscher Zuschnitt: Browser lädt mehr als er braucht
• Format/Kompression nicht passend: PNG/JPG ohne moderne Optimierung
• Render-Blocking drumherum: zu viel JS/CSS/Third-Party vor dem Hero

Der wichtigste Mindset-Shift:

LCP optimierst du nicht „durch Kompression allein“, sondern durch die richtige Datei in der richtigen Größe zur richtigen Zeit.

Schritt-für-Schritt: LCP-Bilder in Next.js sauber optimieren

Schritt 1: Bildgröße richtig ausliefern (der größte Hebel)

Der häufigste Fehler: Ein riesiges Bild wird runterskaliert, statt passend exportiert.

Ziel:

• Export/Source so wählen, dass der Browser nicht „zu viel“ laden muss
• responsive Auslieferung über sinnvolle Breakpoints (Mobile zuerst)

In Next.js erledigst du das am saubersten mit next/image (responsive srcset) + einem korrekten sizes.

Schritt 2: next/image richtig verwenden (inkl. sizes)

Ein häufiger LCP-Killer ist ein fehlendes oder falsches sizes: Dann wählt der Browser u.U. eine zu große Variante.

Beispiel (Hero-Bild, Above-the-fold):

import Image from "next/image";

export function HeroImage() {
  return (
    <Image
      src="/assets/hero.jpg"
      alt="Beispiel: Hero-Bild"
      width={1600}
      height={900}
      priority
      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 90vw, 1200px"
    />
  );
}

Wichtige Regeln dazu:

• width/height setzen → reserviert Platz und hilft gegen CLS
• sizes beschreibt wie groß das Bild im Layout wirklich ist
• priority nur für das echte LCP-/Hero-Element nutzen (nicht „für alles“)

Schritt 3: Lazy-Loading korrekt (LCP ist fast nie „lazy")

Faustregel:

• LCP/Hero: nicht lazy → eher priority
• Unterhalb der Falz: lazy ist gut (Standard ist in vielen Fällen ok)

Wenn dein Hero „lazy“ ist, sieht man oft genau das Muster: Seite wirkt leer → LCP steigt.

Schritt 4: Formate & Kompression (ohne Qualitätsverlust)

2026 ist für die meisten Sites realistisch:

• AVIF: meist beste Dateigröße, manchmal etwas mehr Dekodier-CPU
• WebP: sehr solider Standard

Next.js kann je nach Setup automatisch moderne Formate ausspielen.

Wichtig: Formate helfen – aber sie ersetzen nicht die korrekte Dimensionierung.

Schritt 5: „Rendern dauert“? Dann ist es nicht nur das Bild

Wenn das Bild eigentlich schnell geladen wird, LCP aber trotzdem hoch ist, liegt es oft an:

• hoher TTFB (Server/CDN)
• render-blocking CSS/JS
• Third-Party (Tracking, Chat, Maps) im kritischen Pfad

Dann lohnt sich der Blick auf den Wasserfall und TTFB: Caching/CDN & TTFB

CLS vermeiden: Damit dein LCP nicht „wackelt"

LCP und CLS hängen oft zusammen: Wenn das Hero erst Platz „findet“, springt das Layout.

Checkliste:

• Bilder mit festen width/height (oder stabiler aspect-ratio)
• keine späten Einblendungen, die den Hero nach unten drücken
• Fonts mit sinnvollen Fallbacks (Layout stabil halten)

Häufige Fehler (die LCP unnötig verschlechtern)

• Alles auf einmal priority: führt zu Konkurrenz im Netzwerk
• Kein sizes: Browser lädt zu große Varianten
• Hero als Background-Image: schwerer zu priorisieren/optimieren als next/image
• Image in einem Container ohne feste Höhe: kann CLS verursachen
• Third-Party im Above-the-fold: macht das Hero „später fertig“

Mini-Guide: So gehst du in 15 Minuten vor

1. LCP-Element identifizieren (Lighthouse/DevTools)
2. Wenn’s ein Bild ist: next/image + korrektes sizes
3. Hero bekommt priority, Rest nicht
4. Prüfen: wird die richtige Bildvariante geladen (Network)
5. CLS checken: Platz reserviert?

Wenn du die Grundlagen einmal sauber aufsetzt, ist LCP in vielen Next.js-Projekten kein Dauerthema mehr.

Nächster Schritt

Wenn du willst, machen wir eine 30-Minuten Performance-Session und priorisieren die größten LCP/CLS-Bremsen.

• Kontakt
• Webseiten
• Services