Caricamento lento delle immagini

Jeremy Wagner
Rachel Andrew

Le immagini possono essere visualizzate su una pagina web perché sono incorporate nel codice HTML come elementi <img> o come immagini di sfondo CSS. In questo post scoprirai come eseguire il caricamento lento per entrambi i tipi di immagini.

Immagini in linea

I candidati al caricamento lento più comuni sono le immagini utilizzate negli elementi <img>. Con le immagini in linea abbiamo tre opzioni per il caricamento lento, che possono essere utilizzati in combinazione per la migliore compatibilità tra i browser:

Utilizzo del caricamento lento a livello di browser

Chrome e Firefox supportano il caricamento lento con l'attributo loading. Questo attributo può essere aggiunto agli elementi <img> e anche agli elementi <iframe>. Il valore lazy indica al browser di caricare immediatamente l'immagine se si trova nell'area visibile. e recuperare altre immagini quando l'utente scorre nelle vicinanze.

Visualizza il campo loading degli MDN compatibilità del browser per i dettagli sul supporto dei browser. Se il browser non supporta il caricamento lento, l'attributo verrà ignorato. e le immagini verranno caricate immediatamente, come di consueto.

Per la maggior parte dei siti web, l'aggiunta di questo attributo alle immagini in linea comporterà un miglioramento delle prestazioni e salvano il caricamento di immagini da parte degli utenti che non riuscivano mai a scorrere. Se hai un numero elevato di immagini e vuoi assicurarti che gli utenti di browser che non supportano il caricamento lento dovrai combinarla con uno dei metodi spiegati di seguito.

Per scoprire di più, consulta la pagina relativa al caricamento lento a livello di browser per il web.

Utilizzo di Intersection Observer

Per eseguire il polyfill del caricamento lento degli elementi <img>, utilizziamo JavaScript per verificare se questi si trovano nella area visibile. Se lo sono, i relativi attributi src (e talvolta srcset) sono con gli URL corrispondenti ai contenuti dell'immagine desiderati.

Se hai già scritto codice per il caricamento lento, potresti aver completato la tua attività. mediante gestori di eventi come scroll o resize. Sebbene questo approccio sia più compatibili tra i vari browser, i browser moderni offrono una un modo efficace per controllare la visibilità degli elementi tramite API Intersection Observer.

L'osservatore di intersezione è più facile da usare e leggere rispetto al codice che si basa su vari di eventi, perché basta registrare un osservatore per anziché scrivere noioso codice di rilevamento della visibilità degli elementi. Tutti che rimane da fare è decidere cosa fare quando un elemento è visibile. Supponiamo che questo pattern di markup di base per gli elementi <img> caricati lentamente:

<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x" alt="I'm an image!">

Ci sono tre parti pertinenti di questo markup su cui dovresti concentrarti:

  1. L'attributo class, che è lo strumento con cui selezionerai l'elemento JavaScript.
  2. Attributo src, che fa riferimento a un'immagine segnaposto che verrà visualizzata quando viene caricata per la prima volta la pagina.
  3. Gli attributi data-src e data-srcset, che sono attributi segnaposto contenente l'URL dell'immagine che caricherai una volta che l'elemento sarà nell'area visibile.

Ora vediamo come usare Intersection Observer in JavaScript per il caricamento lento. con il seguente pattern di markup:

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to event handlers here
  }
});

Nell'evento DOMContentLoaded del documento, questo script esegue una query nel DOM per trovare Elementi <img> con una classe di lazy. Se è disponibile Intersection Observer, crea un nuovo osservatore che esegue un callback quando gli elementi img.lazy inseriscono il valore area visibile.

Intersection Observer è disponibile in tutti i browser moderni. Pertanto, l'utilizzo come polyfill per loading="lazy" garantirà la disponibilità del caricamento lento per la maggior parte dei visitatori.

Immagini in CSS

Sebbene i tag <img> siano il modo più comune per utilizzare le immagini nelle pagine web, può essere richiamato anche tramite background-image proprietà (e altre proprietà). Il caricamento lento a livello di browser non si applica alle immagini di sfondo CSS. quindi devi prendere in considerazione altri metodi se hai immagini di sfondo per il caricamento lento.

A differenza degli elementi <img> che vengono caricati indipendentemente della loro visibilità, il comportamento di caricamento delle immagini in CSS viene fatto con speculazione. Quando il documento e l'oggetto CSS di base ed eseguire il rendering albero vengono creati, il browser esamina il modo in cui il CSS viene applicato a un documento prima richiedendo risorse esterne. Se il browser ha determinato una regola CSS che coinvolgono una risorsa esterna non si applica al documento come è attualmente vengono creati, il browser non lo richiede.

Questo comportamento speculativo può essere utilizzato per rimandare il caricamento delle immagini in CSS usare JavaScript per determinare quando un elemento si trova all'interno dell'area visibile applicando successivamente una classe all'elemento che applica lo stile richiamando una immagine di sfondo. Questo fa sì che l'immagine venga scaricata quando necessario anziché al caricamento iniziale. Ad esempio, prendiamo un elemento che contiene immagine di sfondo hero grande:

<div class="lazy-background">
  <h1>Here's a hero heading to get your attention!</h1>
  <p>Here's hero copy to convince you to buy a thing!</p>
  <a href="/buy-a-thing">Buy a thing!</a>
</div>

In genere l'elemento div.lazy-background contiene lo sfondo hero richiamata da alcuni CSS. In questo esempio di caricamento lento, puoi isolare proprietà background-image dell'elemento div.lazy-background tramite un visible classe aggiunta all'elemento quando si trova nell'area visibile:

.lazy-background {
  background-image: url("hero-placeholder.jpg"); /* Placeholder image */
}

.lazy-background.visible {
  background-image: url("hero.jpg"); /* The final image */
}

Da qui, utilizza JavaScript per verificare se l'elemento si trova nell'area visibile (con Osservatore dell'intersezione!) e aggiungi la classe visible alla div.lazy-background in quel momento, che carica l'immagine:

document.addEventListener("DOMContentLoaded", function() {
  var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-background"));

  if ("IntersectionObserver" in window) {
    let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add("visible");
          lazyBackgroundObserver.unobserve(entry.target);
        }
      });
    });

    lazyBackgrounds.forEach(function(lazyBackground) {
      lazyBackgroundObserver.observe(lazyBackground);
    });
  }
});

Effetti sulla visualizzazione più grande con contenuti (LCP)

Il caricamento lento è un'ottima ottimizzazione che riduce sia l'utilizzo dei dati complessivo sia la contesa della rete durante l'avvio, rinviando il caricamento delle immagini a quando sono effettivamente necessarie. Ciò può migliorare i tempi di avvio e ridurre l'elaborazione sul thread principale, riducendo il tempo necessario per la decodifica delle immagini.

Tuttavia, il caricamento lento è una tecnica che può influire negativamente sul Largest Contentful Paint LCP del tuo sito web se non ti piace questa tecnica. È consigliabile evitare il caricamento lento delle immagini che si trovano nell'area visibile durante l'avvio.

Quando utilizzi programmi di caricamento lento basati su JavaScript, conviene evitare il caricamento lento delle immagini nell'area visibile, perché queste soluzioni spesso utilizzano un attributo data-src o data-srcset come segnaposto per gli attributi src e srcset. Il problema qui è che il caricamento di queste immagini verrà ritardato perché lo scanner di precaricamento del browser non riesce a trovarle durante l'avvio.

Anche l'utilizzo del caricamento lento a livello di browser per il caricamento lento di un'immagine nell'area visibile può tornare a essere presente. Quando loading="lazy" viene applicato a un'immagine nell'area visibile, l'immagine viene ritardata finché il browser non sa con certezza che si trova nell'area visibile, il che può influire sull'LCP di una pagina.

Non utilizzare mai il caricamento lento delle immagini visibili nell'area visibile durante l'avvio. Si tratta di un pattern che influisce negativamente sull'LCP del tuo sito e, di conseguenza, sull'esperienza utente. Se hai bisogno di un'immagine all'avvio, caricala il più rapidamente possibile evitando il caricamento lento.

Caricamento lento delle librerie

Se possibile, dovresti utilizzare il caricamento lento a livello di browser, ma se ti trovi in una situazione in cui non è possibile farlo, ad esempio un gruppo significativo di utenti che dipendono ancora da browser meno recenti, puoi utilizzare le seguenti librerie per il caricamento lento delle immagini:

  • lazysizes è una funzione lazy completa di caricamento di una libreria che esegue il caricamento lento di immagini e iframe. Lo schema che utilizza è piuttosto in modo simile agli esempi di codice mostrati qui, in quanto si associa automaticamente a una lazyload sugli elementi <img> e richiede di specificare gli URL immagine in Attributi data-src e/o data-srcset, i cui contenuti vengono scambiati in attributi src e/o srcset, rispettivamente. Utilizza l'intersezione Osservatore (che puoi compilare con il polyfill) e può essere esteso con una serie di di rete per come il caricamento lento di video. Scopri di più sull'uso delle dimensioni lazy.
  • vanilla-lazyload è un un'opzione leggera per il caricamento lento di immagini, immagini di sfondo, video, iframe e script. Sfrutta Intersection Observer, supporta immagini reattive e consente il caricamento lento a livello di browser.
  • lozad.js è un altro file che utilizza solo Intersection Observer. Di conseguenza, offre prestazioni elevate ma dovranno essere compilati automaticamente prima di poter essere utilizzati su browser meno recenti.
  • Se hai bisogno di una libreria di caricamento lento specifica per React, prendi in considerazione react-lazyload. Mentre non utilizza Intersection Observer, offre un metodo lazy familiare caricare immagini per coloro che sono abituati a sviluppare applicazioni con React.