La vitesse de chargement des pages ne se limite pas à la compression d’images et à la mise en cache. Parfois, toutes les balises <img> d’un site sont déjà chargées en différé avec loading="lazy", mais PageSpeed Insights continue de signaler des images d’arrière-plan dans les sections Elementor. La raison est simple: la propriété CSS background-image ne prend pas en charge le lazy loading de manière native. Le navigateur télécharge consciencieusement chaque image d’arrière-plan lors de l’analyse des styles, même si la section se trouve bien en dessous de la ligne de flottaison.

Cela pénalise particulièrement les longues pages d’atterrissage: le premier écran pourrait s’afficher en 1,2 seconde, mais il met 4 secondes parce que le navigateur télécharge 8 images d’arrière-plan depuis le pied de page, que l’utilisateur ne verra pas avant une minute. Il existe une solution et, ces dernières années, des options ont vu le jour pour tous les niveaux, du simple clic dans une case au code JavaScript personnalisé.

💡 Aperçu rapide:

• Activez le chargement différé natif des arrière-plans dans les paramètres d’Elementor.
• Configurez l’API IntersectionObserver pour les arrière-plans CSS personnalisés et les anciennes versions du plugin.
• Utilisez jQuery avec des attributs de données pour les sites où ce framework est déjà en place.

Chargement différé natif dans Elementor

Depuis la version 3.9, Elementor a introduit une fonctionnalité expérimentale Lazy Load Background Images, et à partir de la version 3.15+, elle est devenue stable et activée par défaut sur les nouvelles installations. Sous le capot, il s’agit de la même API IntersectionObserver que les solutions natives du navigateur, mais encapsulée dans un bouton pratique.

Comment l’activer: allez dans Elementor → Réglages → Fonctionnalités (ou Réglages → Expériences dans l’interface en russe), trouvez la ligne Lazy Load Background Images et basculez l’interrupteur sur Actif. Enregistrez les modifications, et toutes les images d’arrière-plan des sections, conteneurs et colonnes définies via l’interface standard d’Elementor commenceront à se charger uniquement lorsque l’utilisateur fera défiler la page jusqu’à elles.

Ce que cette méthode NE couvre PAS: les arrière-plans personnalisés écrits manuellement via l’onglet CSS d’Elementor (selector { background-image: url(...); }), et les arrière-plans ajoutés par des widgets de plugins tiers. Pour ceux-ci, utilisez les méthodes ci-dessous.

Avantages: zéro code, maintenu par l’équipe Elementor, automatiquement compatible avec les plugins de cache. Inconvénients: uniquement pour les arrière-plans standard d’Elementor, nécessite la version 3.9+.

Par ailleurs, il convient de mentionner le format des images d’arrière-plan. Google PageSpeed Insights pénalise les arrière-plans en JPEG lorsque le WebP ou l’AVIF est disponible, et cette pénalité est indépendante de la méthode utilisée pour différer le chargement. Convertissez toutes les images d’arrière-plan en WebP (la perte de qualité est invisible à l’œil nu et la taille du fichier est 25 à 35% inférieure à celle du JPEG) ou en AVIF (50% de moins que le JPEG, mais nécessite une balise <picture> de secours pour Safari antérieur à 16.0). Des plugins comme Converter for Media ou Imagify le font automatiquement lors du téléchargement dans la médiathèque, y compris pour les arrière-plans téléchargés via l’interface d’Elementor.

IntersectionObserver: du JavaScript moderne sans jQuery

Si votre version d’Elementor est inférieure à 3.9, si les arrière-plans sont définis avec du CSS personnalisé, ou si vous souhaitez simplement un contrôle total, l’API IntersectionObserver résout le problème proprement, sans la surcharge des événements de défilement.

Pourquoi ne pas utiliser un gestionnaire d’événement scroll? L’événement scroll se déclenche des dizaines de fois par seconde et effectue des calculs de position pour les éléments dans le thread principal à chaque fois. Même avec throttle, cela se remarque sur les appareils peu puissants. IntersectionObserver fonctionne de manière asynchrone dans le thread du compositeur du navigateur; il signale simplement quand un élément a franchi le seuil de visibilité, sans calculs constants.

Étape 1. Balisage et CSS. Ajoutez la classe CSS lazy-bg-section aux sections qui nécessitent un chargement différé:

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
}

La couleur de fond #f0f0f0 sert de repère visuel, la section ne paraît pas vide pendant que l’utilisateur fait défiler la page. La classe .loaded sera ajoutée depuis le JavaScript lorsque la section entrera dans la fenêtre d’affichage.

Étape 2. JavaScript, initialisation de l’Observer. Placez le code dans le fichier de script de votre thème ou via un plugin comme 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
});

Détail clé: rootMargin: '200px 0px' signifie que l’Observer se déclenche 200 pixels avant que la section n’apparaisse réellement à l’écran. L’utilisateur ne voit pas le moment du chargement, l’image est déjà en place.

Étape 3. Balisage dans Elementor. Ouvrez la section concernée → onglet Avancé → champ Classes CSS, saisissez lazy-bg-section. Au même endroit, dans Attributs personnalisés, ajoutez un attribut data-bg avec comme valeur l’URL complète de l’image d’arrière-plan.

Cette approche fonctionne dans tous les navigateurs modernes (Chrome 51+, Firefox 55+, Safari 12.1+, Edge 15+), c’est-à-dire partout depuis 2016. Pour Internet Explorer, vous aurez besoin d’un polyfill, mais ces projets sont désormais rares.

JQuery et attributs de données: l’approche classique

Sur les sites vraiment anciens où jQuery est déjà chargé sur chaque page et où réécrire la pile n’est pas une option, une méthode avec des attributs de données et un gestionnaire de défilement fonctionne. Elle est moins performante qu’IntersectionObserver, mais éprouvée depuis des années et ne nécessite pas les API modernes des navigateurs.

Étape 1. Classe de section. Dans les paramètres de la section Elementor, onglet Avancé → Classes CSS, indiquez lazy-background:

Étape 2. Styles CSS pour l’arrière-plan. Pour que l’image d’arrière-plan s’étire correctement sur toute la section après le chargement, définissez les styles. Dans Elementor, cela se fait via l’onglet Avancé → CSS personnalisé de la section concernée:

Styles de base pour un arrière-plan plein écran:

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
}

Notez le sélecteur #OO2, il s’agit de l’identifiant CSS de la section que vous définissez dans le même onglet Avancé → ID CSS. Pour chaque section avec son propre arrière-plan, l’identifiant doit être unique afin que les styles ne se chevauchent pas.

Option pour les petites images (pas en plein écran). Si vous devez placer une petite image dans la section plutôt qu’un arrière-plan plein écran, par exemple un logo ou un élément décoratif dans le pied de page, ajustez les styles pour la taille et la position spécifiques:

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
}

Ici, l’arrière-plan est positionné dans le coin inférieur droit de la section du pied de page avec une largeur fixe de 350px, et les colonnes reçoivent z-index: 2 pour que le contenu ne soit pas recouvert par le calque d’arrière-plan.

Étape 3. Images responsives. Pour éviter de charger une image de 2 mégaoctets sur un écran mobile de 400px de large, préparez 6 variantes d’image pour différentes résolutions:

Étape 4. Attributs de données. Téléchargez les images dans la médiathèque WordPress et spécifiez leurs chemins dans les attributs de données de la section. Dans Elementor: Avancé → Attributs personnalisés:

Format pour chaque 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

Le script (voir ci-dessous) lit ces attributs, détermine la largeur d’écran actuelle via window.matchMedia et insère l’URL de la taille nécessaire.

Étape 5. Script jQuery. Ajoutez le code au fichier de script de votre thème ou via un plugin:

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

Comment cela fonctionne: au chargement de la page et à chaque événement de défilement, le script vérifie la position de chaque section ayant la classe .lazy-background. Si la section entre dans la zone «écran + 100px de marge», la largeur actuelle de la fenêtre est déterminée via matchMedia, l’attribut de données nécessaire est sélectionné, un objet Image temporaire est créé pour le préchargement, et après un chargement réussi, un <div class="lazy-bg"> avec l’image d’arrière-plan est ajouté à la section. La section traitée est retirée du tableau de surveillance, il n’y a pas de chargements répétés.

Quelle méthode choisir: comparatif

Le critère de choix pratique est simple: si votre Elementor est en version 3.9 ou plus récente et que les arrière-plans sont définis de manière standard, activez la fonctionnalité native et le problème est réglé. Si les arrière-plans sont personnalisés (onglet CSS, widgets tiers), utilisez IntersectionObserver en JavaScript vanilla, sans jQuery. Réservez la méthode jQuery aux projets où jQuery est déjà présent et où il n’y a pas de budget pour une réécriture, ou lorsque la prise en charge d’Internet Explorer est nécessaire.

Quelle que soit la méthode choisie, l’image d’arrière-plan reste physiquement le même fichier sur le serveur. Si elle pèse 800 kilo-octets, le lazy loading ne l’allégera pas, il ne fera que reporter le moment où le navigateur commencera à télécharger ces 800 kilo-octets. C’est pourquoi la règle «optimiser d’abord, charger en différé ensuite» s’applique ici aussi: compressez d’abord en WebP ou AVIF et redimensionnez à la largeur d’écran maximale de votre audience cible, puis appliquez l’une des trois méthodes de chargement différé. Les plugins de cache (WP Rocket, LiteSpeed Cache, Flying Press) n’entrent en conflit avec aucune des trois approches, car un arrière-plan chargé via background-image en CSS est mis en cache par le navigateur de la même manière qu’une balise <img> classique.

⁉️🤔 Foire aux questions

Pourquoi ne pas simplement utiliser loading="lazy" pour les images d’arrière-plan?

L’attribut loading="lazy" ne fonctionne qu’avec les balises <img> et <iframe>, mais pas avec la propriété CSS background-image. Le navigateur ne sait pas que votre CSS contient une URL d’image qui pourrait être différée avant d’avoir analysé la feuille de style, et à ce moment-là, la requête est déjà partie sur le réseau. C’est précisément pourquoi les arrière-plans nécessitent un mécanisme distinct.

Quelle méthode dois-je choisir si le site a 3 ans et qu’Elementor est en version 3.12?

Le chargement différé natif d’Elementor. La version 3.12 inclut déjà cette fonctionnalité en statut stable, il vous suffit d’aller dans Réglages, Fonctionnalités et de l’activer. Aucune écriture de code nécessaire.

La méthode jQuery ralentit-elle significativement sur mobile?

Sur les appareils Android d’entrée de gamme de 2019-2020, c’est perceptible. L’événement scroll combiné à offset().top sollicite le thread principal à chaque image de défilement. Si l’audience du site est majoritairement mobile, passez à IntersectionObserver ou mettez à jour Elementor vers la version 3.9+ et activez la fonctionnalité native.

Puis-je combiner les approches sur un même site?

Oui, et c’est une pratique normale. La plupart des sections d’arrière-plan configurées via l’interface standard d’Elementor sont gérées par le chargement différé natif. Les sections personnalisées restantes avec du CSS manuel, vous les rattachez à IntersectionObserver. Il n’y a pas de conflit: l’Observer ne se déclenche que sur les éléments avec la classe spécifiée, et le mécanisme natif d’Elementor les ignore.

Est-il obligatoire de préparer 6 tailles d’image, ou une seule suffit-elle?

Six tailles est le maximum pour un niveau de détail significatif. En pratique, pour la plupart des sites, trois suffisent: 1920px pour le bureau, 1024px pour la tablette et 768px pour le mobile. Quatre points de rupture, en ajoutant 400px pour les petits écrans, constituent déjà un bon équilibre entre qualité et effort. Une seule image pour toutes les résolutions fonctionne, mais charge des kilo-octets superflus sur mobile, ce que Google PageSpeed Insights remarquera.

Cela vaut-il la peine de s’embêter avec du code personnalisé en 2026?

Si vous avez Elementor 3.9 ou une version plus récente, presque certainement pas. La fonctionnalité native couvre les besoins de la grande majorité des sites: activez-la, vérifiez dans PageSpeed Insights, et n’y pensez plus. Les méthodes personnalisées (IntersectionObserver et surtout jQuery) ne se justifient que dans deux cas précis: la version d’Elementor est gelée en dessous de 3.9 pour une raison valable, ou les arrière-plans sont ajoutés de manière non standard et l’interrupteur natif ne les voit pas.

Pour un nouveau projet sur un Elementor récent, l’ordre correct des actions est le suivant: activez le chargement différé natif, passez le site dans PageSpeed Insights, et seulement si des images d’arrière-plan spécifiques sont encore signalées comme problématiques, traitez-les individuellement avec IntersectionObserver. N’écrivez pas de code personnalisé à l’avance «au cas où»: chaque ligne de JavaScript supplémentaire que vous pouvez éviter d’écrire vous fait gagner du temps de maintenance.