Precarica l’immagine Largest Contentful Paint – Diagnostica Pagespeed Lighthouse

perche pre caricare lcp

Precaricando l’immagine Largest Contentful Paint (LCP) è possibile visualizzare l’immagine hero o il banner del sito Web molto prima nel caricamento della pagina.

Un LCP veloce consente ai visitatori della tua pagina di consumare contenuti sostanziali prima, migliorando la loro esperienza utente.

Poiché LCP è uno dei Web Vitals, Google indica che ci sono vantaggi SEO associati al miglioramento dei tempi LCP precaricando anche le risorse correlate.

Osserviamo quindi i dettagli di questa indicazione diagnostica di Google Pagespeed.

Precarica l’immagine Largest Contentful Paint – in breve

Un’immagine di grandi dimensioni nella finestra visibile diventerà spesso l’elemento Largest Contentful Paint.

precarica lcp Illustrazione che mostra un enorme cannone venire caricato in uno scenari simile a quello del film mad max

Il precaricamento delle immagini con contenuti più grandi farà sì che il browser scarichi l’immagine paint con contenuti più grandi prima, nella fase di rendering, accelerando la metrica Largest ContentFul Paint nei Core Web Vitals.

infografica preload lcp

In questo articolo ti mostrerò quando, perché e come precaricare Largest Contentful Paint.

Argomenti

Cos’è il precaricamento(o preload)?

Il precaricamento di una risorsa attiverà il browser per scaricare una risorsa in anticipo, anche prima che venga avviato il rendering principale da parte del browser. Ciò garantisce che una risorsa sia disponibile prima e che sia meno probabile che blocchi il rendering della pagina poi, migliorando le prestazioni nella maggior parte dei casi.

Perché dovrei precaricare l’immagine più grande e ricca di contenuti?

Le immagini visibili e nel viewport avranno una priorità alta e verranno scaricate relativamente presto nell’intero processo di caricamento della pagina. I browser come Chrome faranno del loro meglio per dare la priorità a quelle immagini per te e spesso faranno un buon lavoro.

Tuttavia i browser faranno un’ipotesi plausibile su quale deve essere l’ordine di download di ogni elemento di pagina e daranno la 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 verrà avviato così presto come potresti desiderare. Il precaricamento del Largest Contentful Paint risolverà questo problema.

In che modo il precaricamento dell’immagine Largest Contentful Paint influisce sulle prestazioni della pagina?

Il precaricamento del Largest Contentful Paint renderà l’immagine disponibile per il rendering nelle prime fasi del processo di rendering. Questo di solito porta a un punteggio LCP migliore.
In quasi tutti i casi, precaricare l’elemento LCP ti darà punteggi Lighthouse e RuM migliori.

Precaricare l’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:

  • Sono presenti più immagini da rendere visibili nel  viewport(lo schermo dell’utente)
  • L’immagine LCP è un’immagine di sfondo (le immagini di sfondo vengono generalmente scaricate successivamente rispetto alle immagini in primo piano)
  • L’elemento LCP si basa su JavaScript. Ad esempio con uno script di scorrimento o se il tuo sito è basato su un framework JavaScript come REACT.

Come precaricare Largest Contentful Paint

Precaricare l’immagine LCP è relativamente semplice. Ci sono solo 3 passaggi da compiere:

  1. Determina l’elemento LCP: esegui un audit del faro e controlla l’elemento di vernice contenuto più grande. Assicurati che l’elemento LCP sia effettivamente un’immagine!
  2. Verificare la presenza di formati di immagine responsivi. Se stai utilizzando immagini responsive devi aggiungere tutte quelle dimensioni di immagine allo srcset del tag preload. Altrimenti precaricheremo l’immagine sbagliata. Ciò rallenterà solo la pagina.
  3. Aggiungi il tag di precaricamento. Tutto ciò che resta da fare è aggiungere il tag preload. La sintassi è semplice.
<link 
<!-- indica il preload -->
rel="preload" 
<!-- "as" è obbligatorio e indica che stiamo precaricando un'immagine -->
as="image" 
<!-- image src -->
href="wolf.jpg" 
<!-- opzionale: il srcset immagini responsive -->
imagesrcset="pippo400px.jpg 400w, pippo800px.jpg 800w">

Come precaricare Largest Contentful Paint in WordPress

Precaricare Largest Contentful Paint in WordPress non è affatto difficile. Di solito l’immagine Contentful Paint più grande è l’immagine in primo piano per un post o una pagina del blog. Con solo poche righe di codice possiamo prendere l’URL dell’immagine in evidenza e il srcset e aggiungerlo all’inizio della pagina.

Aggiungi semplicemente questo codice direttamente dopo l’elemento titolo nel file header.php del tuo modello 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());
 <link rel="preload" 
       as="image" 
       href="<?php echo $imgurl;?>" 
       imagesrcset="<?php echo $srcset;?>">
<?php } ?>.
da