Differire le immagini di sfondo per Core Web Vitals più veloci

Differire le immagini di sfondo

Le immagini di sfondo sono raramente una cosa buona per i Core Web Vitals. Le immagini di sfondo non sono responsive, non possono accedere all'attributo nativo loading e non possiamo controllare nativamente la priorità delle immagini di sfondo.

Le immagini di sfondo causeranno spesso problemi con i Core Web Vitals. Differire le immagini di sfondo non importanti migliorerà in molti casi il tuo Largest Contentful Paint.

Ultima revisione di Arjen Karel nel febbraio 2026

Secondo il capitolo Performance del Web Almanac 2024 (l'edizione più recente con i dati sui tipi di elemento LCP), il 9% delle pagine mobile ha un'immagine di sfondo CSS come elemento LCP. Di queste, solo il 2% la precarica (preload). Ciò significa che su circa 1 sito web su 11, l'immagine più importante sulla pagina è invisibile al preload scanner del browser e inizia a caricarsi in ritardo.

Sui siti monitorati da CoreDash, le pagine in cui l'elemento LCP è un normale tag <img> hanno un LCP p75 che è circa 620 ms più veloce delle pagine in cui l'LCP è un'immagine di sfondo CSS. La differenza deriva quasi interamente dal ritardo di caricamento delle risorse (resource load delay): il browser scopre un'<img> immediatamente tramite il preload scanner, ma un'immagine di sfondo deve aspettare finché il CSS non viene scaricato e analizzato.

Vedo fin troppo spesso questo anti-pattern che include immagini di sfondo sui siti web. Specialmente sui siti web WordPress che utilizzano page builder come Elementor.

1. Tutte le immagini, inclusa l'immagine LCP (la hero image) sono caricate in modo lazy
2. Alcuni elementi immagine che non sono veramente importanti (come un distanziatore, uno sfondo per la casella di ricerca ecc.) sono collegati come immagini di sfondo in un foglio di stile (stylesheet)

In questo breve articolo ti mostrerò come caricare in modo lazy queste immagini di sfondo per dare priorità ad altre immagini più importanti sulla pagina.

Un avvertimento!

Lasciami iniziare con un avvertimento! Quando l'elemento LCP viene ritardato dalle immagini di sfondo sono stati commessi degli errori e dovresti preferibilmente risolverli nel modo giusto (precaricare l'immagine LCP, non caricare in modo lazy l'immagine LCP, evitare del tutto le immagini di sfondo). Sfortunatamente, a volte c'è semplicemente troppa legacy e non hai altra alternativa a breve termine se non quella di rattoppare il sito nel miglior modo possibile. È allora che puoi applicare una correzione come quella che ti sto presentando qui oggi!

Metodo 1: Differire tutto

Il metodo di differire tutto (defer everything) è solo un modo barbaro di fare le cose. Ma è facile da implementare e funzionerà bene per migliorare i Core Web Vitals! Con questo metodo tutte le immagini di sfondo vengono differite fino a quando non è stato attivato l'evento DOMContentLoaded. Questo darà al browser un po' di tempo extra per programmare prima le risorse più importanti.

Ecco i passaggi coinvolti: per prima cosa sovrascriveremo (overrule) la proprietà di stile background-image per tutti gli elementi che hanno un'immagine di sfondo. Una volta caricato il contenuto del DOM, rimuoveremo di nuovo questa sovrascrittura. Entro quel momento le immagini non di sfondo saranno accodate per il download. Questo sarebbe un ottimo momento per accodare quindi le immagini di sfondo meno importanti per il download.

Il codice

Per prima cosa crea uno stile e inseriscilo nell'HEAD della pagina. È importante che questo stile abbia un id perché utilizzeremo questo id per rimuovere questo tag di stile in seguito. Naturalmente, invece del carattere jolly (*), potresti anche aggiungere solo i nomi delle classi CSS che hanno effettivamente un'immagine di sfondo.

<style id="no-bg-img">
    *{background-image:none!important}
</style>

Successivamente, quando il contenuto del DOM sarà stato caricato, l'immagine LCP sarà probabilmente già accodata per il download. A questo punto è sicuro accodare le immagini di sfondo.

<script>
    window.addEventListener('DOMContentLoaded',function(){
        document.getElementById('no-bg-img').remove();
    })
</script>

Se l'LCP non si attiva per un download anticipato, ciò è probabilmente a causa di JavaScript. In tal caso potresti provare a sostituire 'DOMContentLoaded' con l'evento 'load'.

Nei test eseguiti da DebugBear, il precaricamento di un elemento LCP di immagine di sfondo ha ridotto l'LCP da 3,4 secondi a 1,7 secondi. Il ritardo di caricamento delle risorse è sceso dal 75% del tempo totale di LCP a solo il 2%.

Metodo 2: Lazy load per le immagini di sfondo

Il metodo del lazy load per le immagini di sfondo è leggermente più delicato, avanzato e richiede un tocco più personale.

Funziona come segue: per prima cosa identificheremo manualmente tutti gli elementi con un'immagine di sfondo. Dobbiamo aggiungere un nome di classe a quegli elementi (.lazybg). Successivamente osserveremo questi elementi con l'IntersectionObserver e una volta che saranno vicini alla viewport visibile caricheremo in modo lazy l'immagine di sfondo.

Il codice

Per prima cosa crea uno stile e inseriscilo nell'HEAD della pagina. Questo stile è simile allo stile precedente, ma invece di rimuovere la proprietà dell'immagine di sfondo per tutti gli elementi nella pagina, la rimuoveremo solo per gli elementi con un determinato nome di classe.

<style>
    .lazybg {background-image: none !important}
</style>

Successivamente, quando il contenuto del DOM sarà stato caricato, inizieremo a osservare gli elementi che hanno un'immagine di sfondo. Quando quell'elemento scorrerà nella viewport rimuoveremo la classe .lazybg per attivare un download in background.

<script>
window.addEventListener('DOMContentLoaded', (event) => {

  // all elements with background images that should be lazy loaded
  const lazyImages = document.querySelectorAll('.lazybg');

  // options for the observer
  const backgroundOptions = {
     threshold: 0,
     rootMargin: "0px 0px 50px 0px"
  };

  // the observer
  const imageObserver = new IntersectionObserver((entries, imageObserver) => {
     entries.forEach(entry => {
         if (entry.isIntersecting) {
             showImageBackground(entry.target);
             imageObserver.unobserve(entry.target);
         }
     });
  }, backgroundOptions);


  // observe each image
  lazyImages.forEach(image => {
     imageObserver.observe(image);
  });

  // show background image
  function showImageBackground(node) {
     node.classList.remove('lazybg');
  }
});
</script>

Il vantaggio di questo metodo è che le immagini di sfondo che non sono nella viewport visibile non vengono accodate per il download. Ciò libera risorse per il browser durante la fase di caricamento. Per altre tecniche di questo tipo, vedi come differire le immagini fuori schermo (offscreen images).

Conclusione

Entrambi i metodi sono efficaci nel differire l'immagine di sfondo a favore di immagini più importanti come l'immagine di Largest Contentful Paint. Il primo metodo è davvero facile da implementare e ottiene risultati rapidi. Il secondo metodo aggiunge un vero comportamento di lazy load alle immagini di sfondo e fornirà un aumento del PageSpeed maggiore.

Fai attenzione quando applichi uno qualsiasi di questi metodi. Se devi differire le immagini di sfondo, la tua pagina è quella che mi piace chiamare 'lenta per progettazione (slow by design)'. Il metodo preferido per risolvere questo problema sarebbe riscrivere le tue pagine ed evitare l'uso di immagini di sfondo.