Wie Bilder Core Web Vitals beeinflussen - und wie Sie es beheben
Bilder sind für die meisten LCP-Fehler (Largest Contentful Paint) verantwortlich. Wenn Ihre Core Web Vitals rot sind, sind Ihre Bilder wahrscheinlich der Grund. Hier erfahren Sie genau wie Sie es beheben.
Jetzt ausprobieren - kostenlos, ohne Anmeldung.
Smart Compress Images →Bilder und LCP (Largest Contentful Paint)
LCP misst wann das größte sichtbare Element fertig geladen ist. Für die meisten Seiten ist das ein Bild. Google will LCP unter 2,5 Sekunden.
- WebP/AVIF verwenden: 25-50% kleinere Dateien = schnellerer Download. Jetzt konvertieren.
- Bilder skalieren: Die richtige Größe für den Container liefern. Hier skalieren.
- Hero-Bilder vorladen:
<link rel="preload" as="image" href="hero.webp"> - CDN verwenden: Bilder von Edge-Servern nahe der Nutzer ausliefern.
- fetchpriority setzen:
<img fetchpriority="high">für Bilder über dem Fold.
Bilder und CLS (Cumulative Layout Shift)
CLS misst unerwartete Layout-Verschiebungen. Bilder ohne Dimensionen lassen die Seite springen wenn sie laden.
- Immer width und height setzen:
<img width="800" height="600"> - aspect-ratio CSS verwenden:
aspect-ratio: 16/9;als moderne Alternative - Kein Lazy Loading über dem Fold: Kein
loading="lazy"auf Ihrem Hero-Bild
Die Schnell-Checkliste
- Smart Compress alle Bilder
- Skalieren auf tatsächliche Anzeigemaße
- width/height Attribute zu allen
<img>-Tags hinzufügen - LCP-Bild vorladen
- Alles unter dem Fold lazy loaden
- In PageSpeed Insights erneut testen
FAQ
Was ist ein guter LCP-Score?
Unter 2,5 Sekunden ist „Gut" (grün). 2,5-4 Sekunden ist „Verbesserungsbedarf" (gelb). Über 4 Sekunden ist „Schlecht" (rot). Bildoptimierung allein kann Sie oft von rot zu grün bringen.
Soll ich alle Bilder lazy loaden?
Nein! Lazy loaden Sie keine Bilder über dem Fold (besonders Ihr Hero/LCP-Bild). Nur Bilder lazy loaden die anfangs nicht sichtbar sind. Zu viel Lazy Loading schadet dem LCP.
Bereit? 100% kostenlos, läuft in Ihrem Browser.
Smart Compress Images →