21. Januar 2026
LCP killt Rankings? Bilder & Next.js: So optimierst du ohne Qualitätsverlust
LCP/CLS hängen oft an Bildern. Hier ist eine pragmatische Checkliste: Formate, Größen, Kompression, Lazy-Loading und typische Fehler.
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.
Schritt 1: Finde dein echtes LCP-Element
Typisch:
- Hero-Bild
- großer Heading-Block mit Webfont
- Slider/Video
Wenn’s ein Bild ist: perfekt, das ist gut fixbar.
Schritt 2: Richtige Größe statt nur Kompression
Der häufigste Fehler: ein 2500px Bild wird in 800px angezeigt.
- exportiere in realistischen Breakpoints
- nutze responsive Varianten
Schritt 3: AVIF/WebP (mit gesundem Pragmatismus)
- AVIF: top Kompression, manchmal etwas mehr CPU
- WebP: sehr solide
Schritt 4: Lazy-Loading richtig
- nicht lazy für LCP-Element
- lazy für Bilder weiter unten
Schritt 5: CLS verhindern
- reserviere Platz (Dimensionen)
- vermeide späte Font-Swaps ohne Fallback
Mehr Kontext: Core Web Vitals erklärt
Nächster Schritt
Wenn du willst, machen wir eine 30-Minuten Performance-Session und priorisieren die größten LCP/CLS-Bremsen.
Weiterlesen
Server Components vs Client Components: Das SEO- & Performance-Mindset für Next.js
Warum die richtige Aufteilung (Server/Client) dein JS-Budget, deine Core Web Vitals und am Ende auch deine Rankings beeinflusst.
Next.js SEO 2026 (App Router): Was wirklich zählt – technisch & praktisch
App Router, Metadata API, Server Components: So stellst du sicher, dass Google deine Next.js-Website sauber crawlt, rendert und richtig versteht.
GA4 & Alternativen 2026: Sauberes Setup mit Consent (ohne Datenmüll)
GA4 ist mächtig, aber schnell chaotisch. So entscheidest du zwischen GA4, Plausible & Co – und setzt Tracking mit Consent sauber auf.
Passend dazu
FAQ
Warum sind Bilder so oft das LCP-Element?
Weil Hero-Bilder groß sind und früh gerendert werden. Wenn sie schwer sind oder spät kommen, steigt LCP stark an.
Soll ich alles lazy-loaden?
Nein. Das LCP-Element sollte meist nicht lazy sein. Lazy ist gut für Inhalte unterhalb der Falz.
Welches Format ist 2026 Standard?
Meist AVIF oder WebP, fallback je nach Setup. Wichtig ist: korrekt skaliert + komprimiert.
Wie verhindere ich CLS durch Bilder?
Immer feste Dimensionen reservieren (width/height oder aspect-ratio) und Layout-Sprünge vermeiden.
Wie merke ich, welches Element LCP ist?
Über Lighthouse/CrUX/DevTools Performance-Panel – und indem du reale Daten (RUM) trackst.