Correggere Largest Contentful Paint image was lazily loaded in Lighthouse

Largest Contentful Paint image was lazily loaded: in breve

"Il lazy-loading dell'immagine di Largest Contentful Paint attiverà un avviso in Lighthouse." Le immagini caricate con lazy load vengono messe in coda per il download molto più tardi rispetto alle immagini eager, ritardando la metrica LCP. 

Ultima revisione di Arjen Karel nel febbraio 2026

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

"Quando applichi il lazy load a un elemento immagine, dici esplicitamente al browser di depriorizzare questa immagine."

Ciò significa che le immagini non-lazy vengono programmate prima. Quando l'immagine lazy è 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 questo problema richiedendo il download e l'esecuzione di JS prima che inizi il lazy loading.

Secondo il Web Almanac 2025, il 10,4% delle pagine mobile applica ancora il lazy-load nativo alla propria immagine LCP e un altro 5,9% utilizza il lazy loading basato su JavaScript. Ciò significa che circa 1 pagina su 6 ritarda attivamente il suo contenuto più importante.

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

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

Questo avviso viene visualizzato quando l'immagine di Largest Contentful Paint viene caricata con lazy-load. Ai fini della page speed, "dovresti caricare questo elemento il prima possibile. Il lazy loading di questo elemento potrebbe ritardare il Largest Contentful Paint."

Un rapido promemoria: lazy loading

"Il lazy loading si verifica 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 due metodi.

Lazy loading nativo

"Il lazy loading nativo 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 con lazy load"
>

Lazy loading basato su JavaScript

"Il lazy loading basato su JavaScript utilizza un'API JavaScript chiamata Intersection Observer per determinare quando un'immagine si trova all'interno o vicino alla viewport visibile." Quando viene rilevata, viene scambiato l'attributo src. Riconoscilo 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 con lazy load"
>

In che modo 'lazy loading Largest Contentful Paint image' influisce sulla page speed?

"L'elemento di Largest Contentful Paint è l'elemento più grande che è stato dipinto (painted) sullo schermo, nella 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 il painting più rapido. Tuttavia, il lazy loading esplicito la depriorizza, mettendo in coda altre risorse in anticipo. Con il lazy loading JavaScript, aggiungi 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 rileva le immagini mentre sta ancora analizzando (parsing) l'HTML e inizia a recuperarle in anticipo. Il lazy loading disattiva questa scoperta anticipata, che è esattamente il motivo per cui aumenta il ritardo di caricamento delle risorse LCP (resource load delay).

In un esempio della scheda network di Chrome con un'immagine LCP lazy e sei immagini eager, l'immagine lazy 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. I motivi tecnici dei ritardi dell'LCP includono:

• "Le immagini lazy verranno messe in coda per il download in un momento molto successivo rispetto alle immagini non-lazy (eager)."
• Le immagini lazy in genere vengono scaricate con priorità bassa.
• "Altri elementi come immagini normali, script differiti (deferred), font ecc. potrebbero essere programmati per il download prima delle immagini lazy."
• Il lazy loading JavaScript dipende dal sovraccarico (overhead) del download e dell'esecuzione dello script.

Come risolvere 'Largest Contentful Paint image was lazily loaded'

"Risolvere l'avviso è semplice: non applicare il lazy load a questa immagine."

In teoria

• Per il lazy loading nativo, rimuovi loading="lazy" o cambialo in loading="eager"
• Per il lazy loading JavaScript, passa ad 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 risolvere le hero image lente per ulteriori tecniche di ottimizzazione, tra cui preloading, fetchpriority e immagini responsive.

Nella vita reale

I plugin di ottimizzazione spesso applicano automaticamente il lazy-load a tutte le immagini senza distinguerne l'importanza. La maggior parte consente di bypassare 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 le versioni successive non applicano più il lazy-load alle prime immagini e aggiungono automaticamente fetchpriority="high" alla probabile immagine 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 capitolo sulle prestazioni del Web Almanac 2022, il 72% delle pagine con un'immagine LCP caricata in modo lazy sono siti WordPress.

Soluzione alternativa (Workaround) per 'Largest Contentful Paint image was lazily loaded'

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

• Applica il lazy load a tutte le immagini in modo che le immagini eager below-the-fold non vengano scaricate per prime
• Evita le immagini di sfondo (background images) per prevenire download concorrenti
• Precarica (Preload) l'elemento LCP per programmare il download anticipato
• Disabilita il lazy loading JavaScript e usa invece quello nativo
• Aggiungi fetchpriority="high" all'elemento LCP per una programmazione anticipata. Per i dettagli su come i browser danno la priorità alle risorse, vedi la guida alla prioritizzazione delle risorse.
• Ottimizza tutte le immagini utilizzando tecniche responsive e formati di nuova generazione (next-gen) per ridurre i tempi di download.

Dopo aver rimosso il lazy loading dalla tua immagine LCP, verifica il miglioramento con Real User Monitoring. L'avviso di Lighthouse è basato sui laboratori (lab-based), ma Google utilizza dati sul campo (field data) di utenti reali per i segnali di ranking. Sui siti monitorati da CoreDash, le pagine senza immagini LCP con lazy-load ottengono un punteggio del 79% 'buono' (good) su LCP rispetto al 52% delle pagine che applicano ancora il lazy-load al loro elemento LCP.