Скорость загрузки страницы, это не только про сжатие картинок и кеширование. Бывает, что все <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-атрибутами и scroll-обработчиком. Он менее производителен, чем 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, которую можно не писать, экономит вам время на поддержку.