Immagine LCP precaricata

Silktide controlla se l'immagine principale della pagina, ovvero l'elemento più grande che i visitatori vedono quando la pagina viene caricata, potrebbe apparire prima se il browser fosse istruito a recuperarla in anticipo. Le pagine sembrano caricate quando appare il contenuto più grande, quindi spesso è proprio questa immagine a determinare la velocità percepita dell'intera pagina.

Il momento in cui appare questa immagine viene misurato come Largest Contentful Paint (LCP), una delle metriche di Google.

Perché è importante

I browser scaricano i file più o meno nell'ordine in cui li individuano, e spesso l'immagine principale viene individuata tardi: è nascosta dietro fogli di stile e script, viene richiamata dal o inserita da uno script. Il risultato è una pagina che costruisce rapidamente la propria struttura e poi lascia uno spazio vuoto proprio dove dovrebbe trovarsi il contenuto più importante.

Poiché i visitatori valutano la velocità in base al momento in cui appare il contenuto principale e Google considera l'LCP nel posizionamento nei risultati di ricerca, indicare al browser di dare priorità a questo singolo file è una delle ottimizzazioni della velocità con il maggior valore disponibile.

Come risolvere il problema

Precarica l'immagine in modo che il browser la recuperi fin dall'inizio del caricamento:

<!-- In <head>: recupera subito l'immagine principale -->
<link rel="preload" as="image" href="hero.jpg" fetchpriority="high">

In alternativa, se l'immagine è un elemento <img> semplice, aggiungi direttamente fetchpriority="high".
Non applicare mai il a questa immagine: loading="lazy" sull'immagine principale ritarda proprio ciò che dovrebbe venire prima.
Per l'elemento visivo principale, preferisci un elemento <img> semplice a un'immagine di sfondo CSS, così il browser può individuarlo autonomamente in anticipo.

Come Silktide esegue il controllo

Carica la pagina in un browser reale, utilizzando il tipo di dispositivo, la velocità di connessione e la località di test configurati per i test di velocità.
Individua l'elemento con il contenuto più grande visibile durante il caricamento della pagina. Se è un'immagine, controlla quando il browser l'ha individuata e scaricata.
Se recuperare l'immagine prima la farebbe apparire prima, segnala il problema indicando il risparmio di tempo stimato.

Risoluzione dei problemi

L'immagine principale cambia tra pagine o dispositivi

I suggerimenti di precaricamento sono specifici per ogni pagina e l'elemento "più grande" può variare tra i layout desktop e mobile. La logica del modello può generare il precaricamento corretto per ogni pagina, mentre gli attributi media e imagesrcset del suggerimento gestiscono le varianti responsive.

Ho precaricato l'immagine, ma il problema continua a essere segnalato

L'URL del precaricamento deve corrispondere esattamente a quello dell'immagine che la pagina visualizza alla fine: una variante di dimensioni diversa o un URL riscritto da una non è considerato valido. Verifica inoltre che il suggerimento si trovi direttamente nell'elemento head della pagina e non venga aggiunto successivamente da uno script, perché ciò ne annullerebbe lo scopo.