# Lazy loading: come ottimizzare le performance del vostro sito web.

Nel processo di [ottimizzazione delle performance del vostro sito web](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/ottimizzazione-consigli-e-trucchi-per-un-sito-piu-veloce/) prima o poi incontrerete il termine lazy loading. Questo diffuso metodo aiuta a migliorare il tempo di caricamento soprattutto nei siti web con molti dati, immagini o video.

## Cos’è il lazy loading e come funziona?

Quando si richiama un sito web, il browser ricarica tutte le risorse necessarie per presentare la pagina così come la si desidera. Nel farlo **vengono richiamati tutti gli oggetti, anche quando questi non si trovano nell’area visibile**, bensì “below the fold” (che si potrebbe spiegare con: *al di fuori del campo visivo*). Ciò comporta, tra l’altro, un tempo di caricamento superiore e non necessario. Per ovviare a tutto questo gli sviluppatori utilizzano il lazy loading. Con l’aiuto di uno script, come ad esempio [LazyLoad](https://github.com/verlok/vanilla-lazyload "GitHub: Vanilla LazyLoad") il browser carica immagini e altri dati solo quando questi si trovano nel viewport (area di visualizzazione) dell’utente, ad esempio quando si scorre la pagina o si aumenta la finestra del browser.

La funzionalità del metodo lazy load è più chiara se si pensa agli oggetti immagine: per poter utilizzare il lazy loading dovete adattare il markup del tag *img*. Al posto dell’attributo *src*, il metodo utilizza un **attributo *data***, incluse indicazioni sulle fonti adeguate. Non appena l’immagine si troverà nell'area visibile, il rispettivo script inserisce l’attributo *src* tramite l’attributo *data*, così compare l’immagine. Per il caricamento è possibile utilizzare effetti fade-in o slide-in.

## Come si può utilizzare il lazy loading?

Ci sono varie possibilità per integrare il lazy loading nel proprio sito web. L’integrazione dei metodi lazy loading negli anni è stata costantemente implementata e migliorata. Nei paragrafi seguenti vi presenteremo alcune delle soluzioni preferite per l’implementazione della procedura.

### Lazy loading con Java Script

Attualmente sono molti i template JavaScript per il lazy loading, che potete semplicemente inserire all’interno del vostro sito web. Il già citato script [LazyLoad](https://www.andreaverlicchi.eu/vanilla-lazyload/ "Vanilla Lazy Load Webseite") costituisce ad esempio una soluzione rapida senza jQuery. Oltre ad offrire la possibilità di impostare un lazy loading nativo per immagini, video e iFrames, lo script di 2,4 KB (Kilobyte) supporta anche immagini responsive.

Un’alternativa a LazyLoad è data dallo script [Lazy Load Remastered](https://appelsiini.net/projects/lazyload/ "appelsiini.net: Lazy Load Remastered") di Mika Tuupola. A differenza di LazyLoad, questo script punta su jQuery e offre alcuni piacevoli effetti come ad esempio la tecnica blur.

### Lazy loading nativo

Il lazy loading nativo è il sistema più semplice per integrare i metodi di lazy load nel vostro progetto web. Questo metodo inizialmente era disponibile solo per il browser Google Chrome (a partire dalla versione 75) e ora anche per Firefox, Edge e Opera. Per utilizzare questo metodo, aggiungete semplicemente ai contenuti della rispettiva pagina web l’attributo di caricamento adeguato.

```none
<img src="esempio.png" loading="lazy" alt="…">
<iframe src="https:// esempio-domino.de" loading="lazy" alt="…"></iframe>
```

Accanto al valore “lazy” per il lazy loading avete a disposizione i seguenti valori:

- **eager**: il browser carica l’oggetto direttamente quando viene richiamata la pagina.
- **auto:** è il browser a decidere se l’oggetto va caricato immediatamente o in ritardo.

Il vantaggio del lazy loading nativo è che il browser non deve caricare biblioteche JavaScript aggiuntive. Ciò consente non solo di **risparmiare** **tempo di caricamento**, ma assicura anche che le immagini del browser vengano caricate tramite lazy load anche quando l’utente ha disattivato JavaScript.

### Lazy loading con l’API Intersection Observer

Se integrate lazy loading con Java Script, il browser consulterà costantemente la posizione degli oggetti. Ciò può causare effetti secondari indesiderati come dei rallentamenti e rappresenta un carico aggiuntivo per il server. Con l’API Intersection Observer la situazione cambia: l**’interfaccia** osserva i cambiamenti degli elementi relativamente a un determinato elemento genitore. L'**elemento genitore** è, **in molti casi, il viewport.** Se l’oggetto si sovrappone all’elemento genitore, o se viene modificata la distanza tra gli elementi di un determinato valore, l’Intersection Observer svolge una [funzione callback](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/cose-una-funzione-di-callback/) e mostra l’elemento.

---

### Consiglio

Al momento, il lazy loading nativo non funziona con Safari (né in macOS, né in iOS). Ma siccome Safari supporta l’API Intersection Observer, potete utilizzare un [polyfill](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/polyfill/) in base all’observer.

---

### Lazy loading tramite plugin di WordPress

Se avete [creato la vostra pagina Internet con WordPress](https://www.ionos.it/digitalguide/hosting/blog/creare-un-sito-con-wordpress/), potete **integrare** lazy loading comodamente **con un plug-in**, ad esempio [a3 Lazy Load](https://it.wordpress.org/plugins/a3-lazy-load/ "a3 Lazy Load su WordPress.org"). Oltre a immagini e video, l’estensione supporta il metodo lazy load anche per altri contenuti integrati.

## Lazy loading e il problema dei tracking pixel

Spesso i gestori inseriscono dei pixel per tracciare il comportamento dell’utente all’interno del sito Internet. A volte questi [tracking pixel](https://www.ionos.it/digitalguide/online-marketing/analisi-web/cose-un-pixel-di-tracciamento/ "Cos’è un pixel di tracciamento?") (pixel di monitoraggio) vengono implementati in un’area non visibile. Se applicate il lazy loading a tutte le immagini, il browser carica il tracking pixel quando l’immagine si trova in un’area visibile. Ne consegue che andranno persi **numeri importanti relativi ai clic e alle conversioni.**

A seconda della versione utilizzata però, potete anche **caricare** il tracking pixel in **maniera separata direttamente quando viene richiamata la pagina:**

- Lazy loading nativo: aggiungete al tracking pixel l’**attribute loading="eager"**.
- Lazy loading con Java Script: attribuite al tracking pixel una determinata classe che **escluderete** nel codice JavaScript. In alternativa potete attribuire a tutti gli oggetti, che il browser deve caricare tramite lazy load, una classe e applicate lo script esplicitamente a questi.

## Pro e contro del lazy loading riassunti in una tabella

<table>
  <thead>
    <tr>
      <th>Vantaggi</th>
      <th>Svantaggi</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Migliori performance</td>
      <td>Possibili perdite relative alla user experience: ad esempio non è possibile il backtracking in caso di struttura inadatta della pagina.</td>
    </tr>
    <tr>
      <td>Minor carico relativo al traffico dati per l’host</td>
      <td>Codice aggiuntivo nel caso di integrazione con JavaScript</td>
    </tr>
    <tr>
      <td></td>
      <td>Eventualmente necessarie delle librerie esterne</td>
    </tr>
    <tr>
      <td></td>
      <td>L’integrazione JavaScript prevede che l’utente consenta gli script</td>
    </tr>
  </tbody>
</table>


This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/creare-siti/lazy-loading/](https://www.ionos.it/digitalguide/siti-web/creare-siti/lazy-loading/) for AI/LLM consumption.