Preload dell'immagine Largest Contentful Paint

Cos'è il Preloading?

Il preloading di una risorsa farà in modo che il browser la scarichi in anticipo, ancor prima che inizi il rendering principale del browser. Ciò garantisce che una risorsa sia disponibile prima ed è meno probabile che blocchi il rendering della pagina, migliorando le prestazioni nella maggior parte dei casi. In termini di tempistiche dell'LCP, il preloading riduce il Resource Load Delay: l'intervallo 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 effettuare il preload dell'immagine Largest Contentful Paint?

Le immagini visibili e nel viewport avranno un'alta priorità e verranno scaricate relativamente presto nell'intero processo di caricamento della pagina. 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 plausibile sull'ordine di download e spesso daranno priorità ad altre risorse come JavaScript remoti o altre immagini visibili rispetto all'immagine LCP.

A causa di questo comportamento, il download dell'immagine LCP non inizierà così presto come vorresti. Il preload dell'immagine Largest Contentful Paint supererà questo problema.

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

In che modo il preload dell'immagine Largest Contentful Paint influisce sulle prestazioni della pagina?

Il preload dell'immagine Largest Contentful Paint renderà l'immagine disponibile per il rendering in anticipo nel processo di rendering. Questo di solito porta a un punteggio LCP migliore. In quasi tutti i casi il preload dell'elemento LCP ti darà punteggi Lighthouse e field data migliori.

Nei siti monitorati da CoreDash, il 98% dei caricamenti di pagina con un'immagine LCP in preload ottiene un punteggio 'good', rispetto all'88% senza preload. L'LCP p75 per le immagini in preload è circa 2 volte più veloce rispetto a quelle senza preload.

Il preload dell'elemento LCP potrebbe essere ancora più vantaggioso quando, per qualche motivo, l'immagine LCP non è la prima immagine che verrà scaricata. Ciò potrebbe accadere quando:

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

Tuttavia, il 17% dei siti mobile utilizza il lazy-load per la propria immagine LCP secondo il Web Almanac 2025. Solo il 62% delle origini mobile supera l'LCP. Questi due fatti non sono non correlati. Se stai caricando pigramente la tua immagine LCP (lazy-loading), risolvi prima questo problema, quindi esegui il preload.

Usa fetchpriority="high" sull'immagine LCP

Oltre al preload, dovresti anche aggiungere fetchpriority="high" all'elemento immagine LCP stesso. 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 semplicemente aggiungendo questo attributo.

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

Un'immagine in preload ottiene comunque la priorità predefinita a meno che non la si aumenti esplicitamente. Combinando 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 per primo, consulta la guida completa alla prioritizzazione 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 all'aggiunta di WordPress al suo core. Se il tuo CMS non lo imposta automaticamente, aggiungilo tu stesso.

Come effettuare il preload dell'immagine Largest Contentful Paint

Effettuare il preload dell'immagine LCP è facile. Ci sono solo 3 passaggi da fare:

1. Determina l'elemento LCP: Esegui un audit Lighthouse e controlla l'elemento Largest Contentful Paint. Assicurati che l'elemento LCP sia effettivamente un'immagine!
2. Controlla i formati di immagine responsive. Se stai usando immagini responsive devi aggiungere tutte quelle dimensioni di immagine all'attributo srcset del tag preload. Altrimenti faremo il preload dell'immagine sbagliata. Ciò non farà altro che rallentare la pagina.
3. Aggiungi il tag preload. Tutto ciò 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 a metà della larghezza del viewport, usa imagesizes="50vw". Sbagliare questo significa che il browser farà il preload della variante di immagine sbagliata.

Fai il preload solo dell'immagine LCP. Se effettui il preload di troppe risorse, diluisci l'aumento di priorità e il browser non riesce a distinguere ciò che conta di più. Un preload per l'immagine LCP è tutto ciò di cui hai bisogno. Per un approccio ancora più aggressivo, puoi combinare il preload con 103 Early Hints per avviare il download prima ancora che arrivi l'HTML.

Il preload fa in modo che l'immagine venga scaricata prima, ma l'immagine stessa deve ancora essere ottimizzata. Forniscila in un formato moderno come WebP o AVIF e alle giuste dimensioni. Vedi ottimizza le immagini per i Core Web Vitals per un riepilogo completo.

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

Come effettuare il preload dell'immagine Largest Contentful Paint in WordPress

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

Basta aggiungere 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 } ?>