Inchieste e ricerca su Shopify e l’e-commerce
Il Largest Contentful Paint è il Core Web Vital su cui gli store Shopify fanno più visibilmente cilecca, e il nostro audit mostra perché: su 15 demo di temi ufficiali, il primo rendering è arrivato in circa 2-5 secondi, poi gli acquirenti hanno atteso fino a 13,9 secondi in più per l'hero media. Ecco il meccanismo e la lista degli interventi, con i numeri.
Il Largest Contentful Paint misura un momento preciso: quando l’elemento visibile più grande della prima schermata termina il rendering. Su uno store Shopify quell’elemento è quasi sempre l’immagine hero, la prima foto prodotto o il poster frame di un video in autoplay, ed è esattamente per questo che i punteggi Shopify LCP vanno male. I server della piattaforma rispondono rapidamente e lo scheletro del tema viene disegnato presto; poi l’acquirente fissa uno scheletro mentre megabyte di hero media strisciano lungo una connessione mobile.
I nostri dati rendono visibile il meccanismo. Il 14 luglio 2026 abbiamo eseguito 45 audit Lighthouse su 15 demo di temi ufficiali, e il numero interessante non è l’LCP in sé ma la distanza tra First Contentful Paint e LCP. L’FCP è l’arrivo dello scheletro; il divario da FCP a LCP è l’hero media che fa attendere tutti.
| Demo del tema | FCP | LCP | Divario (attesa per l’hero) |
|---|---|---|---|
| Ultra | 1.91s | 1.91s | 0.0s |
| Boutique | 2.20s | 3.67s | 1.5s |
| Symmetry | 1.53s | 6.33s | 4.8s |
| Impression | 5.22s | 12.19s | 7.0s |
| Horizon | 3.57s | 12.32s | 8.8s |
| Motion | 1.88s | 15.78s | 13.9s |
Rileggi la riga di Motion: primo rendering in 1,88 secondi, più veloce di quasi tutto ciò che abbiamo testato, poi un’attesa di 13,9 secondi per l’hero. Il collo di bottiglia non è il codice del tema; è la strategia sui media. Horizon racconta la stessa storia da un’altra prospettiva: il suo total blocking time era di 29ms, tra i migliori comportamenti JavaScript dell’audit, accanto a un LCP di 12,32 secondi. Ottima ingegneria, vetrina pesante.
E il controesempio dimostra che il tetto esiste davvero: nella demo di Ultra l’elemento più grande è stato renderizzato insieme al primo rendering, 1,91 secondi per entrambi, l’unica demo su 15 sotto la soglia dei 2,5 secondi di Google. Nei dati, è così che si presenta una prima schermata disciplinata.
1. Pesa il tuo hero. Apri la homepage in PageSpeed Insights, espandi la diagnostica LCP e guarda qual è realmente l’elemento LCP. Se è un’immagine da 2-4MB o un video, nulla del resto di questa lista conta finché non cambia. Esporta l’hero alla dimensione con cui viene renderizzato, servi WebP o AVIF tramite i parametri di larghezza di image_url di Shopify e tieni il file intorno ai 200KB. Se l’hero è un video in autoplay, dagli un poster frame leggero e fai caricare il video dopo il primo rendering, oppure spostalo sotto la piega.
2. Smetti di applicare il lazy loading all’immagine LCP. Un errore di configurazione comune su Shopify: il tema o un’app applica loading="lazy" a tutto, inclusa la prima immagine hero, ritardando l’unico download che definisce il tuo punteggio. L’immagine LCP dovrebbe caricarsi in modo eager con fetch priority alta; tutto ciò che sta sotto la piega dovrebbe restare lazy.
3. Fai un audit dello stack di app. Ogni app installata può iniettare script che vengono eseguiti prima che il tuo hero inizi a scaricarsi. Disinstalla ciò che non usi attivamente, poi controlla nel codice del tema gli script tag orfani lasciati dalle app. La documentazione sulle performance di Shopify indica il peso delle app come un fattore primario per la velocità del tema.
4. Snellisci la prima schermata. Slideshow con cinque slide da 2MB, barre annuncio animate, widget di chat che si avviano immediatamente: ognuno di essi compete con l’elemento LCP. La prima schermata ha bisogno di un messaggio e di un’immagine.
5. Poi, e solo poi, considera il tema. La scelta del tema fissa il tuo tetto. Abbiamo misurato una differenza di 8x tra le demo più rapide e più lente nello stesso store, in condizioni identiche, e la differenza era in gran parte disciplina: quanto carica la prima schermata di default del tema. Se stai già cercando un sostituto, la nostra classifica completa delle 15 demo misurate è il punto da cui partire, e il vendor la cui demo è arrivata in testa, UTD, elenca qui tutti i suoi temi. Ma cambiare tema mentre il tuo hero pesa 3MB sposta soltanto lo stesso problema dentro una tipografia più bella.
Misura prima e dopo, sempre nello stesso modo. Lighthouse in Chrome DevTools o PageSpeed Insights, profilo mobile, tre esecuzioni, prendi la mediana, perché le singole esecuzioni oscillano. Guarda due numeri: l’LCP in sé e il divario da FCP a LCP del grafico qui sopra. Se i tuoi interventi funzionano, il divario crolla per primo, ed è il segnale che l’hero sta finalmente arrivando con la pagina invece che dopo di essa. I dati sugli utenti reali nel report Core Web Vitals di Search Console seguiranno entro qualche settimana, perché Google valuta l’LCP sui dati di campo, non sulle esecuzioni di laboratorio.
Quasi sempre perché l'elemento più grande above the fold è un'immagine hero pesante o un video in autoplay che inizia a scaricarsi tardi. I dati del nostro audit mostrano chiaramente il pattern: demo con un primo rendering rapido registravano comunque LCP tra gli 8 e i 14 secondi quando l'hero media era pesante. Le app che iniettano script che bloccano il rendering spostano l'inizio di quel download ancora più in là.
Le soglie di Google sono: sotto i 2,5 secondi buono, sopra i 4 secondi scarso, misurate su utenti reali da mobile. Per riferimento, solo 1 delle 15 demo di temi ufficiali che abbiamo testato con throttling mobile simulato è rimasta sotto i 2,5 secondi.
Può farlo, ed è l'unica decisione sulla velocità che prendi una volta sola. Abbiamo misurato una differenza di 8x nell'LCP mobile mediano tra la demo del tema più rapida (1,91s) e la più lenta (15,78s). Ma sistema prima l'hero media e lo stack di app: un tema veloce con un hero da 4MB continuerà a fallire.
Sì. Ogni app che inietta uno script nel tuo tema compete con l'immagine LCP per la banda e per il tempo di main thread prima del primo rendering. Fai un audit delle app installate, rimuovi ciò che non usi e verifica se nel codice del tema restano script tag residui dopo la disinstallazione.