L'immagine LCP non è la stessa su mobile e desktop: come precaricare quella giusta

Ha aggiunto un preload per l'immagine hero, come raccomanda ogni guida. Su desktop il Largest Contentful Paint è migliorato. Su mobile no, e ora PageSpeed avverte che un'immagine precaricata non è stata usata, oppure il pannello Network mostra l'hero scaricato due volte.

Il preload in sé non è sbagliato. È puntato su un dispositivo, e l'altro dispositivo ne paga il prezzo.

Perché l'immagine LCP cambia con lo schermo

• Layout diversi: su desktop l'immagine hero è l'elemento più grande; su un telefono, il suo posto lo prende il titolo o un'immagine più in basso nella colonna.
• Sezioni duplicate: i page builder mostrano spesso una sezione su desktop e un'altra su mobile, ciascuna con la propria immagine, mentre l'altra resta nascosta.
• Art direction: una versione ritagliata e verticale dell'hero per i telefoni.
• Stessa immagine, dimensione diversa: un solo file in più larghezze, di cui il telefono dovrebbe scaricare una piccola.
• Un'immagine di sfondo: quando l'hero è uno sfondo CSS, il browser la scopre ancora più tardi, un caso trattato nella nostra guida sugli hero con immagine di sfondo.

Trovare l'elemento LCP su ogni dispositivo

Esegua PageSpeed su mobile e su desktop, e apra la diagnostica «Elemento Largest Contentful Paint» in ciascuna scheda. Oppure registri nel pannello Performance dei DevTools con l'emulazione mobile: il marcatore LCP indica l'elemento. Lo faccia per entrambe le dimensioni; non dia nulla per scontato.

new PerformanceObserver(l => {
  const e = l.getEntries().at(-1);
  console.log('LCP', Math.round(e.startTime), e.element, e.url);
}).observe({ type: 'largest-contentful-paint', buffered: true });

I quattro errori che sprecano il preload

1. Un solo preload per tutti. L'hero desktop viene precaricato per tutti i visitatori. I telefoni scaricano un'immagine grande che non mostreranno mai, ad alta priorità, in concorrenza con il loro vero LCP. Firma: l'avviso «precaricata ma non usata» su mobile.

2. Un preload senza lo srcset dell'immagine. Il preload punta a un file, mentre l'<img> sceglie un'altra larghezza dal suo srcset. Il browser li scarica entrambi. Firma: la stessa immagine due volte nel pannello Network, in due dimensioni.

3. Un preload posto prima del tag viewport. Finché il browser non legge <meta name="viewport">, un telefono impagina la pagina come se fosse larga circa 980 pixel. Un preload responsive letto prima di quel tag viene risolto per quella larghezza, quindi il telefono scarica un candidato troppo grande, poi quello giusto. Firma: un doppio download solo su mobile.

4. L'immagine LCP è in lazy load. Un loading="lazy" sull'hero, spesso aggiunto da un tema o da un plugin a tutte le immagini, dice al browser di aspettare il layout prima di scaricarla. Firma: la richiesta dell'immagine parte tardi, dopo i fogli di stile.

La soluzione, caso per caso

Immagine diversa per dispositivo. Un preload ciascuno, separati da una media query che corrisponde al breakpoint del suo tema:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preload" as="image" href="/uploads/hero-mobile.webp"
      media="(max-width: 768px)" fetchpriority="high">
<link rel="preload" as="image" href="/uploads/hero-desktop.webp"
      media="(min-width: 769px)" fetchpriority="high">

Stessa immagine, più larghezze. Un solo preload che riprende lo srcset dell'immagine come imagesrcset e il suo sizes come imagesizes, carattere per carattere, così il browser sceglie due volte lo stesso candidato e lo scarica una volta sola. Se già il sizes dell'immagine è sbagliato, lo corregga prima: la nostra guida su srcset e sizes spiega come.

<link rel="preload" as="image" fetchpriority="high"
      imagesrcset="/uploads/hero-480.webp 480w, /uploads/hero-960.webp 960w, /uploads/hero-1920.webp 1920w"
      imagesizes="100vw">

Sull'immagine stessa. Tolga loading="lazy", aggiunga fetchpriority="high", e mantenga i suoi width e height.

Sezioni duplicate del builder. La variante nascosta non dovrebbe essere scaricata affatto. Un'immagine nascosta con loading="lazy" non viene mai scaricata; senza, viene scaricata a ogni visita.

Verificare il risultato

• Pannello Network, emulazione mobile, cache disattivata: l'hero compare una volta sola, presto, alla larghezza prevista.
• Stessa cosa su desktop.
• Nessun avviso «precaricata ma non usata» in nessuna delle due schede di PageSpeed.
• Più test per dispositivo, confrontati per mediana, come spiegato nella nostra guida sui dati di laboratorio e reali.

Con Mantys Core

In sintesi

• L'elemento LCP spesso cambia tra telefono e desktop: li controlli entrambi.
• Un solo preload fa scaricare a un dispositivo un'immagine che non mostra.
• Usi un preload per dispositivo, oppure un solo preload con gli stessi srcset e sizes dell'immagine.
• Lo posizioni subito dopo il tag viewport, e non metta mai in lazy load l'immagine LCP.
• Verifichi nel pannello Network che l'hero venga scaricato una sola volta, su ogni dispositivo.