Precaricare l'immagine del Largest Contentful Paint

Che cos'è il Preloading (Precaricamento)?

Il preloading dice al browser di scaricare qualcosa in anticipo, prima che inizi il rendering principale. Il file è pronto prima e non blocca il rendering della pagina. In termini di tempistiche LCP, il preloading riduce il Resource Load Delay (Ritardo di Caricamento della Risorsa): il divario tra la ricezione dell'HTML da parte del browser e l'inizio del download dell'immagine LCP.

<link rel="preload"
as="image"
href="image.jpg"
fetchpriority="high"
imagesrcset="image_400px.jpg 400w, image_800px.jpg 800w"
imagesizes="100vw">

Perché dovrei precaricare l'immagine del largest contentful paint?

Le immagini che sono visibili e nella viewport avranno un'alta priorità e verranno scaricate relativamente presto nell'intero processo di caricamento della pagina. I browser come Chrome faranno del loro meglio per dare priorità a quelle immagini per te e spesso faranno un buon lavoro. Tuttavia, i browser faranno un'ipotesi basata sull'esperienza per l'ordine di download e spesso daranno priorità ad altre risorse come JavaScript remoto o altre immagini visibili rispetto all'immagine LCP.

A causa di questo comportamento, il download dell'immagine LCP non inizierà così presto come potresti desiderare. Precaricare l'immagine del Largest Contentful Paint supererà questo problema.

I numeri lo confermano. Secondo il 2025 Web Almanac, il 76% delle pagine mobile ha un'immagine come elemento LCP. Eppure solo il 2,1% delle pagine precarica effettivamente quell'immagine. Si tratta di un'enorme opportunità mancata. Oltre a ciò, molte immagini LCP non sono rilevabili nell'HTML iniziale perché dipendono da JavaScript o CSS per essere renderizzate. Il browser non può scaricare ciò che non può trovare. Un tag preload risolve questo problema.

In che modo precaricare l'immagine del Largest Contentful Paint influisce sulle performance della pagina?

Precaricare l'immagine LCP la rende disponibile per il rendering in anticipo. Il risultato: un punteggio LCP migliore sia in Lighthouse che nei dati sul campo (field data).

Sui siti monitorati da CoreDash, il 98% dei caricamenti di pagina con un'immagine LCP precaricata ottiene un punteggio 'buono', rispetto all'88% senza preloading. L'LCP p75 per le immagini precaricate è circa 2 volte più veloce rispetto a quelle non precaricate.

Il preloading conta ancora di più quando l'immagine LCP non è la prima immagine scaricata dal browser. Questo accade quando:

• Ci sono più immagini nella viewport visibile
• L'immagine LCP è un'immagine di sfondo (le immagini di sfondo vengono solitamente scaricate dopo le immagini in primo piano)
• L'elemento LCP si affida a JavaScript. Ad esempio con uno script slider o se il tuo sito è costruito su un framework JavaScript come React.

Tuttavia, il 17% dei siti mobile carica in modo differito (lazy-load) la propria immagine LCP secondo il 2025 Web Almanac. Solo il 62% delle origini mobile passa l'LCP. Questi due fatti non sono non correlati. Se stai caricando in modo differito (lazy-loading) la tua immagine LCP, risolvi prima quello, poi precaricala.

Usa fetchpriority="high" sull'immagine LCP

Oltre al preloading, dovresti anche aggiungere fetchpriority="high" all'elemento stesso dell'immagine LCP. Questo dice al browser di dare priorità a questa immagine rispetto ad altre risorse. Un test su Google Flights ha mostrato miglioramenti dell'LCP da 2,6 secondi a 1,9 secondi solo aggiungendo questo attributo.

<img src="hero.jpg"
     fetchpriority="high"
     width="800"
     height="400"
     alt="Hero image">

Un'immagine precaricata ottiene comunque una priorità predefinita a meno che non la aumenti esplicitamente. Combinare rel="preload" con fetchpriority="high" sia sul tag link che sull'elemento img dà al browser il segnale più chiaro possibile. Per ulteriori informazioni su come i browser decidono cosa scaricare prima, consulta la guida completa alla priorità delle risorse.

<link rel="preload"
      as="image"
      href="hero.jpg"
      fetchpriority="high">

L'adozione di fetchpriority="high" è cresciuta dallo 0,03% dei siti mobile nel 2022 al 17,3% nel 2025, in gran parte grazie a WordPress che lo ha aggiunto al core. Se il tuo CMS non lo imposta automaticamente, aggiungilo tu stesso.

Come precaricare l'immagine del Largest Contentful Paint

Precaricare l'immagine LCP è facile. Ci sono solo 3 passaggi da compiere:

1. Determina l'elemento LCP: Esegui un audit con Lighthouse e controlla il Largest Contentful Paint Element. Assicurati che l'elemento LCP sia effettivamente un'immagine!
2. Controlla i formati delle immagini responsive. Se stai usando immagini responsive devi aggiungere tutte quelle dimensioni di immagine al srcset del tag preload. Altrimenti precaricheremo l'immagine sbagliata. Questo non farà altro che rallentare la pagina.
3. Aggiungi il tag preload. Tutto quello che resta da fare è aggiungere il tag preload.

<link
   <!-- indicate preload -->
   rel="preload"
   <!-- as is required and indicates we are preloading an image -->
   as="image"
   <!-- image src -->
   href="wolf.jpg"
   <!-- boost priority -->
   fetchpriority="high"
   <!-- optional: the responsive image srcset -->
   imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w"
   <!-- must match the sizes attribute on your img element -->
   imagesizes="100vw">

Il valore di imagesizes dovrebbe corrispondere all'attributo sizes sul tuo elemento <img>. Se la tua immagine viene visualizzata alla metà della larghezza della viewport, usa imagesizes="50vw". Sbagliare questo significa che il browser precaricherà la variante di immagine errata.

Precarica solo l'immagine LCP. Se precarichi troppe risorse, diluisci il potenziamento della priorità e il browser non può distinguere ciò che conta di più. Un solo preload per l'immagine LCP è tutto ciò di cui hai bisogno. Per un approccio ancora più aggressivo, puoi combinare il preloading con i 103 Early Hints per avviare il download prima ancora che arrivi l'HTML.

Il preloading fa in modo che il download dell'immagine inizi prima, ma l'immagine stessa deve ancora essere ottimizzata. Servila in un formato moderno come WebP o AVIF e con le giuste dimensioni. Consulta ottimizzare le immagini per i Core Web Vitals per il riepilogo completo.

Il preloading aiuta solo in una parte delle tempistiche dell'LCP: il ritardo prima che l'immagine inizi a essere scaricata. Se il tuo Time to First Byte è lento, nessuna quantità di preloading lo compenserà. Il tag preload vive nell'HTML, quindi il browser deve prima ricevere l'HTML. Controlla il tuo TTFB prima di aggiungere hint di preloading.

Come precaricare l'immagine del Largest Contentful Paint in WordPress

Precaricare l'immagine del Largest Contentful Paint in WordPress non è affatto difficile. Di solito l'immagine del Largest Contentful Paint è l'immagine in evidenza (Featured image) per un post di blog o una pagina. Con solo poche righe di codice possiamo ottenere l'url dell'immagine in evidenza e il srcset e aggiungerli all'header della pagina.

Aggiungi semplicemente questo codice direttamente dopo l'elemento title nel file header.php del tuo template attuale.

<?php if((int)get_post_thumbnail_id() > 0){
 $imgurl = get_the_post_thumbnail_url();
 $srcset = wp_get_attachment_image_srcset(get_post_thumbnail_id());
 $sizes = wp_get_attachment_image_sizes(get_post_thumbnail_id());
?>
 <link rel="preload"
       as="image"
       href="<?php echo $imgurl;?>"
       fetchpriority="high"
       imagesrcset="<?php echo $srcset;?>"
       imagesizes="<?php echo $sizes;?>">
<?php } ?>