Estrazione di Immagini Critiche per LCP e SEO

Ultimo aggiornamento: June 28, 2026

L'estrazione dell'immagine critica significa trovare l'unica immagine che controlla la prima impressione visiva di una pagina. Su molte pagine prodotto, landing page e post del blog, quell'immagine è l'eroe, la foto principale del prodotto o un'illustrazione grande sopra la piega (above-the-fold). Se lo si identifica presto, si può precaricare o dare priorità al file corretto invece di accelerare tutte le immagini in modo uniforme.

Risposta rapida: come estrarre l'immagine critica?

Utilizza l'estrazione dell'immagine critica per nominare l'immagine più probabile che diventerà l'elemento Largest Contentful Paint, e poi dare a quel file un trattamento di caricamento speciale. Di solito ciò significa che la più grande immagine visibile nel viewport iniziale ottiene fetchpriority="high", nessun lazy loading, dimensioni stabili e talvolta un <link rel="preload">.

Non precaricare ogni file grande. Precarica l'immagine eroica o del prodotto solo quando il browser altrimenti la scoprirebbe tardi, ad esempio all'interno di CSS, di un carosello, di un componente renderizzato dal client o di uno stack <picture> responsive con selezione sorgente complessa.

Dopo la modifica, verifica il risultato. La documentazione Largest Contentful Paint di Google definisce LCP attorno all'elemento di contenuto visibile più grande, e PageSpeed Insights mostrerà quale elemento è stato misurato. Anche Chrome DevTools dovrebbe mostrare la richiesta dell'immagine critica presto nella waterfall.

Segui questo ordine:

1. Carica la pagina con un viewport mobile realistico.
2. Trova l'immagine o il poster più grande sopra la piega.
3. Controlla se PageSpeed o Lighthouse lo segnalano come LCP.
4. Rimuovi loading="lazy" da quell'immagine.
5. Aggiungi dimensioni o un rapporto d'aspetto.
6. Aggiungi fetchpriority="high" quando è un <img>.
7. Precaricalo solo quando la scoperta è tardiva.
8. Mantieni le immagini sotto la piega lazy.
9. Ritesta dopo modifiche di layout, CMS o testo eroico.

Cosa conta come immagine critica?

Un'immagine critica è l'immagine che un visitatore aspetta prima che la pagina sembri utile. È spesso, ma non sempre, l'elemento LCP. Un piccolo logo in cima alla pagina potrebbe caricarsi per primo, ma raramente controlla la prontezza percepita. Un'immagine eroica che occupa metà dello schermo del telefono di solito lo fa.

Usa insieme le dimensioni renderizzate, la posizione nel viewport e lo scopo. Una miniatura in un menu di navigazione è visibile, ma non è il contenuto principale. Un'immagine di sfondo dietro l'intestazione può essere critica se è l'elemento visibile più grande. Un'immagine social card nei metadati è importante per la condivisione, ma non viene richiesta per la pagina renderizzata a meno che il template non lo visualizzi anche.

Le linee guida LCP di Google elencano gli elementi <img>, gli elementi immagine all'interno di SVG, le immagini poster video e le immagini di sfondo CSS come possibili candidati. Ciò significa che l'estrazione non può fermarsi alla ricerca del primo tag <img>. Devi ispezionare la pagina renderizzata.

Per lavori adiacenti, tieni a portata di mano la checklist più ampia image optimization for SEO. L'estrazione dell'immagine critica decide la priorità; compressione, nomi file, alt text e contenuto strutturato decidono ancora se l'immagine è utile dopo il caricamento.

Quale immagine dovrebbe ricevere preload o alta priorità?

Dai alta priorità a un'unica immagine: l'immagine LCP probabile della pagina corrente. Se due candidati sono vicini, scegli quello che è più grande su mobile per primo, perché i Core Web Vitals mobili sono generalmente più difficili da superare.

Usa fetchpriority="high" quando l'immagine critica è un <img> normale o il fallback <img> in un elemento <picture>. Le guidelines sulla priorità di fetch di Google spiegano che questo suggerimento cambia la priorità delle risorse del browser senza cambiare il percorso di scoperta del markup.

Usa preload quando il problema è la scoperta. La rel="preload" reference di MDN descrive preload come un modo per richiedere risorse prima nel caricamento della pagina. Questo aiuta quando l'URL dell'immagine appare in CSS, arriva dopo l'idratazione o è nascosto dietro un markup che il browser non può scoprire abbastanza presto.

Per un'immagine responsive normale, il markup può apparire così:

<img
  src="/images/product-hero-960.webp"
  srcset="/images/product-hero-480.webp 480w, /images/product-hero-960.webp 960w, /images/product-hero-1440.webp 1440w"
  sizes="(max-width: 640px) 100vw, 960px"
  width="960"
  height="640"
  fetchpriority="high"
  alt="Zaino in pelle nera mostrato aperto con scomparto per laptop visibile"
>

Se l'immagine è uno sfondo CSS e non puoi spostarla nell'HTML per ora, precarica lo stesso asset che il viewport iniziale utilizzerà:

<link
  rel="preload"
  as="image"
  href="/images/home-hero-960.webp"
  imagesrcset="/images/home-hero-480.webp 480w, /images/home-hero-960.webp 960w"
  imagesizes="100vw"
>

La guida al precaricamento di immagini copre la sintassi in modo più dettagliato. La regola importante qui è più stretta: precarica dopo l'estrazione, non prima.

Come si evita il lazy-loading dell'immagine sbagliata?

Il lazy loading appartiene sotto il primo viewport. È un errore sull'immagine critica estratta perché dice al browser di aspettare che vengano eseguiti controlli di layout e distanza. Le guidelines sul lazy loading a livello browser di Google avvertono contro il lazy-loading delle immagini immediatamente visibili.

Controlla attentamente i componenti immagine globali. Molti framework rendono il lazy loading predefinito perché la maggior parte delle immagini sono sotto la piega. Quel default rompe le pagine dove l'immagine eroica è racchiusa nello stesso componente delle miniature della galleria.

Verifica questi punti:

1. Renderer di immagini rich-text del CMS.
2. Componenti galleria prodotto.
3. Componenti immagine copertina blog.
4. Utility sfondo hero homepage.
5. Slider che nascondono tutte le slide fino all'esecuzione di JavaScript.
6. Componenti placeholder che sostituiscono data-src con src.
7. Blocchi di personalizzazione di terze parti.
8. Wrapper A/B testing che ritardano il markup eroico.

La correzione è solitamente piccola. Aggiungi un'opzione priority, aboveFold o isLcp al componente e fai scegliere esplicitamente all'owner del template. Le immagini del corpo sotto la piega dovrebbero ancora utilizzare il lazy loading nativo, specialmente guide lunghe con screenshot e diagrammi.

Per pagine focalizzate sul mobile, abbina questo alla guida all'ottimizzazione delle immagini per mobile. Un eroe correttamente prioritizzato funziona comunque male se il telefono scarica un ritaglio desktop da 2400 px per uno slot da 390 px.

Come si dovrebbero estrarre le immagini da una pagina reale?

Inizia nel browser, non nella libreria di asset. La libreria di asset ti dice cosa esiste; il browser ti dice cosa ricevono gli utenti.

Usa questo flusso di lavoro manuale:

1. Apri la pagina con 390 px di larghezza e ricarica disabilitando la cache.
2. Nota l'immagine visibile più grande prima dello scorrimento.
3. Ispeziona quell'elemento e registra il suo URL finale.
4. Controlla se è un <img>, <picture>, poster video o sfondo CSS.
5. Conferma larghezza e altezza renderizzate.
6. Confronta la larghezza del file scaricato con lo slot renderizzato.
7. Cerca loading="lazy" o assegnazione src ritardata da JavaScript.
8. Controlla DevTools Network per l'ora di inizio della richiesta e la priorità.
9. Esegui PageSpeed Insights e registra l'elemento LCP.
10. Ripeti su desktop se l'eroe cambia con il breakpoint.

Per audit di template, crea una piccola tabella di estrazione prima di modificare il codice:

Ho generato i diagrammi in questo articolo come file WebP e ho mantenuto ciascuno sotto i 40 KB. Questo non è un obiettivo universale per le foto, ma è un utile promemoria: l'immagine estratta dovrebbe essere ridimensionata prima di ricevere priorità. Se il file è ancora enorme, usa image compression deep dive e batch resize guide prima di pubblicare.

Come si verifica l'immagine critica negli strumenti?

La verifica ha due compiti. Primo, dimostrare che l'immagine selezionata è effettivamente l'elemento LCP o un serio candidato LCP. Secondo, dimostrare che il browser lo scopre abbastanza presto.

Usa PageSpeed Insights per il contesto di campo e laboratorio. Il pannello diagnostico nomina solitamente l'elemento LCP, e lo screenshot aiuta a confermare se l'elemento segnalato corrisponde all'eroe visivo della pagina. Usa Lighthouse o DevTools Performance quando hai bisogno di un tracciamento locale.

Usa DevTools Network per il comportamento della richiesta:

1. Filtra le richieste immagine.
2. Ricarica disabilitando la cache.
3. Conferma che l'immagine critica inizi vicino all'inizio della waterfall.
4. Controlla che la priorità sia Alta o aggiornata presto.
5. Conferma che le immagini sotto la piega non stiano tutte competendo allo stesso tempo.
6. Controlla codice di stato, tipo di contenuto, dimensione del trasferimento e intestazioni cache.

Usa l'ispezione HTML renderizzato per errori di markup:

1. L'immagine critica ha src o srcset scopribile nel markup iniziale.
2. Non ha loading="lazy".
3. Ha width e height, o un rapporto d'aspetto CSS stabile.
4. Il suo alt text descrive il soggetto visibile quando l'immagine è contenuto.
5. L'URL CDN restituisce una risposta 200 navigabile.

Per la ricerca, le best practices SEO per immagini di Google enfatizzano anche nomi file descrittivi, alt text e testo circostante utile. L'estrazione dell'immagine critica migliora la priorità di caricamento, ma lo stesso immagine ha ancora bisogno di contesto di ricerca.

Cosa rompe l'estrazione dell'immagine critica?

Il fallimento più comune è trattare ogni pagina come se avesse lo stesso eroe. Un indice blog, una pagina prodotto e una pagina prezzi possono avere candidati LCP diversi. Il passaggio di estrazione deve avvenire a livello di template e a livello di breakpoint.

Attenzione a queste trappole:

1. Precaricare l'immagine Open Graph. L'immagine social card potrebbe non renderizzarsi mai sulla pagina.
2. Lazy-loading della prima foto prodotto. Le gallerie di prodotti spesso ereditano valori predefiniti delle miniature.
3. Dare priorità a ogni slide del carosello. Solo la prima slide visibile può essere critica al caricamento.
4. Ignorare i ritagli mobile. Desktop e mobile possono selezionare immagini LCP diverse.
5. Usare sfondi CSS per contenuto significativo. Sono più difficili da dare priorità e meno accessibili.
6. Dimenticare le dimensioni. La priorità non previene il layout shift.
7. Pubblicare una sorgente sovradimensionata. Un'immagine ad alta priorità da 3 MB è comunque lenta.
8. Testare solo su Wi-Fi locale. Un lento 4G espone ritardi di scoperta.

Se il problema riguarda principalmente il peso del file, inizia con la complete image optimization checklist. Se il problema è la scelta del formato, confronta AVIF vs WebP prima di cambiare le regole di consegna.

Riepilogo: checklist per l'estrazione dell'immagine critica

L'estrazione dell'immagine critica è una decisione sulla velocità della pagina, non un esercizio di denominazione degli asset. Trova l'immagine che controlla il primo viewport, dai solo a quell'immagine il trattamento di caricamento anticipato e impedisci al resto della pagina di competere con essa.

Prima di pubblicare, conferma:

1. L'immagine LCP probabile è nominata nel template o nelle note di audit.
2. I candidati mobile e desktop sono controllati separatamente.
3. L'immagine critica non è lazy-loaded.
4. fetchpriority="high" viene utilizzato per un candidato LCP <img> visibile.
5. Preload viene usato solo quando la scoperta è tardiva.
6. Il file selezionato è ridimensionato e compresso.
7. Larghezza e altezza, o un rapporto d'aspetto, riservano lo spazio di layout.
8. Le immagini sotto la piega rimangono lazy.
9. PageSpeed Insights segnala l'elemento LCP atteso.
10. DevTools mostra la richiesta dell'immagine critica all'inizio della waterfall.
11. L'URL CDN restituisce 200 con il tipo di immagine previsto.
12. L'immagine ha un alt text utile e contenuto esplicativo nelle vicinanze.

Crediti delle immagini

• Diagramma candidato LCP, albero decisionale della priorità e traccia di verifica sono stati generati per questo articolo con ImageMagick ed esportati come WebP.