La velocità di caricamento della pagina non riguarda solo la compressione delle immagini e la cache. A volte tutti i tag <img> di un sito sono già in lazy load con loading="lazy", ma PageSpeed Insights segnala ancora le immagini di sfondo nelle sezioni di Elementor. Questo accade perché background-image nei CSS non supporta il lazy loading nativamente: il browser recupera fedelmente ogni immagine di sfondo durante l'analisi degli stili, anche se la sezione è molto sotto la piega.

Questo penalizza soprattutto le landing page lunghe: la prima schermata potrebbe rendersi in 1,2 secondi, ma ce ne vogliono 4 perché il browser scarica 8 immagini di sfondo dal footer che l'utente non scorrerà per un altro minuto. Esiste una soluzione e, negli ultimi due anni, sono emerse opzioni per ogni livello di competenza, dal "selezionare una casella" al JavaScript personalizzato.

💡 Panoramica rapida:

• Attiva il lazy loading nativo degli sfondi nelle impostazioni di Elementor.
• Configura l'API IntersectionObserver per sfondi CSS personalizzati e versioni precedenti del plugin.
• Applica jQuery con attributi data per i siti in cui questo framework è già in uso.

Lazy loading nativo in Elementor

Dalla versione 3.9, Elementor ha aggiunto una funzionalità sperimentale Lazy Load Background Images e, dalla versione 3.15+, è diventata stabile e attiva di default sulle nuove installazioni. Sotto il cofano, è la stessa API IntersectionObserver delle soluzioni native del browser, ma racchiusa in un comodo interruttore.

Come attivarla: vai su Elementor → Impostazioni → Funzionalità (o Impostazioni → Esperimenti nell'interfaccia in italiano), trova la riga Lazy Load Background Images e porta l'interruttore su Attivo. Salva le modifiche e tutte le immagini di sfondo di sezioni, container e colonne impostate tramite l'interfaccia standard di Elementor inizieranno a caricarsi solo quando l'utente le raggiunge scorrendo.

Cosa NON copre questo metodo: gli sfondi personalizzati scritti manualmente tramite la scheda CSS di Elementor (selector { background-image: url(...); }) e gli sfondi aggiunti tramite plugin di widget di terze parti. Per questi, usa i metodi seguenti.

Pro: zero codice, mantenuto dal team di Elementor, automaticamente compatibile con i plugin di caching. Contro: solo per sfondi standard di Elementor, richiede la versione 3.9+.

Separatamente, vale la pena menzionare il formato dell'immagine di sfondo. Google PageSpeed Insights penalizza gli sfondi in JPEG quando sono disponibili WebP o AVIF, e questa penalità è indipendente dal metodo usato per differire il caricamento. Converti tutte le immagini di sfondo in WebP (la perdita di qualità è invisibile all'occhio e la dimensione del file è inferiore del 25-35% rispetto al JPEG) o AVIF (50% più piccolo del JPEG, ma richiede un fallback <picture> per Safari precedente alla 16.0). Plugin come Converter for Media o Imagify lo fanno automaticamente al caricamento nella libreria media, inclusi gli sfondi caricati tramite l'interfaccia di Elementor.

IntersectionObserver: JavaScript moderno senza jQuery

Se la tua versione di Elementor è inferiore alla 3.9, o gli sfondi sono impostati con CSS personalizzato, o semplicemente vuoi il pieno controllo, l'API IntersectionObserver risolve il problema in modo pulito, senza il sovraccarico degli eventi di scroll.

Perché non un gestore per lo scroll? L'evento scroll si attiva decine di volte al secondo ed esegue calcoli di posizione per gli elementi nel thread principale a ogni tick. Anche con throttle, questo è percepibile sui dispositivi meno potenti. IntersectionObserver lavora in modo asincrono nel thread del compositor del browser: segnala semplicemente quando un elemento ha superato la soglia di visibilità, senza calcoli costanti.

Passo 1. Markup e CSS. Aggiungi la classe CSS lazy-bg-section alle sezioni che necessitano di lazy loading:

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
}

Il colore di sfondo #f0f0f0 funge da segnaposto visivo: la sezione non appare vuota mentre l'utente scorre. La classe .loaded verrà aggiunta da JavaScript quando la sezione entra nel viewport.

Passo 2. JavaScript, inizializzazione dell'Observer. Inserisci il codice nel file script del tuo tema o tramite un plugin come 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
});

Dettaglio chiave: rootMargin: '200px 0px' significa che l'Observer si attiva 200 pixel prima che la sezione appaia effettivamente sullo schermo. L'utente non vede il momento del caricamento: l'immagine è già al suo posto.

Passo 3. Markup in Elementor. Apri la sezione interessata → scheda Avanzate → campo Classi CSS, inserisci lazy-bg-section. Nello stesso posto, in Attributi personalizzati, aggiungi un attributo data-bg con il valore dell'URL completo dell'immagine di sfondo.

Questo approccio funziona in qualsiasi browser moderno (Chrome 51+, Firefox 55+, Safari 12.1+, Edge 15+), ovvero ovunque dal 2016. Per Internet Explorer, servirà un polyfill, ma tali progetti sono ormai rari.

JQuery e attributi data: l'approccio classico

Su siti molto datati dove jQuery è già caricato su ogni pagina e riscrivere lo stack non è un'opzione, funziona un metodo con attributi data e un gestore di scroll. È meno performante di IntersectionObserver, ma collaudato negli anni e non richiede API moderne del browser.

Passo 1. Classe della sezione. Nelle impostazioni della sezione di Elementor, scheda Avanzate → Classi CSS, specifica lazy-background:

Passo 2. Stili CSS per lo sfondo. Per far sì che l'immagine di sfondo si estenda correttamente su tutta la sezione dopo il caricamento, imposta gli stili. In Elementor, questo si fa tramite la scheda Avanzate → CSS personalizzato della sezione specifica:

Stili di base per uno sfondo a schermo intero:

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
}

Nota il selettore #OO2: è l'identificativo CSS della sezione che imposti nella stessa scheda Avanzate → ID CSS. Per ogni sezione con il proprio sfondo, l'identificativo deve essere unico per evitare sovrapposizioni di stili.

Opzione per immagini piccole (non a sezione intera). Se devi inserire un'immagine piccola nella sezione anziché uno sfondo a schermo intero, ad esempio un logo o un elemento decorativo nel footer, regola gli stili per dimensioni e posizione specifiche:

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
}

Qui lo sfondo è posizionato nell'angolo in basso a destra della sezione footer con una larghezza fissa di 350px, e alle colonne viene dato z-index: 2 affinché il contenuto non sia coperto dal livello dello sfondo.

Passo 3. Immagini responsive. Per evitare di caricare un'immagine da 2 megabyte su uno schermo mobile da 400px di larghezza, prepara 6 varianti dell'immagine per diverse risoluzioni:

Passo 4. Attributi data. Carica le immagini nella libreria media di WordPress e specifica i percorsi negli attributi data della sezione. In Elementor: Avanzate → Attributi personalizzati:

Formato per ogni attributo:

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

Lo script (vedi sotto) legge questi attributi, determina la larghezza corrente dello schermo tramite window.matchMedia e inserisce l'URL della dimensione necessaria.

Passo 5. Script jQuery. Aggiungi il codice al file script del tuo tema o tramite 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
});

Come funziona: al caricamento della pagina e a ogni evento di scroll, lo script controlla la posizione di ogni sezione con la classe .lazy-background. Se la sezione entra nella zona "schermo + 100px di buffer", la larghezza corrente del viewport viene determinata tramite matchMedia, viene selezionato l'attributo data necessario, viene creato un oggetto Image temporaneo per il precaricamento e, dopo il caricamento riuscito, un <div class="lazy-bg"> con l'immagine di sfondo viene aggiunto alla sezione. La sezione elaborata viene rimossa dall'array di controllo: non ci sono caricamenti ripetuti.

Quale metodo scegliere: confronto

Il criterio pratico di scelta è semplice: se il tuo Elementor è alla versione 3.9 o superiore e gli sfondi sono impostati in modo standard, attiva la funzionalità nativa e chiudi la questione. Se gli sfondi sono personalizzati (scheda CSS, widget di terze parti), usa IntersectionObserver in JavaScript vanilla, senza jQuery. Lascia il metodo jQuery per i progetti in cui jQuery è già presente e non c'è budget per riscrivere, o dove è necessario il supporto per Internet Explorer.

Indipendentemente dal metodo scelto, l'immagine di sfondo rimane fisicamente lo stesso file sul server. Se pesa 800 kilobyte, il lazy loading non la renderà più leggera: posticiperà solo il momento in cui il browser inizierà a scaricare quegli 800 kilobyte. Ecco perché anche qui vale la regola "prima ottimizza, poi applica il lazy loading": prima comprimi in WebP o AVIF e ridimensiona alla larghezza massima dello schermo del pubblico target, e solo dopo applica uno dei tre metodi di lazy loading. I plugin di caching (WP Rocket, LiteSpeed Cache, Flying Press) non entrano in conflitto con nessuno dei tre approcci, poiché uno sfondo caricato tramite background-image CSS viene memorizzato nella cache del browser allo stesso modo di un normale <img>.

⁉️🤔 Domande frequenti

Perché non usare semplicemente loading="lazy" per le immagini di sfondo?

L'attributo loading="lazy" funziona solo con i tag <img> e <iframe>, non con la proprietà CSS background-image. Il browser non sa che il tuo CSS contiene un URL immagine che potrebbe essere differito finché non analizza il foglio di stile e, a quel punto, la richiesta è già partita verso la rete. È esattamente per questo che gli sfondi necessitano di un meccanismo separato.

Quale metodo dovrei scegliere se il sito ha 3 anni ed Elementor è alla versione 3.12?

Il lazy loading nativo di Elementor. La versione 3.12 include già questa funzionalità in stato stabile: basta andare su Impostazioni, Funzionalità e attivarla. Nessuna scrittura di codice necessaria.

Il metodo jQuery rallenta significativamente su mobile?

Su dispositivi Android economici del 2019-2020, in modo percepibile. L'evento scroll combinato con offset().top colpisce il thread principale a ogni frame dello scorrimento. Se il pubblico del sito è prevalentemente mobile, passa a IntersectionObserver o aggiorna Elementor alla 3.9+ e attiva la funzionalità nativa.

Posso combinare gli approcci su uno stesso sito?

Sì, ed è una pratica normale. La maggior parte delle sezioni con sfondo configurate tramite l'interfaccia standard di Elementor sono gestite dal lazy loading nativo. Le restanti sezioni personalizzate con CSS manuale le colleghi a IntersectionObserver. Non c'è conflitto: l'Observer si attiva solo sugli elementi con la classe specificata e il meccanismo nativo di Elementor li ignora.

È obbligatorio preparare 6 dimensioni di immagine o ne basta una?

Sei dimensioni sono il massimo per un dettaglio significativo. In pratica, per la maggior parte dei siti, tre sono sufficienti: 1920px per desktop, 1024px per tablet e 768px per mobile. Quattro breakpoint, aggiungendo 400px per schermi piccoli, rappresentano già un buon equilibrio tra qualità e impegno. Un'immagine unica per tutte le risoluzioni funziona, ma carica kilobyte extra su mobile: Google PageSpeed Insights lo noterà.

Vale la pena complicarsi con codice personalizzato nel 2026?

Se hai Elementor 3.9 o successivo, quasi certamente no. La funzionalità nativa copre le esigenze della stragrande maggioranza dei siti: attivala, verifica su PageSpeed Insights, dimenticatene. I metodi personalizzati (IntersectionObserver e soprattutto jQuery) sono giustificati esattamente in due casi: la versione di Elementor è bloccata sotto la 3.9 per un valido motivo, oppure gli sfondi sono aggiunti in modo non standard e l'interruttore nativo non li vede.

Per un nuovo progetto su Elementor aggiornato, l'ordine corretto delle azioni è: attiva il lazy loading nativo, passa il sito su PageSpeed Insights e, solo se specifiche immagini di sfondo vengono ancora segnalate come problematiche, affrontale singolarmente tramite IntersectionObserver. Non scrivere codice personalizzato in anticipo "per sicurezza": ogni riga extra di JavaScript che puoi evitare di scrivere ti fa risparmiare tempo di manutenzione.