Correggi 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 in Lighthouse." Le immagini caricate in modalità lazy loading vengono messe in coda per il download molto più tardi rispetto alle immagini eager, ritardando la metrica LCP. 

Ultima revisione di Arjen Karel a Febbraio 2026

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

"Quando carichi un elemento immagine in modalità lazy loading, dici esplicitamente al browser di de-prioritizzare questa immagine."

Questo significa che le immagini non lazy vengono programmate prima. Quando l'immagine in lazy loading è il tuo elemento LCP, probabilmente ritarderai il tuo LCP, potenzialmente di una quantità significativa! Le librerie di lazy loading basate su JavaScript come lazysizes.js aggravano la situazione richiedendo il download e l'esecuzione del JS prima che inizi il lazy loading.

Secondo il Web Almanac 2025, il 10,4% delle pagine mobile carica ancora l'immagine LCP tramite native lazy loading e un altro 5,9% utilizza il lazy loading basato su JavaScript. Si tratta di circa 1 pagina su 6 che ritarda attivamente il suo contenuto più importante.

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

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

Questo avviso viene visualizzato quando l'immagine Largest Contentful Paint viene caricata in modalità lazy loading. Ai fini della velocità della pagina, "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 è programmato per il download dal browser immediatamente durante il caricamento della pagina, ma piuttosto quando l'elemento è vicino alla parte visibile dello schermo." Esistono due metodi.

Native lazy loading

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

<img loading="lazy"
     src="image.png"
     width="123"
     height="123"
     alt="un'immagine caricata in lazy loading"
>

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 vicino al viewport visibile." Quando viene rilevata, viene scambiato l'attributo src. Lo puoi riconoscere dall'attributo data-src. Sebbene sia ampiamente supportato, "utilizza JavaScript", richiedendo il download prima dell'inizio del lazy loading, rendendolo più lento rispetto agli approcci nativi.

<img data-src="image.png"
     src="small-placeholder.png"
     width="123"
     height="123"
     alt="un'immagine caricata in lazy loading"
>

Come influisce un 'lazy loading Largest Contentful Paint image' sulla velocità della pagina?

"L'elemento Largest Contentful Paint è l'elemento più grande che è stato dipinto sullo schermo, nel viewport visibile, durante il caricamento della pagina." Segna il momento in cui la pagina appare visivamente pronta. Il lazy loading di questo elemento ritarda questa percezione, facendo percepire ai visitatori un caricamento più lento.

L'immagine più importante dovrebbe caricarsi immediatamente per una visualizzazione più rapida. Tuttavia, il lazy loading esplicito ne abbassa la priorità, mettendo in coda altre risorse prima. Con il lazy loading tramite JavaScript, si aggiungono ulteriori ritardi in attesa dell'esecuzione dello script.

Quando aggiungi loading="lazy" a un'immagine, il preload scanner del browser la salta completamente. Normalmente il preload scanner scopre le immagini mentre sta ancora analizzando l'HTML e inizia a recuperarle in anticipo. Il lazy loading rinuncia a questa scoperta anticipata, che è esattamente il motivo per cui aumenta il LCP resource load delay.

In un esempio della scheda network di Chrome con un'immagine LCP in lazy loading e sei immagini in eager loading, l'immagine in lazy loading inizia e finisce il download per ultima, dimostrando l'impatto nel mondo reale.

Qualche dettaglio in più

I browser non possono sovrascrivere automaticamente le direttive di lazy loading. Le ragioni tecniche per i ritardi del LCP includono:

• "Le immagini in lazy loading verranno messe in coda per il download molto più tardi rispetto alle immagini non lazy (eager)."
• Le immagini in lazy loading vengono generalmente scaricate con bassa priorità.
• "Altri elementi come immagini normali, script differiti, font, ecc. potrebbero essere programmati per il download prima delle immagini in lazy loading."
• Il lazy loading tramite JavaScript dipende dall'overhead del download e dell'esecuzione dello script.

Come correggere 'Largest Contentful Paint image was lazily loaded'

"Correggere l'avviso è semplice: non usare il lazy loading per questa immagine."

In teoria

• Per il native lazy loading, rimuovi loading="lazy" o modificalo in loading="eager"
• Per il lazy loading tramite JavaScript, passa agli approcci nativi o escludi l'immagine LCP.
• Per next/image di Next.js, imposta priority per caricare l'immagine in modo eager con un hint di preload.

Se il tuo elemento LCP è un'immagine hero, consulta la guida completa su come correggere le immagini hero lente per ulteriori tecniche di ottimizzazione, inclusi il preload, fetchpriority e le immagini responsive.

Nella vita reale

I plugin di ottimizzazione spesso caricano tutte le immagini in modalità lazy loading automaticamente, senza distinguerne l'importanza. La maggior parte consente di ignorare il lazy loading tramite nome file, classe o attributi. Controlla la documentazione del tuo plugin e aggiorna i tuoi template di conseguenza.

WordPress 6.3 e versioni successive non applicano più il lazy loading alle prime immagini e aggiungono automaticamente fetchpriority="high" all'immagine probabile LCP. Se continui a visualizzare questo avviso su un sito WordPress, è probabile che un plugin di ottimizzazione di terze parti stia sovrascrivendo questo comportamento. Secondo il Web Almanac 2022, il 72% delle pagine con un'immagine LCP in lazy loading sono siti WordPress.

Soluzione alternativa per 'Largest Contentful Paint image was lazily loaded'

Quando le restrizioni del CMS impediscono di modificare le impostazioni del lazy loading, le soluzioni alternative minimizzano l'impatto:

• Applica il lazy loading a tutte le immagini in modo che le immagini eager below-the-fold non vengano scaricate per prime
• Evita le immagini di sfondo per prevenire download concorrenti
• Fai il preload dell'elemento LCP per programmare il download in anticipo
• Disabilita il lazy loading tramite JavaScript e utilizza invece quello nativo
• Aggiungi fetchpriority="high" all'elemento LCP per una programmazione anticipata. Per i dettagli su come i browser danno priorità alle risorse, vedi la guida alla priorità delle risorse.
• Ottimizza tutte le immagini utilizzando tecniche responsive e formati di nuova generazione per ridurre i tempi di download.

Dopo aver rimosso il lazy loading dalla tua immagine LCP, verifica il miglioramento con il Real User Monitoring. L'avviso di Lighthouse è basato su lab data, ma Google utilizza i field data degli utenti reali per i segnali di ranking. Nei siti tracciati da CoreDash, le pagine senza immagini LCP in lazy loading ottengono un punteggio 'buono' del 79% sul LCP rispetto al 52% per le pagine che applicano ancora il lazy loading al loro elemento LCP.