Hintergrundbilder verzögern für schnellere Core Web Vitals

Hintergrundbilder verzögern

Hintergrundbilder sind selten gut für die Core Web Vitals. Hintergrundbilder sind nicht responsiv, Hintergrundbilder haben keinen Zugriff auf das native loading-Attribut und wir können die Priorität von Hintergrundbildern nicht nativ steuern.

Hintergrundbilder verursachen oft Probleme mit den Core Web Vitals. Das Verzögern (Deferring) unwichtiger Hintergrundbilder wird in vielen Fällen Ihren Largest Contentful Paint verbessern.

Zuletzt überprüft von Arjen Karel im Februar 2026

Laut dem Performance-Kapitel des Web Almanac 2024 (der neuesten Ausgabe mit Daten zu LCP-Elementtypen) haben 9 % der mobilen Seiten ein CSS-Hintergrundbild als LCP-Element. Von diesen laden nur 2 % es vorab (preload). Das bedeutet, dass auf etwa 1 von 11 Websites das wichtigste Bild auf der Seite für den Preload-Scanner des Browsers unsichtbar ist und spät zu laden beginnt.

Auf den von CoreDash überwachten Websites haben Seiten, bei denen das LCP-Element ein reguläres <img>-Tag ist, einen p75 LCP, der etwa 620 ms schneller ist als bei Seiten, bei denen das LCP-Element ein CSS-Hintergrundbild ist. Der Unterschied resultiert fast vollständig aus der Ressourcenladeverzögerung (resource load delay): Der Browser entdeckt ein <img> sofort über den Preload-Scanner, aber ein Hintergrundbild muss warten, bis das CSS heruntergeladen und geparst ist.

Viel zu oft sehe ich dieses Anti-Pattern mit Hintergrundbildern auf Websites. Insbesondere auf WordPress-Websites, die Page Builder wie Elementor verwenden.

1. Alle Bilder, einschließlich des LCP-Bildes (das Hero-Bild), werden mit Lazy Loading geladen
2. Einige Bildelemente, die nicht wirklich wichtig sind (wie ein Abstandshalter, ein Hintergrund für ein Suchfeld usw.), sind als Hintergrundbilder in einem Stylesheet verknüpft

In diesem kurzen Artikel werde ich Ihnen zeigen, wie Sie diese Hintergrundbilder mit Lazy Loading laden können, um andere, wichtigere Bilder auf der Seite zu priorisieren.

Ein Wort der Warnung!

Lassen Sie mich mit einem Wort der Warnung beginnen! Wenn das LCP-Element durch Hintergrundbilder verzögert wird, wurden Fehler gemacht und Sie sollten sie vorzugsweise auf die richtige Weise beheben (das LCP-Bild vorab laden (preload), das LCP-Bild nicht mit Lazy Loading laden, Hintergrundbilder ganz vermeiden). Leider gibt es manchmal einfach zu viel Legacy-Code und Sie haben kurzfristig keine andere Wahl, als die Website so gut wie möglich zu patchen. In diesem Fall können Sie einen Fix anwenden, wie ich ihn Ihnen heute hier präsentiere!

Methode 1: Alles verzögern

Die Methode, alles zu verzögern (defer everything), ist einfach eine barbarische Art, Dinge zu tun. Aber sie ist leicht zu implementieren und funktioniert gut, um die Core Web Vitals zu verbessern! Bei dieser Methode werden alle Hintergrundbilder verzögert, bis das Event DOMContentLoaded ausgelöst wurde. Dies gibt dem Browser ein wenig zusätzliche Zeit, um die wichtigsten Ressourcen zuerst zu planen.

Hier sind die beteiligten Schritte: Zuerst werden wir die background-image-Stileigenschaft für alle Elemente überschreiben, die ein Hintergrundbild haben. Sobald der DOM-Inhalt geladen wurde, werden wir diese Überschreibung wieder entfernen. Zu diesem Zeitpunkt werden die Bilder, die keine Hintergrundbilder sind, zum Download in die Warteschlange gestellt sein. Dies wäre ein großartiger Zeitpunkt, um dann die weniger wichtigen Hintergrundbilder für den Download in die Warteschlange zu stellen.

Der Code

Erstellen Sie zuerst einen Style und platzieren Sie ihn im HEAD der Seite. Es ist wichtig, dass dieser Style eine ID hat, da wir diese ID verwenden werden, um dieses Style-Tag später wieder zu entfernen. Natürlich könnten Sie anstelle des Platzhalters (*) auch nur die CSS-Klassennamen hinzufügen, die tatsächlich ein Hintergrundbild haben.

<style id="no-bg-img">
    *{background-image:none!important}
</style>

Als Nächstes, wenn der DOM-Inhalt geladen wurde, ist das LCP-Bild wahrscheinlich bereits für den Download in die Warteschlange gestellt. Zu diesem Zeitpunkt ist es sicher, die Hintergrundbilder in die Warteschlange zu stellen.

<script>
    window.addEventListener('DOMContentLoaded',function(){
        document.getElementById('no-bg-img').remove();
    })
</script>

Wenn der LCP nicht für einen frühen Download ausgelöst wird, liegt das wahrscheinlich an JavaScript. In diesem Fall könnten Sie versuchen, von 'DOMContentLoaded' auf das 'load'-Event zu wechseln.

In Tests von DebugBear reduzierte das Preloaden eines LCP-Elements mit Hintergrundbild den LCP von 3,4 Sekunden auf 1,7 Sekunden. Die Ressourcenladeverzögerung sank von 75 % der gesamten LCP-Zeit auf nur noch 2 %.

Methode 2: Hintergrundbilder mit Lazy Loading laden

Die Methode des Lazy Loadings von Hintergrundbildern ist etwas sanfter, fortgeschrittener und erfordert mehr persönliche Anpassung.

Es funktioniert wie folgt: Zuerst werden wir manuell alle Elemente mit einem Hintergrundbild identifizieren. Wir müssen diesen Elementen einen Klassennamen hinzufügen (.lazybg). Als Nächstes werden wir diese Elemente mit dem IntersectionObserver beobachten und sobald sie sich in der Nähe des sichtbaren Viewports befinden, werden wir das Hintergrundbild mit Lazy Loading laden.

Der Code

Erstellen Sie zuerst einen Style und platzieren Sie ihn im HEAD der Seite. Dieser Style sieht dem vorherigen Style ähnlich, aber anstatt die Hintergrundbild-Eigenschaft für alle Elemente auf der Seite zu entfernen, entfernen wir sie nur für Elemente mit einem bestimmten Klassennamen.

<style>
    .lazybg {background-image: none !important}
</style>

Als Nächstes, wenn der DOM-Inhalt geladen wurde, beginnen wir mit der Beobachtung der Elemente, die ein Hintergrundbild haben. Wenn dieses Element in den Viewport scrollt, entfernen wir die Klasse .lazybg, um einen Hintergrunddownload auszulösen.

<script>
window.addEventListener('DOMContentLoaded', (event) => {

  // all elements with background images that should be lazy loaded
  const lazyImages = document.querySelectorAll('.lazybg');

  // options for the observer
  const backgroundOptions = {
     threshold: 0,
     rootMargin: "0px 0px 50px 0px"
  };

  // the observer
  const imageObserver = new IntersectionObserver((entries, imageObserver) => {
     entries.forEach(entry => {
         if (entry.isIntersecting) {
             showImageBackground(entry.target);
             imageObserver.unobserve(entry.target);
         }
     });
  }, backgroundOptions);


  // observe each image
  lazyImages.forEach(image => {
     imageObserver.observe(image);
  });

  // show background image
  function showImageBackground(node) {
     node.classList.remove('lazybg');
  }
});
</script>

Der Vorteil dieser Methode besteht darin, dass Hintergrundbilder, die sich nicht im sichtbaren Viewport befinden, nicht für den Download in die Warteschlange gestellt werden. Dies gibt dem Browser während der Ladephase Ressourcen frei. Weitere Techniken dieser Art finden Sie unter Wie man Offscreen-Bilder verzögert.

Fazit

Beide Methoden sind effektiv bei der Verzögerung des Hintergrundbildes zugunsten wichtigerer Bilder wie dem Largest Contentful Paint-Bild. Die erste Methode ist sehr einfach zu implementieren und liefert schnelle Ergebnisse. Die zweite Methode fügt Hintergrundbildern ein echtes Lazy Load-Verhalten hinzu und bietet einen größeren PageSpeed-Schub.

Seien Sie vorsichtig, wenn Sie eine dieser Methoden anwenden. Wenn Sie Hintergrundbilder verzögern müssen, ist Ihre Seite das, was ich gerne als 'langsam durch Design (slow by design)' bezeichne. Die bevorzugte Methode, dies zu beheben, bestünde darin, Ihre Seiten neu zu schreiben und die Verwendung von Hintergrundbildern zu vermeiden.