Швидкість завантаження сторінки — це не лише про стиснення зображень і кешування. Буває, що всі <img> на сайті вже завантажуються ліниво через loading="lazy", а PageSpeed Insights однаково скаржиться на фонові зображення секцій Elementor. Тому що background-image у CSS не вміє лінивого завантаження з коробки, браузер чесно тягне кожне фонове зображення під час парсингу стилів, навіть якщо секція далеко за межами екрана.

Особливо боляче це б'є по довгих лендингах: перший екран міг би відрендеритися за 1,2 секунди, але завантажується 4 секунди, тому що браузер викачує 8 фонових зображень із підвалу, до яких користувач докрутить лише за хвилину. Рішення є, і за останні пару років з'явилися варіанти на будь-який рівень підготовки, від «увімкнути галочку» до кастомного JavaScript.

💡 Швидкий огляд:

• Увімкніть вбудоване ліниве завантаження фону в налаштуваннях Elementor.
• Налаштуйте IntersectionObserver API для кастомних CSS-фонів і старих версій плагіна.
• Застосуйте jQuery з data-атрибутами для сайтів, де цей фреймворк уже використовується.

Вбудоване ліниве завантаження в Elementor

З версії 3.9 Elementor додав експериментальну функцію Lazy Load Background Images, а до версії 3.15+ вона стала стабільною й увімкнена за замовчуванням на нових інсталяціях. Під капотом, той самий IntersectionObserver API, що й у нативних браузерних рішеннях, але загорнутий у зручний тумблер.

Як увімкнути: перейдіть у Elementor → Settings → Features (або Налаштування → Експерименти в українському інтерфейсі), знайдіть рядок Lazy Load Background Images і переведіть перемикач в Active. Збережіть зміни, і всі фонові зображення секцій, контейнерів і колонок, задані через штатний інтерфейс Elementor, почнуть завантажуватися лише тоді, коли користувач докручує до них.

Що цей метод НЕ покриває: кастомні фони, прописані вручну через CSS-вкладку Elementor (selector { background-image: url(...); }), і фони, додані через сторонні плагіни-віджети. Для них, методи нижче.

Плюси: нуль коду, обслуговується командою Elementor, автоматично товаришує з кешувальними плагінами. Мінуси: лише для штатних фонів Elementor, потребує версії 3.9+.

Окремо варто сказати про формат фонових зображень. Google PageSpeed Insights штрафує за фони в JPEG, коли є WebP або AVIF, і цей штраф не залежить від того, яким методом ви відклали завантаження. Конвертуйте всі фонові зображення у WebP (втрати якості непомітні для ока, а розмір файлу на 25-35% менший за JPEG) або AVIF (мінус 50% від JPEG, але потрібен запасний <picture> для Safari молодше 16.0). Плагіни на кшталт Converter for Media або Imagify роблять це автоматично під час завантаження в медіатеку, включно з фонами, завантаженими через інтерфейс Elementor.

IntersectionObserver: сучасний JavaScript без jQuery

Якщо версія Elementor нижче 3.9, або фони прописані кастомним CSS, або просто хочеться повного контролю, IntersectionObserver API вирішує задачу чисто й без оверхеду на скрол-події.

Чому не scroll-обробник? Подія scroll спрацьовує десятки разів на секунду й на кожному тіку виконує розрахунки позицій елементів у головному потоці. Навіть із throttle це помітно на слабких пристроях. IntersectionObserver працює асинхронно в compositor-потоці браузера, він просто повідомляє, коли елемент перетнув межу видимості, без постійних обчислень.

Крок 1. Розмітка та CSS. Додайте секціям, які потрібно ліниво завантажувати, 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
}

Колір фону #f0f0f0 працює як візуальна заглушка, секція не виглядає порожньою, поки користувач скролить. Клас .loaded буде додано з JavaScript, коли секція потрапить у зону видимості.

Крок 2. JavaScript, ініціалізація Observer. Код розмістіть у файлі скриптів теми або через плагін на кшталт 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
});

Ключова деталь: rootMargin: '200px 0px' означає, що Observer спрацьовує за 200 пікселів до того, як секція реально з'явиться на екрані. Користувач не бачить момент завантаження, зображення вже на місці.

Крок 3. Розмітка в Elementor. Відкрийте потрібну секцію → вкладка Додатково (Advanced) → поле CSS-класи, впишіть lazy-bg-section. Там же, в Custom Attributes (або Довільні атрибути), додайте атрибут data-bg зі значенням, повним URL фонового зображення.

Цей підхід працює в будь-якому сучасному браузері (Chrome 51+, Firefox 55+, Safari 12.1+, Edge 15+), тобто скрізь, починаючи з 2016 року. Для Internet Explorer знадобиться поліфіл, але таких проєктів зараз одиниці.

JQuery і data-атрибути: класичний підхід

На зовсім старих сайтах, де jQuery вже завантажений на кожній сторінці, а переписувати стек немає можливості, працює метод із data-атрибутами та скрол-обробником. Він менш продуктивний, ніж IntersectionObserver, але перевірений роками й не потребує сучасних браузерних API.

Крок 1. Клас секції. У налаштуваннях секції Elementor, вкладка Додатково → CSS-класи, вкажіть lazy-background:

Крок 2. CSS-стилі для фону. Щоб фонове зображення після завантаження коректно розтягнулося на всю секцію, задайте стилі. В Elementor це робиться через вкладку Додатково → Кастомний CSS конкретної секції:

Базовий набір стилів для повноекранного фону:

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
}

Зверніть увагу на селектор #OO2, це CSS-ідентифікатор секції, який ви задаєте там же, у вкладці Додатково → CSS ID. Для кожної секції зі своїм фоном ідентифікатор має бути унікальним, щоб стилі не перетиналися.

Варіант для невеликих зображень (не на всю секцію). Якщо в секції потрібно розмістити маленьке зображення, а не повноекранний фон, наприклад, логотип або декоративний елемент у футері, стилі коригуються під конкретний розмір і позицію:

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
}

Тут фон позиціонується в правому нижньому куті секції футера з фіксованою шириною 350px, а колонкам задається z-index: 2, щоб контент не перекривався фоновим шаром.

Крок 3. Responsive-зображення. Щоб не вантажити 2-мегабайтне зображення на мобільному екрані шириною 400px, підготуйте 6 варіантів зображення під різні роздільності:

Крок 4. Data-атрибути. Завантажте зображення в медіатеку WordPress і пропишіть шляхи до них у data-атрибутах секції. В Elementor: Додатково → Довільні атрибути (Custom Attributes):

Формат кожного атрибута:

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

Скрипт (див. нижче) читає ці атрибути, визначає поточну ширину екрана через window.matchMedia і підставляє URL потрібного розміру.

Крок 5. jQuery-скрипт. Додайте код у файл скриптів теми або через плагін:

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

Як це працює: під час завантаження сторінки та кожної події скролу скрипт перевіряє позицію кожної секції з класом .lazy-background. Якщо секція потрапляє в зону «екран + 100px запасу», визначається поточна ширина в'юпорту через matchMedia, вибирається потрібний data-атрибут, створюється тимчасовий об'єкт Image для попереднього завантаження, і після успішного завантаження в секцію додається <div class="lazy-bg"> із фоновим зображенням. Секція, що відпрацювала, видаляється з масиву спостереження, повторних завантажень немає.

Який метод обрати: порівняння

Практичний критерій вибору простий: якщо ваш Elementor версії 3.9 або новіше й фони задані штатно, вмикайте вбудовану функцію та закривайте питання. Якщо фони кастомні (CSS-вкладка, сторонні віджети), IntersectionObserver на чистому JavaScript, без jQuery. jQuery-метод залиште для проєктів, де вже є jQuery й бюджет на переписування відсутній, або де потрібна посекундна підтримка Internet Explorer.

Незалежно від обраного методу, фонове зображення фізично залишається тим самим файлом на сервері. Якщо воно важить 800 кілобайт, ліниве завантаження не зробить його легшим, воно просто відкладе момент, коли браузер почне викачувати ці 800 кілобайт. Тому правило «спочатку оптимізуй, потім ліниво завантажуй» працює й тут: спочатку стиснення до WebP або AVIF і ресайз під максимальну ширину екрана цільової аудиторії, і лише потім будь-який із трьох методів лінивого завантаження. Кешувальні плагіни (WP Rocket, LiteSpeed Cache, Flying Press) не конфліктують із жодним із трьох підходів, оскільки фон, завантажений через CSS background-image, кешується браузером так само, як і звичайний <img>.

⁉️🤔 Часті запитання

Чому б просто не використовувати loading="lazy" для фонових зображень?

Атрибут loading="lazy" працює лише з тегами <img> і <iframe>, але не з CSS-властивістю background-image. Браузер не знає, що у вашому CSS лежить URL зображення, яке можна відкласти, доки не розпарсить таблицю стилів, а до того моменту запит уже пішов у мережу. Саме тому для фонів потрібен окремий механізм.

Який метод обрати, якщо сайту 3 роки й Elementor версії 3.12?

Вбудоване ліниве завантаження Elementor. Версія 3.12 уже містить цю функцію в стабільному статусі, просто зайдіть у Settings, Features та увімкніть. Жодного коду писати не потрібно.

Чи сильно jQuery-метод гальмує на мобільних?

На бюджетних Android-пристроях 2019-2020 років помітно. Подія scroll у зв'язці з offset().top смикає головний потік на кожному кадрі прокручування. Якщо аудиторія сайту переважно мобільна, переходьте на IntersectionObserver або оновіть Elementor до 3.9+ та увімкніть вбудовану функцію.

Чи можна комбінувати підходи на одному сайті?

Так, і це нормальна практика. Більшість фонових секцій, налаштованих через штатний інтерфейс Elementor, підхоплюються вбудованим лінивим завантаженням. Решту кастомних секцій із ручним CSS вішаєте на IntersectionObserver. Конфлікту немає: Observer спрацьовує лише на елементах із зазначеним класом, а вбудований механізм Elementor їх ігнорує.

Чи обов'язково готувати 6 розмірів зображення, чи вистачить одного?

Шість розмірів — це максимум осмисленої деталізації. На практиці для більшості сайтів вистачає трьох: 1920px для десктопа, 1024px для планшета й 768px для мобільних. Чотири точки, додавши 400px для маленьких екранів,, уже хороший баланс між якістю та трудозатратами. Одне зображення на всі роздільності працює, але вантажить зайві кілобайти на мобільних, Google PageSpeed Insights це помітить.

Чи варто морочитися з кастомним кодом у 2026 році?

Якщо у вас Elementor 3.9 або новіше, майже напевно ні. Вбудована функція покриває потреби переважної більшості сайтів: увімкнули, перевірили в PageSpeed Insights, забули. Кастомні методи (IntersectionObserver і тим паче jQuery) виправдані рівно у двох випадках: версія Elementor заморожена нижче 3.9 з поважної причини, або фони додані нестандартним способом і штатний тумблер їх не бачить.

Для нового проєкту на свіжому Elementor правильний порядок дій такий: увімкнути вбудоване ліниве завантаження, прогнати сайт через PageSpeed Insights, і лише якщо конкретні фонові зображення все ще позначені як проблемні, розбиратися з ними точково через IntersectionObserver. Не пишіть кастомний код заздалегідь «про всяк випадок», кожен зайвий рядок JavaScript, який можна не писати, економить вам час на підтримку.