Attributo "loading" in HTML5 - Migliora performance e UX con il lazy load nativo!

Introduzione

Breve descrizione dell'attributo "loading"

L'attributo loading in HTML5 è stato introdotto per migliorare l'efficienza del caricamento delle pagine web. Questo attributo, applicabile alle immagini (<img>) e agli iframe (<iframe>), consente agli sviluppatori di specificare come e quando questi elementi devono essere caricati rispetto alla visualizzazione del contenuto da parte dell'utente (per esempio: se l'immagine non è ancora visibile perchè ancora below-the-fold). La sua funzione principale è ottimizzare l'utilizzo delle risorse, ritardando il caricamento degli elementi non essenziali fino a quando non diventano visibili nel viewport a seguito dell'attività di scrolling dell'utente. In questo modo, si riducono i tempi di caricamento iniziali della pagina, migliorando sia l'esperienza utente (UX) sia il posizionamento nei motori di ricerca, che premiano le pagine con prestazioni elevate.

Perché è importante per il caricamento delle immagini e degli iframe

Il caricamento delle immagini e degli iframe può avere un impatto significativo sulle prestazioni di una pagina web. Elementi visivi di grandi dimensioni o contenuti esterni, come quelli incorporati tramite iframe, possono rallentare il tempo necessario per rendere la pagina visibile e interattiva agli utenti. Con l'attributo loading, è possibile differire il caricamento di questi elementi fino a quando non sono effettivamente necessari, riducendo il carico iniziale sul browser e migliorando il tempo di caricamento percepito. Questo approccio è particolarmente utile per le pagine con molte immagini o contenuti embed, poiché consente di ottimizzare la distribuzione delle risorse e di migliorare l'esperienza di navigazione, specialmente per gli utenti con connessioni lente o dispositivi meno potenti.

Focus sull'ottimizzazione delle performance delle pagine web

L'attributo loading rappresenta una soluzione semplice ma efficace per ottimizzare le performance delle pagine web. Utilizzandolo correttamente, si può ridurre il tempo di caricamento complessivo e migliorare i cosiddetti Core Web Vitals, metriche chiave utilizzate dai motori di ricerca, come Google, per valutare la qualità dell'esperienza utente. Il caricamento differito degli elementi non essenziali consente al browser di concentrare le risorse sulle parti critiche della pagina, come il contenuto above-the-fold (già visibili all'utente), garantendo una navigazione più fluida e reattiva. Questo approccio non solo aumenta la soddisfazione degli utenti, ma ha anche un impatto diretto sul ranking SEO, rendendo le pagine più competitive nei risultati di ricerca. Inoltre, l'ottimizzazione delle performance è essenziale in un contesto in cui i dispositivi mobili e le connessioni variabili rappresentano una quota sempre più significativa del traffico web.

Cosa fa l'attributo loading

l'attributo loading è applicabile ad elementi quali immagini (<img>) e iframe (<iframe>) e supporta due valori principali:

• lazy - posticipa il caricamento dell'elemento fino a quando non è prossimo ad entrare nel viewport. Questo comportamento è ideale per immagini o contenuti iframe non immediatamente visibili, come elementi che si trovano più in basso nella pagina.

  Utilizzo dell'attributo loading con valore "lazy"

  <img src="immagine.jpg" loading="lazy" alt="Immagine da caricare in modalità lazy">

• eager - indica che l'elemento deve essere caricato immediatamente, indipendentemente dalla sua posizione nel viewport. Questo valore è utile per contenuti critici, come immagini di intestazione o elementi che devono essere subito disponibili

  Utilizzo dell'attributo loading con valore "eager"

  <img src="immagine.jpg" loading="lazy" alt="Immagine da caricare in modalità eager">

Se l'attributo loading non è specificato, il browser decide autonomamente il comportamento di caricamento. Generalmente, la scelta ricade su un comportamento simile a eager, ma questo può variare in base al browser.

Best practice riguardo il lazy loading e la UX

L'attributo loading è uno strumento potente per migliorare le performance delle pagine web, ma il suo utilizzo richiede attenzione per ottenere risultati ottimali senza compromettere l'esperienza utente. Ecco alcune best practice da seguire.

• Usa loading="lazy" per contenuti non critici - Le immagini o gli iframe che si trovano fuori dal viewport iniziale dovrebbero essere caricati in modalità differita. Ad esempio, immagini di articoli in fondo alla pagina o mappe incorporate visibili solo dopo uno scroll. Questo riduce il carico iniziale sul browser e migliora i tempi di caricamento percepiti dagli utenti.
• Evita lazy per contenuti critici - Gli elementi essenziali per la struttura e la comprensione immediata della pagina, come il logo, le immagini di copertina (hero images) o le immagini vicine al fold, devono essere caricati con loading="eager" o senza l'attributo (default).Questo assicura che gli utenti vedano i contenuti chiave senza ritardi
• Considera le dimensioni delle immagini - Se un'immagine è troppo grande e si trova nella parte superiore della pagina, caricarla immediatamente può rallentare il rendering. In questi casi, valuta di ottimizzare l'immagine (ad esempio con tecniche di compressione o utilizzo di formati moderni come WebP).
• Usa immagini responsive - Associa l'attributo loading a tecniche di immagini responsive con gli attributi srcset e sizes, così da garantire il caricamento delle versioni più appropriate per il dispositivo.

  Utilizzo di immagini responsive in combinazione con il lazy load

  <img 

    src="immagine-piccola.jpg" 

    srcset="immagine-media.jpg 768w, immagine-grande.jpg 1200w" 

    sizes="(max-width: 768px) 100vw, 50vw" 

    loading="lazy" 

    alt="Immagine ottimizzata">

• Testa la compatibilità con i browser - Non tutti i browser supportano l'attributo loading. Sebbene i browser moderni offrano un buon supporto, è importante testare il comportamento in quelli meno recenti. Per i browser che non supportano loading, considera una delle molte soluzioni di terze parti basate su JavaScript.
• Bilancia performance e UX - Sebbene loading="lazy" migliori le performance, non abusarne: caricare troppe immagini in modalità lazy può causare ritardi visibili agli utenti quando scorrono rapidamente la pagina. Testa sempre il comportamento della tua pagina su dispositivi reali.
• Usa strumenti di analisi - Dopo aver implementato loading, utilizza strumenti come Google Lighthouse, PageSpeed Insights o WebPageTest per verificare il miglioramento delle prestazioni. Controlla anche i Core Web Vitals per assicurarti che i tempi di caricamento e la stabilità visiva siano ottimali.

Compatibilità tra browser

• Google Chrome ≥ 76
• Microsoft Edge ≥ 79
• Safari (macOS/iOS) ≥ 16
• Firefox ≥ 75
• Opera ≥ 64
• Internet Explorer - Non supportato

Internet Explorer, essendo un browser obsoleto, non supporta questa funzionalità. Per compatibilità con utenti che ancora lo utilizzano, valuta di gestire il lazy loading con librerie esterne o script personalizzati.