Ein großes Bild ist sofort sichtbar, wird aber erst spät geladen. Bevor du seine Qualität weiter reduzierst, prüfe, wann der Browser die Datei überhaupt entdeckt. loading="lazy" ist für ein wichtiges Bild im ersten sichtbaren Bereich häufig die falsche Ausgangseinstellung.
LCP (Largest Contentful Paint) misst, wann der größte sichtbare Bild- oder Textinhalt erscheint. Das gemessene Element ist nicht auf jedem Gerät identisch. Eine Desktop-Messung kann ein anderes LCP-Element erkennen als die mobile Ansicht. Untersuche die tatsächliche Seite, statt aus der Größe einer Designdatei auf das Messergebnis zu schließen.
Die Entdeckung der Ressource prüfen
Im Performance-Werkzeug deines Browsers identifizierst du das LCP-Element. Suche dessen Bilddatei im Netzwerkprotokoll. Wird sie bereits aus dem ersten HTML erkannt, erst aus einer CSS-Datei oder noch später durch ein Skript?
Ein einfaches HTML-Beispiel für ein unmittelbar sichtbares Motiv:
<img src="/images/hero.webp" width="1200" height="750"
alt="Ansicht des Produkts" fetchpriority="high">
Die Maße sind Beispielwerte für ein Motiv mit diesem Seitenverhältnis. fetchpriority ersetzt weder passende Dateigrößen noch einen früh entdeckbaren Bildpfad. Setze die hohe Priorität nicht auf jedes Vorschaubild gleichzeitig.
Vergleiche vor und nach der Änderung dieselbe mobile Ansicht mit deaktiviertem Browsercache. Notiere Ressourcenerkennung, Dateigröße und LCP-Element. Ein einzelner schnellerer Laborlauf belegt noch keine Verbesserung bei tatsächlichen Besuchern. Prüfe außerdem, ob wichtige Bilder nach einem Theme- oder CMS-Wechsel wieder automatisch als lazy markiert werden. Die Ladezeiten-Analyse grenzt solche Auslieferungsfragen von reiner Bildgestaltung ab.