Posticipa le immagini di sfondo

Posticipa le immagini di sfondo.

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

Le immagini di sfondo spesso causano problemi con i Core Web Vitals. Posticipare le immagini di sfondo non importanti in molti casi migliorerà i tuoi Core Web Vitals.

Troppo spesso vedo questo anti-pattern includere immagini di sfondo sui siti web. Specialmente sui siti WordPress che usano page-builder come elementor.

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

In questo piccolo articolo ti mostrerò come caricare con lazy-load queste immagini di sfondo al fine di dare priorità ad altre immagini più importanti sulla pagina.

Un avvertimento!

Lasciami iniziare con un avvertimento! Quando l'elemento LCP è ritardato da immagini di sfondo, sono stati fatti degli errori e dovresti preferibilmente correggerli nel modo giusto (fare il preload dell'immagine LCP, non usare il lazy load per l'immagine LCP, evitare del tutto le immagini di sfondo). Sfortunatamente a volte c'è semplicemente troppo codice legacy e non hai altra alternativa a breve termine se non quella di rattoppare il sito al meglio che puoi. È allora che puoi applicare una correzione come quella che ti presento oggi qui!

Metodo 1: Posticipa tutto 

Il metodo di posticipare tutto è semplicemente 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 posticipate fino a quando non viene attivato l'evento DOMContentLoaded. Questo darà al browser un po' di tempo extra per pianificare prima le risorse più importanti.

Ecco i passaggi coinvolti: prima di tutto andremo a sovrascrivere la proprietà di stile background-image per tutti gli elementi che hanno un'immagine di sfondo. Una volta che il contenuto del DOM è stato caricato, rimuoveremo nuovamente questa sovrascrittura. A quel punto le immagini non di sfondo saranno in coda per il download. Questo sarebbe un ottimo momento per accodare poi le immagini di sfondo meno importanti per il download.

Il codice

Per prima cosa crea uno stile e posizionalo nell'HEAD della pagina. È importante che questo stile abbia un id perché useremo questo id per rimuovere questo tag di stile in seguito. Ovviamente 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 è stato caricato, l'immagine LCP sarà probabilmente già in coda 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 il LCP non si attiva per un download anticipato, questo è probabilmente a causa di JavaScript. In quel caso potresti provare a scambiare l'evento 'DOMContentLoaded' con l'evento 'load'.

Metodo 2: Caricamento asincrono (Lazy-Load) delle immagini di sfondo

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

Funziona come segue: per prima cosa andremo ad identificare 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'intersection observer e una volta che sono vicini al viewport visibile andremo a caricare in lazy-load l'immagine di sfondo.

Il codice

Per prima cosa crea uno stile e posizionalo nell'HEAD della pagina. Questo stile sembra simile allo stile precedente ma invece di rimuovere la proprietà background-image per tutti gli elementi sulla pagina, andremo semplicemente a rimuoverla per gli elementi con un certo nome di classe.

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

Successivamente, quando il contenuto del DOM è stato caricato, inizieremo a osservare l'elemento che ha un'immagine di sfondo. Quando quell'elemento scorre nel viewport, rimuoveremo la classe .lazybg per attivare un download in background. 

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

  // tutti gli elementi con immagini di sfondo che dovrebbero essere caricati con lazy load 
  const lazyImages = document.querySelectorAll('.lazybg');
 
  // opzioni per l'observer
  const backgroundOptions = {
     threshold: 0,
     rootMargin: "0px 0px 50px 0px"
  };

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

    
  // osserva ogni immagine
  lazyImages.forEach(image => {
     imageObserver.observe(image);
  });

  // mostra l'immagine di sfondo
  function showImageBackground(node) {
     node.classList.remove('lazybg');
  }
});
</script>

Il vantaggio di questo metodo è che le immagini di sfondo che non sono nel viewport visibile non vengono accodate per il download. Questo libera risorse per il browser durante la fase di caricamento.

Conclusione

Entrambi i metodi sono efficaci nel posticipare l'immagine di sfondo a favore di immagini più importanti come l'immagine 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 maggiore incremento della velocità della pagina (pagespeed). 

Fai attenzione quando applichi uno di questi metodi. Se hai bisogno di posticipare le immagini di sfondo, la tua pagina è ciò che mi piace chiamare 'lenta di design'. I metodi preferiti per risolvere questo problema sarebbero riscrivere le tue pagine ed evitare l'uso di immagini di sfondo.