Correggere l'avviso 'Largest Contentful Paint image was lazily loaded' in Lighthouse

Largest Contentful Paint image was lazily loaded - in breve.

Il lazy loading dell'immagine Largest Contentful Paint attiverà un avviso di Lighthouse. Le immagini con lazy loading verranno messe in coda per il download molto più tardi rispetto alle immagini non-lazy (eager). Questo causerà un rendering dell'immagine in ritardo e ritarderà la metrica Largest Contentful Paint. 

I browser sono abbastanza intelligenti da capirlo da soli, giusto? Sì, i browser sono piuttosto intelligenti, ma non in questo caso!

Quando applichi il lazy loading a un elemento immagine, dici esplicitamente al browser di de-prioritizzare questa immagine.

Questo significa che tutte le altre immagini non-lazy verranno programmate per il download prima delle tue immagini lazy. Quando questa immagine lazy è il tuo elemento LCP, probabilmente ritarderai il tuo LCP. Forse anche di molto!

Le cose peggiorano ulteriormente quando usi librerie di lazy loading basate su JavaScript come lazysizes.js. Ora il browser non solo ritarda il tuo elemento immagine LCP, ma devi anche aspettare che il JavaScript venga scaricato ed eseguito.

Correggi l'avviso di Lighthouse rimuovendo l'attributo loading="lazy" dalla tua immagine LCP o aggiornando i filtri dei tuoi plugin per bypassare il lazy loading per l'immagine LCP.

Cos'è l'avviso 'Largest Contentful Paint image was lazily loaded'?

Questo avviso viene mostrato quando l'immagine Largest Contentful Paint viene caricata con lazy loading dal browser. Perché? Perché applicare il lazy loading all'immagine più importante della pagina (l'elemento Largest Contentful Paint) è una cattiva idea. Per scopi di pagespeed dovresti caricare questo elemento il prima possibile. Il lazy loading di questo elemento potrebbe ritardare il Largest Contentful Paint.

Un breve promemoria: il lazy loading

Il lazy loading è quando un elemento, spesso un'immagine, non viene programmato per il download dal browser immediatamente durante il caricamento della pagina, ma piuttosto quando l'elemento è vicino alla parte visibile dello schermo. Esistono 2 metodi di lazy loading.

Lazy loading nativo

Il lazy loading nativo utilizza l'API nativa di lazy loading del browser. Per le immagini è semplice come aggiungere loading="lazy" al tag immagine. Il lazy loading nativo è attualmente supportato da tutti i browser moderni.

<img  
     src="image.png" 
     width="123" 
     height="123" 
     alt="a lazy loaded image"
>

Lazy loading basato su JavaScript

Il lazy loading basato su JavaScript utilizza un'API JavaScript chiamata intersection observer per determinare quando un'immagine è all'interno o vicina al viewport visibile. Quando un'immagine è nel viewport visibile, il src dell'immagine viene sostituito con l'immagine finale. Di solito puoi riconoscere il lazy loading basato su JavaScript dall'attributo data-src sull'immagine. Il lazy loading JavaScript è supportato da ancora più browser ma ha un serio svantaggio: 'utilizza JavaScript'. Per far funzionare il lazy loading, un file JavaScript deve essere scaricato. Questo significa che il lazy loading basato su JavaScript non può mai essere veloce ed efficiente come il lazy loading nativo

<img  
     src="small-placeholder.png" 
     width="123" 
     height="123" 
     alt="a lazy loaded image"
>

Come influisce un'immagine Largest Contentful Paint con lazy loading sul pagespeed?

Il lazy loading di quell'elemento ritarderà il momento in cui l'immagine LCP viene renderizzata sullo schermo. Questo farà credere al visitatore che la pagina si carichi più lentamente perché impiega più tempo per essere 'visivamente pronta'

L'immagine più importante, spesso l'elemento LCP, dovrebbe essere caricata immediatamente per garantire che possa essere renderizzata sullo schermo il più velocemente possibile.

Ora potresti pensare che un browser sarebbe abbastanza intelligente da capirlo da solo? Ti sbagli! Quando applichi il lazy loading a un elemento immagine, dici esplicitamente al browser di de-prioritizzare questa immagine. Questo significa che tutte le altre immagini non-lazy verranno programmate per il download prima delle tue immagini lazy. Quando questa immagine lazy è il tuo elemento LCP, probabilmente ritarderai il tuo LCP. Forse anche di molto!

Le cose peggiorano ulteriormente quando usi librerie di lazy loading basate su JavaScript come lazysizes.js. Ora il browser non solo ritarda il tuo elemento immagine LCP, ma devi anche aspettare che il JavaScript venga scaricato ed eseguito.

Basta dare un'occhiata a questa scheda network di Chrome dove ho applicato il lazy loading all'immagine LCP (HERO.jpg) e caricato immediatamente le altre 6 immagini. Vedrai che l'immagine HERO è l'ultima immagine a iniziare il download e anche l'ultima a completare il download!

Un po' più di dettaglio

Ora entriamo un po' più nel tecnico. Perché un browser non può capirlo da solo? Il fatto è che, con il lazy loading, stai specificatamente istruendo il browser a de-prioritizzare un'immagine. In molti casi questo significherà che il browser inizierà a scaricare prima altre risorse. Ed è esattamente questo che causa il ritardo nel LCP.

• Le immagini lazy verranno messe in coda per il download molto più tardi rispetto alle immagini non-lazy (eager).
• Le immagini lazy spesso vengono scaricate con bassa priorità.
• Altri elementi come immagini normali, script differiti, font ecc. potrebbero essere programmati per il download prima delle immagini lazy.
• Il lazy loading basato su JavaScript dipende da un JavaScript che deve essere scaricato ed eseguito prima che il lazy loading possa anche iniziare.
  

Come correggere 'Largest Contentful Paint image was lazily loaded'

Correggere l'avviso sull'immagine Largest Contentful Paint con lazy loading è semplice. Basta non applicare il lazy loading a questa immagine.

In teoria

• Se stai usando il lazy loading nativo, rimuovi loading="lazy" dall'elemento LCP o cambialo in loading="eager"
• Se stai usando il lazy loading basato su JavaScript, potresti considerare di passare al più veloce lazy loading nativo o semplicemente escludere l'immagine LCP dal lazy loading.
• Se stai usando qualche tipo di componente immagine come next/image, imposta strategy="eager".

Nella pratica

Nella pratica questo potrebbe causare qualche grattacapo. Molti siti usano plugin di ottimizzazione che applicano il lazy loading a tutte le immagini sulla pagina. Questi plugin non distinguono tra immagini importanti, sempre visibili e immagini sotto il fold.

La maggior parte dei plugin ti permetterà di 'bypassare il lazy loading' in base al nome del file, nome della classe o altri attributi. Questo significa che dovrai leggere la documentazione del tuo plugin o semplicemente cercare su Google '[nome del tuo plugin] + bypass lazy loading'. Poi modifica il file template e cambia la tua immagine principale di conseguenza o modifica le immagini nel tuo editor di pagina.

Soluzioni alternative per 'Largest Contentful Paint image was lazily loaded'

A volte il tuo CMS non ti permetterà di modificare le impostazioni di lazy loading delle immagini. In quel caso ci sono ancora alcune soluzioni alternative che puoi usare per minimizzare l'impatto.

• Applica il lazy loading a tutte le immagini per garantire che le immagini 'eager' sotto il fold non vengano scaricate prima dell'immagine LCP
  
• Evita le immagini di sfondo per garantire che nessuna immagine di sfondo venga scaricata prima dell'elemento LCP
  
• Precarica l'elemento LCP. Questo garantirà che l'immagine LCP venga programmata per il download il prima possibile
  
• Disabilita il lazy loading basato su JavaScript e passa al lazy loading nativo. Questo almeno rimuoverà il ritardo del JavaScript
  
• Aggiungi fetchpriority = "high" all'elemento LCP. Questo programmerà l'immagine per il download anticipato
  
• Ottimizza tutte le tue immagini. Usa immagini responsive e formati immagine di nuova generazione per ridurre il tempo necessario per scaricare le immagini.