LCP-Bild priorisieren und nicht lazy-loaden

Cookbook: Ziel und Ergebnis

Das tatsächlich größte sichtbare Bild beginnt früh zu laden, wird nicht lazy geladen und konkurriert nicht mit vielen unnötig vorab geladenen Ressourcen.

Rezept: Schritt für Schritt

1. LCP-Element in PageSpeed/DevTools für Mobil und Desktop bestimmen; es kann je Layout wechseln.
2. Sicherstellen, dass die Bild-URL früh im HTML steht und nicht erst durch JavaScript oder CSS-Hintergrund entdeckt wird.
3. loading="eager" bzw. kein lazy loading und bei echtem LCP fetchpriority="high" einsetzen.
4. Nur wenn die Ressource sonst spät entdeckt wird, einen passenden preload mit korrektem imagesrcset/imagesizes prüfen.

Rechenweg oder Entscheidungsregel

LCP ≈ TTFB + Ressourcen-Entdeckungsverzögerung + Downloadzeit + Renderverzögerung

Priorisierung reduziert vor allem Entdeckungs- und Queue-Zeit. Ein 2-MB-Bild bleibt auch mit hoher Priorität groß.

Praxisbeispiel

Vorher: TTFB 500 ms, Bild bei 1.200 ms entdeckt, Download 900 ms, Render 300 ms → etwa 2,4 s. Nach frühem HTML-img und Priorität: Entdeckung 600 ms, gleicher Download → etwa 1,8 s. Danach Dateigröße separat optimieren.

Prüfen, ob es funktioniert

• Netzwerkwasserfall zeigt frühen Start ohne doppelte Bildanforderung.
• Nur ein oder sehr wenige high-Prioritätsressourcen konkurrieren.
• LCP verbessert sich wiederholt; CLS und visuelle Qualität bleiben stabil.

Rollback

Neue Priorität/Preload entfernen und Cache purgen. Lazy Loading für dieses konkrete Bild nur wiederherstellen, wenn Messung zeigt, dass es nicht Above the Fold/LCP ist.

Das Problem

Ein Hero-Bild kann erst spät starten, wenn es als CSS-Hintergrund versteckt, per JavaScript eingesetzt oder mit Lazy Loading verzögert wird. LCP umfasst außerdem TTFB und Renderverzögerung; ein kleines Bild allein garantiert keinen guten Wert.

Empfehlung

Nutze ein echtes <img> mit src/srcset, passenden Abmessungen und ohne loading="lazy". WordPress erkennt wahrscheinliche LCP-Bilder und ergänzt seit 6.3 automatisiert fetchpriority="high" in geeigneten Fällen. Manuelle Priorisierung nur für das gemessene Hauptelement einsetzen.

Preload mit Maß

Ein Preload kann helfen, wenn die Ressource sonst erst über CSS entdeckt wird. Zu viele Preloads konkurrieren um Bandbreite und entwerten Prioritäten. URL, imagesrcset und tatsächlich gerenderte Variante müssen übereinstimmen.

Erfolgskontrolle

Im Netzwerk-Wasserfall muss die LCP-Ressource früh entdeckt und hoch priorisiert sein. Prüfe LCP-Unterteile, nicht nur Gesamtscore, und teste Mobilfunkbedingungen.

Quellen und Prüfstand

• WordPress 6.3: Bild-Performance
• Google: LCP optimieren
• Google: Fetch Priority

Inhalt fachlich geprüft am 17. August 2026. Konkrete Werte sind Ausgangspunkte, keine Universaldosierung.