Szybkość ładowania strony to nie tylko kompresja obrazów i cache. Bywa, że wszystkie <img> na stronie ładują się leniwie przez loading="lazy", a PageSpeed Insights i tak narzeka na obrazy tła sekcji Elementor. Dzieje się tak, ponieważ background-image w CSS nie obsługuje leniwego ładowania natywnie, przeglądarka sumiennie pobiera każde obraz tła podczas parsowania stylów, nawet jeśli sekcja znajduje się daleko poza ekranem.

Szczególnie boleśnie odbija się to na długich landing page: pierwszy ekran mógłby wyrenderować się w 1,2 sekundy, ale ładuje się 4 sekundy, ponieważ przeglądarka pobiera 8 obrazów tła ze stopki, do których użytkownik przewinie dopiero po minucie. Rozwiązanie istnieje, a w ciągu ostatnich kilku lat pojawiły się opcje na każdy poziom zaawansowania, od „włączenia checkboxa" po niestandardowy JavaScript.

💡 Szybki przegląd:

• Włącz wbudowane leniwe ładowanie tła w ustawieniach Elementor.
• Skonfiguruj IntersectionObserver API dla niestandardowych teł CSS i starszych wersji wtyczki.
• Zastosuj jQuery z atrybutami data dla stron, gdzie ten framework jest już używany.

Wbudowane leniwe ładowanie w Elementor

Od wersji 3.9 Elementor dodał eksperymentalną funkcję Lazy Load Background Images, a do wersji 3.15+ stała się ona stabilna i jest domyślnie włączona na nowych instalacjach. Pod maską działa ten sam IntersectionObserver API, co w natywnych rozwiązaniach przeglądarkowych, ale opakowany w wygodny przełącznik.

Jak włączyć: przejdź do Elementor → Settings → Features (lub Ustawienia → Eksperymenty w polskim interfejsie), znajdź wiersz Lazy Load Background Images i ustaw przełącznik na Active. Zapisz zmiany, a wszystkie obrazy tła sekcji, kontenerów i kolumn, ustawione przez standardowy interfejs Elementor, zaczną ładować się dopiero wtedy, gdy użytkownik do nich przewinie.

Czego ta metoda NIE obejmuje: niestandardowych teł, zdefiniowanych ręcznie w zakładce CSS Elementor (selector { background-image: url(...); }), oraz teł dodanych przez zewnętrzne wtyczki-widżety. Dla nich stosuje się metody opisane poniżej.

Plusy: zero kodu, utrzymywane przez zespół Elementor, automatycznie współpracuje z wtyczkami cache. Minusy: tylko dla standardowych teł Elementor, wymaga wersji 3.9+.

Osobno warto wspomnieć o formacie obrazów tła. Google PageSpeed Insights karze za tła w JPEG, gdy dostępne są WebP lub AVIF, i kara ta nie zależy od metody opóźnienia ładowania. Przekonwertuj wszystkie obrazy tła do WebP (utrata jakości jest niezauważalna dla oka, a rozmiar pliku jest o 25-35% mniejszy niż JPEG) lub AVIF (minus 50% w stosunku do JPEG, ale potrzebny jest zapasowy <picture> dla Safari starszego niż 16.0). Wtyczki takie jak Converter for Media lub Imagify robią to automatycznie podczas przesyłania do biblioteki mediów, w tym dla teł przesłanych przez interfejs Elementor.

IntersectionObserver: nowoczesny JavaScript bez jQuery

Jeśli wersja Elementor jest niższa niż 3.9, tła są zdefiniowane niestandardowym CSS lub po prostu chce się mieć pełną kontrolę, IntersectionObserver API rozwiązuje problem czysto i bez narzutu związanego ze zdarzeniami scroll.

Dlaczego nie scroll-handler? Zdarzenie scroll wyzwala się dziesiątki razy na sekundę i przy każdym takcie wykonuje obliczenia pozycji elementów w głównym wątku. Nawet z throttle jest to odczuwalne na słabszych urządzeniach. IntersectionObserver działa asynchronicznie w wątku compositora przeglądarki, po prostu informuje, gdy element przekroczy granicę widoczności, bez ciągłych obliczeń.

Krok 1. Struktura i CSS. Dodaj sekcjom, które mają być leniwie ładowane, klasę CSS lazy-bg-section:

1
.lazy-bg-section {
2
  background-color: #f0f0f0; /* плейсхолдер пока фон не загрузился */
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
}

Kolor tła #f0f0f0 działa jako wizualna zastępka, sekcja nie wygląda na pustą, gdy użytkownik przewija. Klasa .loaded zostanie dodana za pomocą JavaScript, gdy sekcja znajdzie się w obszarze widocznym.

Krok 2. JavaScript, inicjalizacja Observera. Kod umieść w pliku skryptów motywu lub przez wtyczkę typu 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
});

Kluczowy szczegół: rootMargin: '200px 0px' oznacza, że Observer wyzwala się 200 pikseli przed faktycznym pojawieniem się sekcji na ekranie. Użytkownik nie widzi momentu ładowania, obraz jest już na miejscu.

Krok 3. Struktura w Elementor. Otwórz odpowiednią sekcję → zakładka Zaawansowane (Advanced) → pole Klasy CSS, wpisz lazy-bg-section. Tamże, w Custom Attributes (lub Atrybuty niestandardowe), dodaj atrybut data-bg z wartością będącą pełnym URL obrazu tła.

To podejście działa w każdej nowoczesnej przeglądarce (Chrome 51+, Firefox 55+, Safari 12.1+, Edge 15+), czyli wszędzie od 2016 roku. Dla Internet Explorer potrzebny będzie polyfill, ale takich projektów jest obecnie niewiele.

JQuery i atrybuty data: klasyczne podejście

Na bardzo starych stronach, gdzie jQuery jest już załadowane na każdej podstronie, a przepisanie stacku nie jest możliwe, działa metoda z atrybutami data i handlerem scroll. Jest mniej wydajna niż IntersectionObserver, ale sprawdzona latami i nie wymaga nowoczesnych API przeglądarki.

Krok 1. Klasa sekcji. W ustawieniach sekcji Elementor, zakładka Zaawansowane → Klasy CSS, wskaż lazy-background:

Krok 2. Style CSS dla tła. Aby obraz tła po załadowaniu poprawnie rozciągnął się na całą sekcję, zdefiniuj style. W Elementor robi się to przez zakładkę Zaawansowane → Niestandardowy CSS konkretnej sekcji:

Podstawowy zestaw stylów dla tła pełnoekranowego:

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
}

Zwróć uwagę na selektor #OO2, to identyfikator CSS sekcji, który ustawiasz tamże, w zakładce Zaawansowane → CSS ID. Dla każdej sekcji z własnym tłem identyfikator musi być unikalny, aby style nie nachodziły na siebie.

Wariant dla małych obrazów (nie na całą sekcję). Jeśli w sekcji trzeba umieścić mały obraz, a nie tło pełnoekranowe, na przykład logo lub element dekoracyjny w stopce, style dostosowuje się do konkretnego rozmiaru i pozycji:

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
}

Tutaj tło jest pozycjonowane w prawym dolnym rogu sekcji stopki ze stałą szerokością 350px, a kolumnom nadaje się z-index: 2, aby treść nie była zasłaniana przez warstwę tła.

Krok 3. Obrazy responsywne. Aby nie ładować 2-megabajtowego obrazu na ekranie mobilnym o szerokości 400px, przygotuj 6 wariantów obrazu dla różnych rozdzielczości:

Krok 4. Atrybuty data. Prześlij obrazy do biblioteki mediów WordPress i wpisz ścieżki do nich w atrybutach data sekcji. W Elementor: Zaawansowane → Atrybuty niestandardowe (Custom Attributes):

Format każdego atrybutu:

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

Skrypt (patrz poniżej) odczytuje te atrybuty, określa bieżącą szerokość ekranu przez window.matchMedia i podstawia URL odpowiedniego rozmiaru.

Krok 5. Skrypt jQuery. Dodaj kod do pliku skryptów motywu lub przez wtyczkę:

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
});

Jak to działa: podczas ładowania strony i każdego zdarzenia scroll skrypt sprawdza pozycję każdej sekcji z klasą .lazy-background. Jeśli sekcja znajdzie się w strefie „ekran + 100px zapasu", określana jest bieżąca szerokość viewportu przez matchMedia, wybierany jest odpowiedni atrybut data, tworzony jest tymczasowy obiekt Image do wstępnego załadowania, a po pomyślnym załadowaniu do sekcji dodawany jest <div class="lazy-bg"> z obrazem tła. Obsłużona sekcja jest usuwana z tablicy obserwacji, nie ma ponownych ładowań.

Którą metodę wybrać: porównanie

Praktyczne kryterium wyboru jest proste: jeśli Pana/Pani Elementor jest w wersji 3.9 lub nowszej, a tła są ustawione standardowo, proszę włączyć wbudowaną funkcję i zamknąć temat. Jeśli tła są niestandardowe (zakładka CSS, zewnętrzne widżety), IntersectionObserver na czystym JavaScript, bez jQuery. Metodę jQuery proszę zostawić dla projektów, gdzie jQuery już jest i nie ma budżetu na przepisywanie, lub gdzie wymagane jest pełne wsparcie Internet Explorer.

Niezależnie od wybranej metody, obraz tła fizycznie pozostaje tym samym plikiem na serwerze. Jeśli waży 800 kilobajtów, leniwe ładowanie nie sprawi, że będzie lżejszy, jedynie opóźni moment, w którym przeglądarka zacznie pobierać te 800 kilobajtów. Dlatego zasada „najpierw optymalizuj, potem ładuj leniwie" działa i tutaj: najpierw kompresja do WebP lub AVIF i resize do maksymalnej szerokości ekranu grupy docelowej, a dopiero potem którakolwiek z trzech metod leniwego ładowania. Wtyczki cache (WP Rocket, LiteSpeed Cache, Flying Press) nie kolidują z żadnym z trzech podejść, ponieważ tło załadowane przez CSS background-image jest cache'owane przez przeglądarkę tak samo, jak zwykły <img>.

⁉️🤔 Często zadawane pytania

Dlaczego po prostu nie użyć loading="lazy" dla obrazów tła?

Atrybut loading="lazy" działa tylko z tagami <img> i <iframe>, ale nie z właściwością CSS background-image. Przeglądarka nie wie, że w Pana/Pani CSS znajduje się URL obrazu, który można opóźnić, dopóki nie sparsuje arkusza stylów, a do tego momentu żądanie już poszło do sieci. Właśnie dlatego dla teł potrzebny jest osobny mechanizm.

Którą metodę wybrać, jeśli strona ma 3 lata, a Elementor w wersji 3.12?

Wbudowane leniwe ładowanie Elementor. Wersja 3.12 zawiera już tę funkcję w stabilnym statusie, wystarczy wejść w Settings, Features i włączyć. Nie trzeba pisać żadnego kodu.

Czy metoda jQuery bardzo spowalnia na urządzeniach mobilnych?

Na budżetowych urządzeniach z Androidem z lat 2019-2020 jest to odczuwalne. Zdarzenie scroll w połączeniu z offset().top obciąża główny wątek przy każdej klatce przewijania. Jeśli publiczność strony jest głównie mobilna, proszę przejść na IntersectionObserver lub zaktualizować Elementor do 3.9+ i włączyć wbudowaną funkcję.

Czy można łączyć podejścia na jednej stronie?

Tak i jest to normalna praktyka. Większość sekcji z tłem, skonfigurowanych przez standardowy interfejs Elementor, jest obsługiwana przez wbudowane leniwe ładowanie. Pozostałe niestandardowe sekcje z ręcznym CSS podpina się pod IntersectionObserver. Nie ma konfliktu: Observer działa tylko na elementach z określoną klasą, a wbudowany mechanizm Elementor je ignoruje.

Czy koniecznie trzeba przygotowywać 6 rozmiarów obrazu, czy wystarczy jeden?

Sześć rozmiarów to maksimum sensownej szczegółowości. W praktyce dla większości stron wystarczą trzy: 1920px dla desktopa, 1024px dla tabletu i 768px dla urządzeń mobilnych. Cztery punkty, z dodaniem 400px dla małych ekranów, to już dobry balans między jakością a nakładem pracy. Jeden obraz na wszystkie rozdzielczości działa, ale ładuje zbędne kilobajty na urządzeniach mobilnych, Google PageSpeed Insights to zauważy.

Czy warto zawracać sobie głowę niestandardowym kodem w 2026 roku?

Jeśli ma Pan/Pani Elementor 3.9 lub nowszy, prawie na pewno nie. Wbudowana funkcja pokrywa potrzeby zdecydowanej większości stron: włączona, sprawdzona w PageSpeed Insights, zapomniana. Metody niestandardowe (IntersectionObserver, a tym bardziej jQuery) są uzasadnione dokładnie w dwóch przypadkach: wersja Elementor jest zamrożona poniżej 3.9 z ważnego powodu lub tła są dodane w niestandardowy sposób i standardowy przełącznik ich nie widzi.

Dla nowego projektu na świeżym Elementor właściwa kolejność działań jest następująca: włączyć wbudowane leniwe ładowanie, przepuścić stronę przez PageSpeed Insights i tylko jeśli konkretne obrazy tła nadal są oznaczone jako problematyczne, zająć się nimi punktowo przez IntersectionObserver. Proszę nie pisać niestandardowego kodu zawczasu „na wszelki wypadek", każda zbędna linia JavaScript, której można nie pisać, oszczędza Panu/Pani czas na utrzymanie.