Risolvere l'avviso Lighthouse Defer offscreen images

Cos'è l'avviso Lighthouse 'defer offscreen images'?

Cos'è l'avviso defer offscreen images in Lighthouse? Lighthouse segnala le pagine che presentano:

• Immagini che terminano al di sotto di 3 volte l'altezza del viewport.
  Quando un'immagine non è caricata in lazy loading e termina al di sotto di 3 volte l'altezza della parte visibile della pagina e inizia al di sotto della parte visibile della pagina.
• E sono più grandi di 0,02MB o impiegano più di 50ms per caricarsi.
  Le immagini piccole o inline vengono ignorate da Lighthouse. Spesso gli script di lazy loading utilizzano piccole immagini segnaposto.
• E non hanno l'attributo loading definito.
  Lighthouse ignora le immagini che hanno l'attributo loading="lazy" o loading="eager".

L'avviso 'defer offscreen images' non influisce direttamente su nessuna metrica di Lighthouse. In teoria le pagine con immagini fuori schermo potrebbero caricarsi piuttosto velocemente. In pratica spesso non è così. Troppe immagini fuori schermo influenzeranno molto probabilmente in modo indiretto metriche importanti di Lighthouse come Largest Contentful Paint (LCP).

Un rapido promemoria - Cos'è il lazy loading?

Il lazy loading significa che le immagini che non si trovano nella parte visibile della pagina possono essere caricate in un secondo momento, di solito appena prima che entrino nella vista durante lo scorrimento.

Cosa causa le immagini fuori schermo caricate in modo 'eager'?

Le immagini non vengono differite per impostazione predefinita. Le immagini fuori schermo che non vengono differite sono posizionate nella pagina perché l'attributo loading dell'immagine è vuoto o le immagini non sono compatibili con la libreria di lazy loading personalizzata. Le immagini fuori schermo sono di solito causate da:

• Plugin mal codificati nel tuo CMS.
• Plugin che disabilitano il lazy loading nativo
• Immagini di sfondo
• Page Builder che generano HTML scadente (ad esempio: Elementor o WP Bakery).
  
• Testo copiato e incollato in un editor WYSIWYG (come TinyMCE).
• Codifica del template scadente.

Come le 'immagini fuori schermo' influenzano il pagespeed

Le immagini fuori schermo non influiscono direttamente sulle metriche di Lighthouse. Rendono però il rendering di una pagina web inutilmente complicato, rendendo quasi impossibile ottenere un punteggio Lighthouse elevato. Il tuo browser dovrà scaricare più risorse prima che la pagina web possa essere visualizzata sullo schermo. Ci sono 3 problemi con le immagini fuori schermo.

• Il tuo browser dovrà scaricare più immagini prima di eseguire il rendering della pagina.
• Altre risorse necessarie per il rendering della pagina potrebbero essere ritardate poiché ricevono una priorità inferiore
• Il tuo browser potrebbe utilizzare molta più memoria durante il rendering della pagina.

Come risolvere 'defer offscreen images'

Per risolvere 'defer offscreen images' dovrai caricare in lazy loading le immagini che non sono nel viewport visibile. Puoi farlo aggiungendo il lazy loading nativo o una libreria di lazy loading. Per aggiungere il lazy loading nativo basta aggiungere 'loading="lazy" all'elemento immagine'.

<img      src="image.webp" 
     alt="a native lazy loaded image" 
     width="300" height="300">

In alternativa potresti aggiungere una libreria di lazy loading nativo come lazysizes o implementare il tuo lazy loading (è più facile di quanto potresti pensare).

Da lì dovrai fare un po' di ricerca. Cerca di capire cosa sta causando il posizionamento di queste immagini non differite nella pagina. Ci sono 5 sospetti principali:

1. Plugin mal codificati nel tuo CMS.
   Alcuni plugin potrebbero aggiungere HTML direttamente alla pagina e non utilizzare i corretti hook che abilitano il lazy loading.
2. Plugin che disabilitano il lazy loading nativo.
   Esistono plugin che disabilitano il lazy loading nativo per impostazione predefinita.
3. Page Builder che generano HTML scadente
   Page builder come Elementor o WP Bakery spesso creano codice ridondante che è tutt'altro che perfetto. Non c'è una soluzione facile per questo. I PageBuilder sono spesso parte del flusso di lavoro. La soluzione include la pulizia del codice ridondante e il cambiamento del flusso di lavoro.
4. Testo copiato e incollato in un editor WYSIWYG
   La maggior parte degli editor WYSIWYG come TinyMCE non fa un buon lavoro nel ripulire il codice incollato, specialmente quando incollato da un'altra fonte di testo ricco come Microsoft Word. Questi editor potrebbero non aggiungere il lazy loading alle tue immagini.
5. Codifica (del template) scadente.
   Anche quando il lazy loading è abilitato, le immagini hardcoded nei tuoi template potrebbero comunque non essere caricate in lazy loading. Controlla i tuoi template per le immagini fuori schermo e caricale in lazy loading.

Qual è migliore - Lazy loading nativo vs script di lazy loading?

Qual è migliore? Dovresti usare il loading="lazy" nativo del browser o uno script di lazy loading? Personalmente preferisco il lazy loading nativo del browser. Perché? Perché non ho bisogno di utilizzare uno script esterno che introdurrebbe overhead. Il lazy loading nativo è semplicemente più veloce. Tuttavia il lazy loading nativo non è supportato da Safari. Se la maggior parte dei tuoi utenti naviga sul web dai loro iPhone o Mac considera l'utilizzo di uno script di lazy loading. Nella maggior parte dei casi i vantaggi del lazy loading nativo superano gli svantaggi del non supportare Safari.

Soluzione alternativa per 'defer offscreen images'

A volte non è possibile differire le immagini fuori schermo. Potresti non avere accesso al template o il tuo CMS potrebbe non supportare il lazy loading. Ci sono alcune soluzioni alternative per ridurre l'impatto delle immagini fuori schermo. Queste soluzioni alternative sono tutt'altro che perfette e potrebbero introdurre una serie completamente nuova di sfide.

• Minimizza e comprimi le tue immagini.
  Minimizza e comprimi le tue immagini attuali. Le immagini più piccole hanno un impatto minore sulle prestazioni di caricamento rispetto alle immagini grandi.
• Usa formati di immagine nuovi e più veloci.
  Invece dei formati di file png e jpeg passa a un formato di file più veloce come WebP.
• Dividi le pagine grandi in più pagine.
  Dividere le pagine grandi in più pagine potrebbe ridurre il numero di immagini mostrate su una pagina.
• Implementa lo scroll infinito.
  Lo scroll infinito è fondamentalmente lazy loading, ma non per le immagini bensì per intere parti della pagina web. Quando si scorrono elementi ripetuti come le immagini (vedi Pinterest per esempio) lo scroll infinito potrebbe velocizzare considerevolmente la tua pagina.