Die Ladegeschwindigkeit einer Seite hängt nicht nur von Bildkompression und Caching ab. Manchmal sind alle <img>-Tags einer Website bereits mit loading="lazy" versehen, aber PageSpeed Insights bemängelt weiterhin Hintergrundbilder in Elementor-Abschnitten. Das liegt daran, dass background-image in CSS Lazy Loading nicht von Haus aus unterstützt, der Browser lädt jedes Hintergrundbild brav beim Parsen der Styles, selbst wenn der Abschnitt weit unterhalb des sichtbaren Bereichs liegt.

Das schadet besonders langen Landingpages: Der erste Bildschirm könnte in 1,2 Sekunden rendern, braucht aber 4 Sekunden, weil der Browser 8 Hintergrundbilder aus dem Footer herunterlädt, zu denen der Nutzer erst in einer Minute scrollt. Es gibt eine Lösung, und in den letzten Jahren sind Optionen für jedes Kenntnisniveau entstanden, vom Setzen eines Häkchens bis hin zu individuellem JavaScript.

💡 Kurzüberblick:

• Aktivieren Sie das integrierte Lazy Loading für Hintergründe in den Elementor-Einstellungen.
• Konfigurieren Sie die IntersectionObserver-API für eigene CSS-Hintergründe und ältere Plugin-Versionen.
• Nutzen Sie jQuery mit Datenattributen für Websites, auf denen dieses Framework bereits im Einsatz ist.

Integriertes Lazy Loading in Elementor

Seit Version 3.9 hat Elementor eine experimentelle Funktion Lazy Load Background Images eingeführt, und ab Version 3.15+ ist sie stabil und bei Neuinstallationen standardmäßig aktiviert. Unter der Haube steckt dieselbe IntersectionObserver-API wie bei nativen Browserlösungen, verpackt in einen praktischen Schalter.

So aktivieren Sie die Funktion: Gehen Sie zu Elementor → Einstellungen → Funktionen (oder Einstellungen → Experimente in der russischen Oberfläche), suchen Sie die Zeile Lazy Load Background Images und stellen Sie den Schalter auf Aktiv. Speichern Sie die Änderungen, und alle Hintergrundbilder von Abschnitten, Containern und Spalten, die über die Standard-Elementor-Oberfläche gesetzt wurden, werden erst geladen, wenn der Nutzer zu ihnen scrollt.

Was diese Methode NICHT abdeckt: eigene Hintergründe, die manuell über den Elementor-CSS-Tab geschrieben wurden (selector { background-image: url(...); }), sowie Hintergründe, die über Widget-Plugins von Drittanbietern hinzugefügt wurden. Für diese Fälle nutzen Sie bitte die nachfolgenden Methoden.

Vorteile: kein Code, wird vom Elementor-Team gepflegt, automatisch kompatibel mit Caching-Plugins. Nachteile: nur für Standard-Elementor-Hintergründe, erfordert Version 3.9+.

Gesondert zu erwähnen ist das Hintergrundbildformat. Google PageSpeed Insights bestraft JPEG-Hintergründe, wenn WebP oder AVIF verfügbar sind, und diese Bestrafung ist unabhängig davon, mit welcher Methode Sie das Laden verzögert haben. Konvertieren Sie alle Hintergrundbilder in WebP (der Qualitätsverlust ist für das Auge unsichtbar, die Dateigröße ist 25-35% kleiner als bei JPEG) oder AVIF (50% kleiner als JPEG, erfordert aber ein Fallback-<picture> für Safari älter als 16.0). Plugins wie Converter for Media oder Imagify erledigen das automatisch beim Hochladen in die Mediathek, einschließlich der über die Elementor-Oberfläche hochgeladenen Hintergründe.

IntersectionObserver: modernes JavaScript ohne jQuery

Wenn Ihre Elementor-Version unter 3.9 liegt, Hintergründe mit eigenem CSS gesetzt sind oder Sie einfach die volle Kontrolle wünschen, löst die IntersectionObserver-API die Aufgabe sauber und ohne Overhead durch Scroll-Ereignisse.

Warum kein scroll-Handler? Das scroll-Ereignis feuert dutzende Male pro Sekunde und führt bei jedem Takt Positionsberechnungen für Elemente im Hauptthread durch. Selbst mit throttle ist das auf schwachen Geräten spürbar. IntersectionObserver arbeitet asynchron im Compositor-Thread des Browsers, er meldet lediglich, wann ein Element die Sichtbarkeitsschwelle überschritten hat, ohne ständige Berechnungen.

Schritt 1. Markup und CSS. Fügen Sie die CSS-Klasse lazy-bg-section zu den Abschnitten hinzu, die Lazy Loading benötigen:

1
.lazy-bg-section {
2
  background-color: #f0f0f0; /* placeholder until background loads */
3
  background-repeat: no-repeat;
4
  background-position: center;
5
  background-size: cover;
6
}
7
 
8
.lazy-bg-section.loaded {
9
  background-color: transparent;
10
}

Die Hintergrundfarbe #f0f0f0 dient als visueller Platzhalter, der Abschnitt sieht beim Scrollen nicht leer aus. Die Klasse .loaded wird per JavaScript hinzugefügt, wenn der Abschnitt in den Viewport gelangt.

Schritt 2. JavaScript, Initialisierung des Observers. Platzieren Sie den Code in der Skriptdatei Ihres Themes oder über ein Plugin wie Code Snippets:

1
document.addEventListener('DOMContentLoaded', () => {
2
  const sections = document.querySelectorAll('.lazy-bg-section');
3
 
4
  if (!sections.length || !('IntersectionObserver' in window)) return;
5
 
6
  const observer = new IntersectionObserver(
7
    (entries) => {
8
      entries.forEach((entry) => {
9
        if (entry.isIntersecting) {
10
          const bgUrl = entry.target.dataset.bg;
11
          if (bgUrl) {
12
            entry.target.style.backgroundImage = `url(${bgUrl})`;
13
          }
14
          entry.target.classList.add('loaded');
15
          observer.unobserve(entry.target);
16
        }
17
      });
18
    },
19
    { rootMargin: '200px 0px' }
20
  );
21
 
22
  sections.forEach((section) => observer.observe(section));
23
});

Wichtiges Detail: rootMargin: '200px 0px' bedeutet, dass der Observer 200 Pixel feuert, bevor der Abschnitt tatsächlich auf dem Bildschirm erscheint. Der Nutzer sieht den Ladevorgang nicht, das Bild ist bereits an Ort und Stelle.

Schritt 3. Markup in Elementor. Öffnen Sie den gewünschten Abschnitt → Tab Erweitert → Feld CSS-Klassen, geben Sie lazy-bg-section ein. Fügen Sie an derselben Stelle unter Benutzerdefinierte Attribute ein data-bg-Attribut mit dem Wert der vollständigen URL des Hintergrundbildes hinzu.

Dieser Ansatz funktioniert in jedem modernen Browser (Chrome 51+, Firefox 55+, Safari 12.1+, Edge 15+), also überall seit 2016. Für den Internet Explorer benötigen Sie einen Polyfill, aber solche Projekte sind heute selten.

JQuery und Datenattribute: der klassische Ansatz

Auf wirklich alten Websites, auf denen jQuery bereits auf jeder Seite geladen wird und ein Umschreiben des Stacks keine Option ist, funktioniert eine Methode mit Datenattributen und einem Scroll-Handler. Sie ist weniger performant als IntersectionObserver, aber über Jahre bewährt und benötigt keine modernen Browser-APIs.

Schritt 1. Abschnittsklasse. Geben Sie in den Elementor-Abschnittseinstellungen, Tab Erweitert → CSS-Klassen, lazy-background an:

Schritt 2. CSS-Stile für den Hintergrund. Damit das Hintergrundbild nach dem Laden korrekt über den gesamten Abschnitt gestreckt wird, setzen Sie Stile. In Elementor geschieht das über den Tab Erweitert → Eigenes CSS des jeweiligen Abschnitts:

Grundlegende Stile für einen bildschirmfüllenden Hintergrund:

1
#OO2 .lazy-bg {
2
  background-repeat: no-repeat;
3
  background-position: center;
4
  background-size: cover;
5
  position: absolute;
6
  top: 0;
7
  right: 0;
8
  bottom: 0;
9
  left: 0;
10
  z-index: -1;
11
  background-attachment: fixed;
12
}

Beachten Sie den Selektor #OO2, das ist die CSS-ID des Abschnitts, die Sie im selben Tab Erweitert → CSS-ID festlegen. Für jeden Abschnitt mit eigenem Hintergrund muss die ID eindeutig sein, damit sich die Stile nicht überschneiden.

Option für kleine Bilder (nicht bildschirmfüllend). Wenn Sie ein kleines Bild im Abschnitt platzieren möchten, statt eines bildschirmfüllenden Hintergrunds, zum Beispiel ein Logo oder ein dekoratives Element im Footer, passen Sie die Stile für die spezifische Größe und Position an:

1
section#SDStudio-Footer .lazy-bg {
2
  background-repeat: no-repeat;
3
  background-position: right bottom;
4
  background-size: 350px;
5
  position: absolute;
6
  top: 0;
7
  right: 0;
8
  bottom: 0;
9
  left: 0;
10
  z-index: 0;
11
  background-attachment: fixed;
12
}
13
 
14
section#SDStudio-Footer .elementor-column.elementor-col-25,
15
.elementor-column[data-col="25"] {
16
  width: 25%;
17
  z-index: 2;
18
}

Hier wird der Hintergrund in der unteren rechten Ecke des Footer-Abschnitts mit einer festen Breite von 350px positioniert, und die Spalten erhalten z-index: 2, damit der Inhalt nicht von der Hintergrundebene verdeckt wird.

Schritt 3. Responsive Bilder. Um zu vermeiden, dass ein 2-Megabyte-Bild auf einem mobilen Bildschirm mit 400px Breite geladen wird, bereiten Sie 6 Bildvarianten für verschiedene Auflösungen vor:

Schritt 4. Datenattribute. Laden Sie die Bilder in die WordPress-Mediathek hoch und geben Sie die Pfade dazu in den Datenattributen des Abschnitts an. In Elementor: Erweitert → Benutzerdefinierte Attribute:

Format für jedes Attribut:

1
data-bg-min-1701 | /wp-content/uploads/2020/03/Background-min-width-1701px.jpg
2
data-bg-max-1700 | /wp-content/uploads/2020/03/Background-max-width-1700px.jpg
3
data-bg-max-1200 | /wp-content/uploads/2020/03/Background-max-width-1200px.jpg
4
data-bg-max-1024 | /wp-content/uploads/2020/03/Background-max-width-1024px.jpg
5
data-bg-max-768  | /wp-content/uploads/2020/03/Background-max-width-768px.jpg
6
data-bg-max-400  | /wp-content/uploads/2020/03/Background-max-width-400px.jpg

Das Skript (siehe unten) liest diese Attribute aus, ermittelt die aktuelle Bildschirmbreite über window.matchMedia und fügt die URL der benötigten Größe ein.

Schritt 5. jQuery-Skript. Fügen Sie den Code zur Skriptdatei Ihres Themes oder über ein Plugin hinzu:

1
jQuery(document).ready(function ($) {
2
  var $window = $(window),
3
    lazyBgArr = [];
4
 
5
  $window.on('load resize scroll', function () {
6
    for (var i = 0; i < lazyBgArr.length; i++) {
7
      var func = lazyBgArr[i];
8
      if (func !== undefined) {
9
        func();
10
      }
11
    }
12
  });
13
 
14
  function lazyBg(strEl, intPos) {
15
    return function () {
16
      var intCheckVal = $window.scrollTop() + $window.height() + 100;
17
      if (intCheckVal > strEl.offset().top) {
18
        var data_bg;
19
 
20
        if (window.matchMedia('(min-width: 1701px)').matches) {
21
          data_bg = 'data-bg-min-1701';
22
        } else if (
23
          window.matchMedia('(min-width: 1201px) and (max-width: 1700px)').matches
24
        ) {
25
          data_bg = 'data-bg-max-1700';
26
        } else if (
27
          window.matchMedia('(min-width: 1025px) and (max-width: 1200px)').matches
28
        ) {
29
          data_bg = 'data-bg-max-1200';
30
        } else if (
31
          window.matchMedia('(min-width: 769px) and (max-width: 1024px)').matches
32
        ) {
33
          data_bg = 'data-bg-max-1024';
34
        } else if (
35
          window.matchMedia('(min-width: 401px) and (max-width: 768px)').matches
36
        ) {
37
          data_bg = 'data-bg-max-768';
38
        } else if (window.matchMedia('(max-width: 400px)').matches) {
39
          data_bg = 'data-bg-max-400';
40
        }
41
 
42
        if (!data_bg) return;
43
 
44
        var tmpImg = new Image(),
45
          strSrc = strEl.attr(data_bg);
46
        tmpImg.src = strSrc;
47
        delete lazyBgArr[intPos];
48
 
49
        $(tmpImg).on('load', function () {
50
          strEl.append('<div class="lazy-bg"></div>').css('opacity', 1);
51
          strEl.addClass('loaded');
52
        });
53
      }
54
    };
55
  }
56
 
57
  $('.lazy-background').each(function (i) {
58
    lazyBgArr.push(lazyBg($(this), i));
59
  });
60
});

So funktioniert es: Beim Laden der Seite und bei jedem Scroll-Ereignis prüft das Skript die Position jedes Abschnitts mit der Klasse .lazy-background. Tritt der Abschnitt in die Zone „Bildschirm + 100px Puffer" ein, wird die aktuelle Viewport-Breite über matchMedia ermittelt, das benötigte Datenattribut ausgewählt, ein temporäres Image-Objekt zum Vorladen erstellt und nach erfolgreichem Laden ein <div class="lazy-bg"> mit dem Hintergrundbild zum Abschnitt hinzugefügt. Der verarbeitete Abschnitt wird aus dem Überwachungsarray entfernt, es gibt keine wiederholten Ladevorgänge.

Welche Methode soll man wählen: Vergleich

Das praktische Auswahlkriterium ist einfach: Wenn Ihr Elementor Version 3.9 oder neuer ist und die Hintergründe auf dem Standardweg gesetzt sind, aktivieren Sie die integrierte Funktion und schließen Sie das Thema ab. Sind die Hintergründe individuell (CSS-Tab, Drittanbieter-Widgets), nutzen Sie IntersectionObserver in Vanilla-JavaScript, ohne jQuery. Die jQuery-Methode heben Sie sich für Projekte auf, in denen jQuery bereits vorhanden ist und kein Budget für ein Umschreiben besteht oder wo Internet-Explorer-Unterstützung benötigt wird.

Unabhängig von der gewählten Methode bleibt die Hintergrundbilddatei physisch dieselbe auf dem Server. Wenn sie 800 Kilobyte wiegt, macht Lazy Loading sie nicht leichter, es verschiebt nur den Zeitpunkt, zu dem der Browser beginnt, diese 800 Kilobyte herunterzuladen. Deshalb gilt auch hier die Regel „erst optimieren, dann lazy laden": Komprimieren Sie zuerst auf WebP oder AVIF und skalieren Sie auf die maximale Bildschirmbreite Ihrer Zielgruppe, und wenden Sie erst danach eine der drei Lazy-Loading-Methoden an. Caching-Plugins (WP Rocket, LiteSpeed Cache, Flying Press) kollidieren mit keinem der drei Ansätze, da ein über CSS background-image geladener Hintergrund vom Browser genauso gecacht wird wie ein normales <img>.

⁉️🤔 Häufig gestellte Fragen

Warum nicht einfach loading="lazy" für Hintergrundbilder verwenden?

Das Attribut loading="lazy" funktioniert nur mit <img>- und <iframe>-Tags, nicht aber mit der CSS-Eigenschaft background-image. Der Browser weiß nicht, dass Ihr CSS eine Bild-URL enthält, die zurückgestellt werden könnte, bis er das Stylesheet parst, und zu diesem Zeitpunkt ist die Anfrage bereits ans Netzwerk gegangen. Genau deshalb benötigen Hintergründe einen separaten Mechanismus.

Welche Methode soll ich wählen, wenn die Website 3 Jahre alt ist und Elementor Version 3.12 hat?

Das integrierte Lazy Loading von Elementor. Version 3.12 enthält diese Funktion bereits im stabilen Status, gehen Sie einfach zu Einstellungen, Funktionen und aktivieren Sie sie. Kein Code-Schreiben erforderlich.

Bremst die jQuery-Methode auf Mobilgeräten spürbar aus?

Auf günstigen Android-Geräten von 2019-2020 merklich. Das scroll-Ereignis in Kombination mit offset().top belastet den Hauptthread bei jedem Scroll-Frame. Wenn die Zielgruppe der Website überwiegend mobil ist, wechseln Sie zu IntersectionObserver oder aktualisieren Sie Elementor auf 3.9+ und aktivieren Sie die integrierte Funktion.

Kann man Ansätze auf einer Website kombinieren?

Ja, und das ist gängige Praxis. Die meisten Hintergrundabschnitte, die über die Standard-Elementor-Oberfläche konfiguriert sind, werden vom integrierten Lazy Loading abgedeckt. Die verbleibenden eigenen Abschnitte mit manuellem CSS binden Sie an IntersectionObserver an. Es gibt keinen Konflikt: Der Observer feuert nur bei Elementen mit der angegebenen Klasse, und der integrierte Mechanismus von Elementor ignoriert diese.

Ist es zwingend, 6 Bildgrößen vorzubereiten, oder reicht eine?

Sechs Größen sind das Maximum für sinnvollen Detailgrad. In der Praxis reichen für die meisten Websites drei: 1920px für Desktop, 1024px für Tablet und 768px für Mobilgeräte. Vier Breakpoints, ergänzt um 400px für kleine Bildschirme, sind bereits eine gute Balance zwischen Qualität und Aufwand. Ein Bild für alle Auflösungen funktioniert, lädt aber auf Mobilgeräten überflüssige Kilobyte, Google PageSpeed Insights wird das bemerken.

Lohnt sich der Aufwand mit eigenem Code im Jahr 2026?

Wenn Sie Elementor 3.9 oder neuer haben, mit an Sicherheit grenzender Wahrscheinlichkeit nicht. Die integrierte Funktion deckt die Bedürfnisse der allermeisten Websites ab: Aktivieren, in PageSpeed Insights prüfen, vergessen. Eigene Methoden (IntersectionObserver und insbesondere jQuery) sind in genau zwei Fällen gerechtfertigt: Die Elementor-Version ist aus triftigem Grund unter 3.9 eingefroren, oder Hintergründe werden auf nicht standardmäßige Weise hinzugefügt und der Standardschalter erkennt sie nicht.

Für ein neues Projekt auf einem aktuellen Elementor lautet die richtige Reihenfolge: Integriertes Lazy Loading aktivieren, die Website durch PageSpeed Insights laufen lassen und nur dann, wenn bestimmte Hintergrundbilder weiterhin als problematisch markiert werden, diese einzeln per IntersectionObserver behandeln. Schreiben Sie keinen eigenen Code auf Vorrat „für alle Fälle", jede zusätzliche Zeile JavaScript, die Sie sich sparen können, spart Ihnen Wartungszeit.