Hintergrundbilder aufschieben

Hintergrundbilder aufschieben.

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

Hintergrundbilder verursachen oft Probleme mit den Core Web Vitals. Das Aufschieben unwichtiger Hintergrundbilder wird in vielen Fällen Ihre Core Web Vitals verbessern.

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

1. Alle Bilder, einschließlich des LCP-Bildes (das Hero-Bild), werden lazy loaded
2. Einige Bildelemente, die nicht wirklich wichtig sind (wie ein Abstandhalter, ein Suchfeld-Hintergrund usw.), werden als Hintergrundbilder in einem Stylesheet verlinkt

In diesem kleinen Artikel zeige ich Ihnen, wie Sie diese Hintergrundbilder lazy-loaden 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 diese vorzugsweise auf die richtige Weise beheben (das LCP-Bild preloaden, das LCP-Bild nicht lazy loaden, Hintergrundbilder ganz vermeiden). Leider gibt es manchmal einfach zu viel Altlasten und Sie haben keine andere kurzfristige Alternative, als die Seite so gut wie möglich zu flicken. Dann können Sie einen Fix anwenden, wie ich ihn Ihnen heute hier vorstelle!

Methode 1: Alles aufschieben 

Die Alles-aufschieben-Methode ist einfach eine barbarische Art, Dinge zu tun. Aber sie ist einfach zu implementieren und wird gut funktionieren, um die Core Web Vitals zu verbessern!  Mit dieser Methode werden alle Hintergrundbilder aufgeschoben, bis das DOMContentLoaded-Ereignis ausgelöst wurde. Dies gibt dem Browser ein wenig zusätzliche Zeit, die wichtigsten Ressourcen zuerst einzuplanen.

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 Nicht-Hintergrundbilder zum Herunterladen in die Warteschlange gestellt sein. Dies wäre ein großartiger Zeitpunkt, um dann die weniger wichtigen Hintergrundbilder zum Herunterladen in die Warteschlange zu stellen.

Der Code

Erstellen Sie zuerst einen Stil und platzieren Sie ihn im HEAD der Seite. Es ist wichtig, dass dieser Stil eine ID hat, da wir diese ID verwenden werden, um dieses Stil-Tag später 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, wird das LCP-Bild wahrscheinlich bereits zum Herunterladen in die Warteschlange gestellt sein. An diesem Punkt ist es sicher, die Hintergrundbilder in die Warteschlange zu stellen. 

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

Wenn das LCP nicht für einen frühen Download auslöst, liegt das wahrscheinlich an JavaScript. In diesem Fall könnten Sie versuchen, das 'DOMContentLoaded' gegen das 'load'-Ereignis auszutauschen.

Methode 2: Hintergrundbilder Lazy-Loaden

Die Methode zum Lazy-Loaden von Hintergrundbildern ist etwas sanfter, fortgeschrittener und erfordert mehr eine persönliche Note. 

Sie 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 Intersection Observer beobachten und sobald sie nahe am sichtbaren Viewport sind, werden wir das Hintergrundbild lazy-loaden.

Der Code

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

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

Als nächstes, wenn der DOM-Inhalt geladen wurde, werden wir beginnen, die Elemente zu beobachten, die ein Hintergrundbild haben. Wenn dieses Element in den Viewport scrollt, werden wir die .lazybg-Klasse entfernen, um einen Hintergrund-Download auszulösen. 

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

  // alle Elemente mit Hintergrundbildern, die lazy loaded werden sollen 
  const lazyImages = document.querySelectorAll('.lazybg');
 
  // Optionen für den Observer
  const backgroundOptions = {
     threshold: 0,
     rootMargin: "0px 0px 50px 0px"
  };

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

    
  // beobachte jedes Bild
  lazyImages.forEach(image => {
     imageObserver.observe(image);
  });

  // zeige Hintergrundbild
  function showImageBackground(node) {
     node.classList.remove('lazybg');
  }
});
</script>

Der Vorteil dieser Methode ist, dass Hintergrundbilder, die sich nicht im sichtbaren Viewport befinden, nicht zum Herunterladen in die Warteschlange gestellt werden. Dies gibt Ressourcen für den Browser während der Ladephase frei.

Fazit

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

Seien Sie vorsichtig, wenn Sie eine dieser Methoden anwenden. Wenn Sie Hintergrundbilder aufschieben müssen, ist Ihre Seite das, was ich gerne 'slow by design' nenne. Die bevorzugten Methoden, um dies zu beheben, wären, Ihre Seiten neu zu schreiben und die Verwendung von Hintergrundbildern zu vermeiden.