Utilizzo attributo loading "lazy" con immagini in html per velocizzare il caricamento
In ottica SEO e posizionamento delle pagine web sul browser è indispensabile ottimizzare ogni minimo dettaglio.
L’attributo loading nelle immagini è un metodo semplice ed efficace per migliorare il caricamento della pagina web.
Le immagini contribuisco in modo considerevole sul tempo di caricamento di una pagina web ed è per questo fondamentale ottimizzarne l’utilizzo, affinché, non creino punti di blocco del rendering della pagina stessa.
Per i browser se l’attributo loading non viene specificato, lo considerano settato di default a "eager”.
In questo modo, tutte le immagini all’interno della pagina web verranno caricate a runtime immediatamente, non appena si accede al contenuto.
Immaginate quindi, un sito o un articolo con all’interno numerose immagini, la gestione dell’attributo loading influenzerà la velocità di caricamento in maniera considerevole.
L’attributo loading settato a “lazy” dirà al browser di caricare l’immagine “lentamente”, quando l’utente effettuerà lo scroll della pagina.
In questo modo, tutto il peso delle immagini ed i tempi di caricamento, saranno spalmati man mano che si scorre sul sito e non tutti all’inizio durante il caricamento principale.
In poche parole, le immagini verranno caricate in modo asincrono rispetto al resto della pagina web.
Per utilizzare l’attributo loading, basta inserirlo nel codice html della tua pagina, nel tag img nel seguente modo:
È preferibile non inserirlo in immagini visualizzabili nel fold (parte superiore di una pagina web visibile lato utente senza alcuna azione di scrolling) del sito web, perché altrimenti non saranno subito visualizzate.
Googlebot è in grado di scansionare ed indicizzare le pagine web in cui è correttamente implementato
l'attributo loading="lazy".
Nel caso in cui l'attributo non venga utilizzato adeguatamente, il crawler potrebbe non visionare correttamente i contenuti, nascondendo dettagli al motore di ricerca.
L’attributo loading è compatibile con i seguenti browsers:
| BROWSER | VERSIONE |
| Google Chrome | 77.0 |
| Mozzilla | 75.0 |
| Google Explorer | 79.0 |
| Safari | Non supportato |
| Opera | 64.0 |
Nel caso in cui il browser non supporti l’attributo loading, come Safari, le immagini verranno caricate tutte nella fase iniziale, ottimizzale al meglio ed utilizza formati immagini idonei per il web.
Se l'a guida'articolo su utilizzo attributo loading lazy per immagini,
ti è piaciuta, seguici sulla pagina Facebook ed Instagram per non perdere altre guide, consigli e recensioni.
Se l'articolo ti è piaciuto lascia anche un like o un commento.