Mein Hero ist ein Hintergrundbild: Warum es den LCP bremst und wie Sie das beheben (Divi, Elementor)

Ihr Hero ist ein Abschnitt in voller Breite mit einem Hintergrundbild, angelegt in Divi, Elementor oder einem anderen Builder. PageSpeed nennt diesen Abschnitt als Largest Contentful Paint-Element und führt „LCP-Anfrage-Erkennung“ unter seinen Warnungen auf. Sie haben das Bild bereits komprimiert. Es ist immer noch langsam.

Das Gewicht ist selten das Hauptproblem. Das Problem ist, wann der Browser erfährt, dass das Bild existiert.

Warum ein Hintergrundbild spät startet

Ein normales <img> steht im HTML: Der Browser entdeckt es in den ersten Bytes und kann es sofort anfordern. Ein Hintergrundbild lebt im CSS. Der Browser findet es erst nach vier Schritten:

• das HTML herunterladen;
• das Stylesheet herunterladen, das die Regel enthält, oft eine vom Builder erzeugte Datei pro Seite;
• die Styles anwenden und die Regel dem Abschnitt zuordnen;
• erst dann das Bild anfordern.

Zwei Gewohnheiten der Builder machen es schlimmer. Der Hintergrund hat oft keine Größenvarianten: eine 1920-Pixel-Datei für jeden Bildschirm, Smartphones eingeschlossen. Und viele Themes und Plugins laden Hintergründe per Lazy Loading, mit einem Skript, das das Bild hinzufügt, sobald der Abschnitt im Blickfeld ist. Wird dieses Skript selbst bis zur ersten Interaktion verzögert, wartet der Hero darauf, dass sich der Besucher bewegt.

Auf Ihrer Seite bestätigen

• Untersuchen Sie in den DevTools den Hero-Abschnitt und suchen Sie in den berechneten Styles nach background-image. Notieren Sie die URL der Datei.
• Laden Sie im Netzwerk-Panel mit mobiler Emulation neu und suchen Sie diese Datei: Sehen Sie, wie spät sie im Vergleich zum HTML und zu den Stylesheets startet.
• Prüfen Sie die Klassen und Attribute des Abschnitts auf ein Lazy-Loading-Merkmal, oft eine Klasse wie lazyload oder ein Attribut wie data-bg.

Lösung A (die beste): den Hero in ein echtes Bild verwandeln

Setzen Sie ein <img> in den Abschnitt, so positioniert, dass es ihn abdeckt. Es sieht gleich aus, und der Browser sieht es jetzt im HTML, kann eine Breite aus dem srcset wählen und ihm hohe Priorität geben:

<section class="hero">
  <img class="hero__bg" src="/uploads/hero-1920.webp"
       srcset="/uploads/hero-768.webp 768w, /uploads/hero-1920.webp 1920w"
       sizes="100vw" width="1920" height="900" alt="" fetchpriority="high">
  <div class="hero__content"><!-- Titel, Button --></div>
</section>

<style>
  .hero { position: relative; }
  .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
</style>

In den meisten Buildern ist das ein Bildmodul im Abschnitt mit demselben CSS oder ein eigener HTML-Block. Das leere alt hält es dekorativ, wie es der Hintergrund war.

Lösung B: den Hintergrund behalten, aber früh machen

Wenn das Design ein Hintergrund bleiben muss:

• Laden Sie ihn per Preload, mit einem Preload pro Gerät, falls der Builder auf Mobilgeräten einen anderen Hintergrund nutzt. Die Methode steht in unserem Leitfaden zum LCP-Bild pro Gerät.
• Nehmen Sie den Hero aus jedem Lazy Loading für Hintergründe heraus: in den Builder-Einstellungen, im Plugin, das es hinzufügt, oder indem Sie diesen Abschnitt ausnehmen.
• Geben Sie Smartphones eine kleinere Datei: Divi und Elementor erlauben beide ein anderes Hintergrundbild pro Gerät. Laden Sie dort eine Version in Mobilgröße hoch.
• Nehmen Sie die Regel des Heros ins Critical CSS auf, damit sie beim ersten Paint greift, statt auf das vollständige Stylesheet zu warten.

Das Ergebnis prüfen

• Netzwerk-Panel, mobile Emulation: Das Hero-Bild startet direkt nach dem HTML, nicht nach den Stylesheets.
• Seine Größe passt zum Gerät.
• Es erscheint, ohne dass Sie die Maus bewegen oder scrollen.

Mit Mantys Core

Zusammenfassung

• Ein Hintergrundbild wird spät entdeckt: HTML, dann CSS, dann Style-Zuordnung, dann das Bild.
• Es hat kein srcset, und Builder laden es oft per Skript mit Lazy Loading.
• Beste Lösung: ein echtes Bild, das den Abschnitt abdeckt, mit srcset und hoher Priorität.
• Sonst: Preload pro Gerät, kein Lazy Loading am Hero, eine Datei in Mobilgröße und seine Regel im Critical CSS.