Ottimizzazione LCP Shopify: 7 soluzioni per scendere sotto i 2.5s (2026)

Cos'è l'LCP e perché è importante per i negozi Shopify

Il Largest Contentful Paint (LCP) è uno dei tre Core Web Vitals di Google — le metriche che influenzano direttamente il vostro posizionamento nei motori di ricerca e quantificano l'esperienza utente. Mentre il CLS misura la stabilità visiva e l'INP misura l'interattività, l'LCP misura la velocità di caricamento percepita — nello specifico, quanto tempo impiega l'elemento visibile più grande della pagina a renderizzarsi completamente.

In un negozio Shopify, l'elemento LCP è quasi sempre un'immagine:

• Homepage: l'immagine del banner hero o la prima slide di uno slideshow
• Pagine prodotto: l'immagine principale del prodotto (di solito il più grande elemento above the fold)
• Pagine collezione: il banner della collezione o l'immagine della prima scheda prodotto
• Post del blog: l'immagine in evidenza

Perché l'LCP è importante per il vostro negozio Shopify:

• Posizionamento SEO: Google usa l'LCP come segnale di ranking — le pagine che superano tutti e tre i Core Web Vitals ottengono un vantaggio misurabile nel ranking
• Conversioni: Deloitte ha rilevato che un miglioramento di 0.1 secondi nell'LCP ha portato a un aumento dell'8% delle conversioni per i siti retail
• Frequenza di rimbalzo: i visitatori vedono una pagina vuota o parzialmente caricata mentre aspettano l'LCP — ogni secondo aumenta la frequenza di rimbalzo di circa il 20%
• Impatto mobile: l'LCP è tipicamente 2-3 volte peggiore su mobile a causa di CPU e reti più lente — ed è il mobile che Google misura ai fini del ranking

Volete un controllo rapido della vostra situazione? Eseguite un test di velocità gratuito sul vostro negozio per vedere il vostro punteggio LCP attuale.

La soluzione semplice: ottimizzazione automatica dell'LCP

Prima di immergervi nelle modifiche manuali al tema — c'è una strada molto più rapida. Thunder Page Speed Optimizer affronta automaticamente le cause principali di un LCP alto sui negozi Shopify, riducendo spesso l'LCP di 0.5-2.0 secondi in pochi minuti.

Come misurare e diagnosticare l'LCP del vostro negozio Shopify

Prima di risolvere l'LCP, dovete identificare il vostro punteggio attuale, quale elemento è l'elemento LCP e cosa lo sta ritardando. Ecco gli strumenti che contano:

Le 4 cause principali di un LCP alto su Shopify

Ogni problema di LCP si riconduce a uno di questi quattro colli di bottiglia. Identificate il vostro e passate alla soluzione corrispondente:

Soluzione 1: ottimizzare e precaricare l'immagine hero/LCP

La soluzione con il maggiore impatto per la maggior parte dei negozi Shopify: far caricare più velocemente l'immagine LCP e dire al browser di iniziare a caricarla immediatamente. Questo comporta tre passaggi — comprimere, precaricare e dare priorità.

Passaggio 1: comprimete e usate un dimensionamento responsive

La vostra immagine hero dovrebbe essere sotto i 200KB (idealmente sotto i 100KB per il mobile). Usate il CDN di Shopify con il filtro image_url per servire immagini WebP correttamente dimensionate:

<img
  src="{{ section.settings.hero_image | image_url: width: 1200 }}"
  srcset="
    {{ section.settings.hero_image | image_url: width: 600 }} 600w,
    {{ section.settings.hero_image | image_url: width: 900 }} 900w,
    {{ section.settings.hero_image | image_url: width: 1200 }} 1200w,
    {{ section.settings.hero_image | image_url: width: 1600 }} 1600w
  "
  sizes="100vw"
  width="1600"
  height="800"
  alt="Your descriptive alt text"
  loading="eager"
  fetchpriority="high"
>

Il CDN di Shopify converte automaticamente le immagini in WebP per i browser che lo supportano quando usate image_url. L'attributo srcset garantisce che i dispositivi mobile scarichino un'immagine da 600px invece della versione completa da 1600px — risparmiando centinaia di KB sul mobile. Per una guida completa sulle strategie di compressione e formato delle immagini, consultate la nostra guida all'ottimizzazione delle immagini Shopify.

Passaggio 2: precaricate l'immagine LCP

Aggiungete un <link rel="preload"> nell'<head> del vostro tema così il browser inizia a scaricare l'immagine hero immediatamente — prima ancora di raggiungere il tag <img> nel body:

<!-- Add to <head> in theme.liquid -->
<link
  rel="preload" 
  as="image"
  imagesrcset="
    {{ section.settings.hero_image | image_url: width: 600 }} 600w,
    {{ section.settings.hero_image | image_url: width: 900 }} 900w,
    {{ section.settings.hero_image | image_url: width: 1200 }} 1200w
  "
  imagesizes="100vw"
  fetchpriority="high"
>

Passaggio 3: usate fetchpriority="high"

L'attributo fetchpriority="high" dice al browser che questa immagine è più importante delle altre risorse che competono per la banda. Senza di esso, Chrome assegna inizialmente alle immagini una priorità "bassa" e aggiorna le immagini above the fold solo in seguito — a quel punto si è già perso tempo prezioso. Aggiungere questo suggerimento può togliere 100-500ms all'LCP.

Importante: includete sempre attributi width e height espliciti. Questi permettono al browser di riservare lo spazio corretto prima che l'immagine si carichi, prevenendo il Cumulative Layout Shift (CLS) e permettendo ai calcoli del layout di iniziare prima.

Soluzione 2: eliminare il JavaScript che blocca il rendering

Nella maggior parte dei negozi Shopify, gli script che bloccano il rendering sono la causa principale di un LCP alto — non l'immagine in sé. Ecco la sequenza che rovina il vostro punteggio: il browser inizia a caricare la pagina → incontra script che bloccano il rendering nell'<head> → ferma tutto per scaricarli ed eseguirli → solo a quel punto scopre e carica l'immagine hero → infine la renderizza. Questi script bloccanti possono aggiungere 1-3 secondi prima ancora che il browser inizi a lavorare sul vostro elemento LCP.

Cosa potete fare manualmente

• Aggiungete defer o async ai tag <script> personalizzati che avete aggiunto al vostro tema
• Spostate gli script inline dall'<head> a prima di </body> quando non devono essere eseguiti in anticipo
• Rimuovete le app inutilizzate — ogni app installata aggiunge in genere 1-3 tag script a ogni caricamento di pagina
• Verificate il file theme.liquid del vostro tema alla ricerca di script che potrebbero essere rinviati

<script src="custom-feature.js"></script>

<script src="custom-feature.js" defer></script>

La parte complicata: gli script delle app di terze parti hanno spesso interdipendenze. Rinviare uno script potrebbe rompere un'altra app che dipende da esso. Ecco perché il rinvio manuale degli script su Shopify è rischioso senza test approfonditi. Per una guida completa, consultate la nostra guida alla risoluzione delle risorse che bloccano il rendering su Shopify.

Soluzione 3: incorporare il CSS critico per un primo paint istantaneo

Il CSS blocca il rendering per impostazione predefinita — il browser non disegna nulla finché tutti i file CSS nell'<head> non sono stati scaricati. In un negozio Shopify con più file CSS (CSS del tema, CSS delle app, CSS personalizzato), questo può aggiungere 500ms-1.5s prima che qualsiasi contenuto appaia.

La soluzione: estrarre il CSS necessario per il contenuto above the fold e incorporarlo direttamente in un tag <style> nell'<head>. Poi caricare il CSS completo in modo asincrono:

<head>
  <!-- Inline critical CSS -->
  <style>
    /* Only styles needed for above-the-fold content */
    .header { ... }
    .hero-section { ... }
    .hero-image { ... }
  </style>

  <!-- Load full CSS asynchronously -->
  <link rel="preload" href="theme.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="theme.css"></noscript>
</head>

Identificare ed estrarre manualmente il CSS critico è noioso e soggetto a errori — dovete determinare esattamente quali regole CSS si applicano al viewport visibile al momento del caricamento, e questo cambia per ogni tipo di pagina (homepage, prodotto, collezione). Questo è un ambito in cui l'automazione fa davvero la differenza: Thunder estrae e incorpora automaticamente il CSS critico per ogni tipo di pagina, poi carica il resto in modo asincrono.

Attenzione anche a @import nel CSS: se il vostro tema o le vostre app usano @import all'interno dei file CSS, si crea una cascata di caricamento — il browser scarica il CSS, scopre l'import, poi scarica altro CSS. Sostituite @import con tag <link> separati per consentire download paralleli. Scoprite di più sulle risorse che bloccano il rendering e le cascate CSS.

Soluzione 4: smettete di applicare il lazy loading al vostro elemento LCP

Questo è uno degli errori più comuni sull'LCP su Shopify — e uno dei più facili da correggere. Molti temi applicano loading="lazy" a ogni immagine, compreso il banner hero. Il lazy loading dice al browser di ritardare il caricamento dell'immagine finché l'utente non ci scorre vicino. Per la vostra immagine above the fold più importante, questo uccide le prestazioni.

Come verificare

Fate clic destro sulla vostra immagine hero → Ispeziona → guardate il tag <img>. Se ha loading="lazy", sta danneggiando il vostro LCP. Anche PageSpeed Insights segnala questo specificamente: cercate "Largest Contentful Paint image was lazily loaded" nella diagnostica.

La soluzione

<img src="hero.jpg" loading="lazy" alt="...">

<img src="hero.jpg" loading="eager" fetchpriority="high" alt="...">

Soluzione specifica per il tema Shopify (Dawn e simili)

Nel tema Dawn di Shopify (e nei temi basati su di esso), cercate il file della sezione hero — di solito sections/image-banner.liquid o sections/slideshow.liquid. Trovate dove viene renderizzata l'immagine e assicuratevi che la prima immagine above the fold usi loading: 'eager':

{{ section.settings.image | image_url: width: 1200 | image_tag: loading: 'eager', fetchpriority: 'high', sizes: '100vw' }}

Regola generale: le prime 1-2 immagini visibili al caricamento iniziale della pagina → loading="eager". Tutto ciò che è sotto la piega → loading="lazy". Per un approfondimento, consultate la nostra guida al lazy loading su Shopify e il confronto tra lazy ed eager loading.

Soluzione 5: ottimizzare il caricamento dei font per un LCP più veloce

Se il vostro elemento LCP è testo (un titolo o un paragrafo), il caricamento dei font influisce direttamente sull'LCP. Il browser non disegna il testo finché il suo font non è pronto — a meno che non gli diciate diversamente. Anche quando l'elemento LCP è un'immagine, un caricamento lento dei font può comunque ritardare il rendering bloccando i calcoli del layout.

Checklist per il caricamento dei font

• Aggiungete font-display: swap a tutte le regole @font-face — mostra subito il testo con un font di fallback mentre i font personalizzati si caricano
• Precaricate il font del corpo del testo: <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
• Ospitate i font in autonomia invece di caricarli da Google Fonts — elimina una ricerca DNS e una connessione extra
• Limitate i pesi dei font: ogni peso (Regular, Bold, ecc.) è un file separato. Limitatevi a 2 pesi, se possibile
• Usate il formato WOFF2 — 30% più piccolo di WOFF, supportato da tutti i browser moderni

@font-face {
  font-family: 'YourBrandFont';
  src: url('/fonts/brand-regular.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}

@font-face {
  font-family: 'YourBrandFont';
  src: url('/fonts/brand-bold.woff2') format('woff2');
  font-display: swap;
  font-weight: 700;
}

Nota: font-display: swap può introdurre un lieve problema di CLS quando il font personalizzato subentra con metriche diverse. Se questo è un problema, usate font-display: optional — usa il font personalizzato solo se si carica entro circa 100ms, altrimenti resta sul fallback. Zero swap significa zero CLS, anche se il font personalizzato potrebbe non essere visualizzato sulle connessioni lente.

Soluzione 6: ridurre il tempo di risposta del server (TTFB)

Il Time to First Byte (TTFB) è il ritardo tra la richiesta della pagina da parte del browser e la ricezione del primo byte di HTML. Un TTFB alto ritarda tutto ciò che segue — incluso l'LCP — perché non si può renderizzare nulla finché l'HTML non inizia ad arrivare. Su Shopify, il TTFB è tipicamente tra 200 e 800ms.

Non potete cambiare l'hardware del server di Shopify, ma potete ridurre quanto lavoro svolge il server per ogni richiesta:

• Semplificate i template Liquid: loop for profondamente annidati, catene eccessive di if/elsif e calcoli Liquid complessi aumentano il tempo di rendering lato server
• Riducete le query sui metafield: ogni accesso a un metafield è una query al database. Riducete al minimo l'uso dei metafield sulle pagine ad alto traffico (homepage, collezioni)
• Limitate i prodotti per pagina nelle collezioni: renderizzare 48 schede prodotto richiede più elaborazione del server rispetto a 24. Usate la paginazione
• Controllate il Liquid iniettato dalle app: alcune app iniettano codice Liquid eseguito lato server a ogni caricamento di pagina, anche sulle pagine dove l'app non è usata. Controllate i file del tema alla ricerca di snippet Liquid relativi alle app
• Usate sezioni e gruppi di sezioni: il rendering più recente delle sezioni di Shopify può mettere in cache le singole sezioni, riducendo il tempo di rendering complessivo

Soluzione 7: rimuovere le transizioni immagine sull'elemento LCP

Molti temi Shopify aggiungono un'animazione CSS di dissolvenza o scorrimento alle immagini durante il caricamento. Anche se sembra fluida, questo danneggia direttamente l'LCP perché il browser registra l'LCP solo dopo che l'animazione è terminata — non quando l'immagine appare per la prima volta. Lo stesso team prestazioni di Shopify ha documentato un caso in cui rimuovere le transizioni sull'immagine hero ha migliorato l'LCP di 6 secondi su un negozio.

Controllate il CSS del vostro tema alla ricerca di transizioni sull'immagine hero o sul suo contenitore:

.hero-image {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.hero-image.loaded {
  opacity: 1;
}

.hero-image {
  opacity: 1; /* Visible immediately */
}

Se volete mantenere le animazioni di dissolvenza su altre immagini per motivi estetici, va bene — basta rimuoverle specificamente dall'elemento hero/LCP. Potete delimitare questo con una classe come .hero-image--no-transition solo sulla prima immagine.

Soluzioni LCP manuali vs Thunder: confronto diretto

Ecco come si confronta l'approccio manuale con l'affidare a Thunder l'ottimizzazione automatica dell'LCP:

Le soluzioni manuali offrono pieno controllo ma richiedono competenze Liquid/CSS e manutenzione continua. Thunder gestisce automaticamente il lavoro pesante e si adatta man mano che il vostro negozio cambia. Molti merchant combinano entrambi gli approcci: installano Thunder per il rinvio degli script e il CSS critico, poi applicano soluzioni manuali per problemi specifici del negozio come il preload dell'immagine hero. Consultate i piani tariffari di Thunder o confrontateli con altre app di ottimizzazione della velocità.

Domande frequenti sull'LCP di Shopify