Inchieste e ricerca su Shopify e l’e-commerce
I due temi gratuiti first-party di Shopify, messi a confronto sulle loro demo ufficiali: tre run di Lighthouse mobile ciascuno. Horizon ha il motore più pulito, e il doppio dell'LCP.
Ogni proprietario di uno store Shopify incontra prima di tutto questi due temi: Dawn, il cavallo da battaglia open-source che da anni è il tema di riferimento della piattaforma, e Horizon, la nuova famiglia first-party che Shopify mette oggi davanti ai nuovi merchant. L’interesse di ricerca per la coppia continua a crescere, e in cima ai risultati di Google ci sono thread Reddit in cui si scambiano impressioni. Quindi, invece di impressioni, ecco delle misurazioni.
| Metrica (mediana di 3 run) | Dawn | Horizon | Migliore |
|---|---|---|---|
| LCP | 6.17s | 12.32s | Dawn, 2× |
| Total Blocking Time | 57ms | 29ms | Horizon, 2× |
| CLS | 0.000 | 0.000 | pari |
| First Contentful Paint | 2.80s | 3.57s | Dawn |
| Speed Index | 5.51s | 7.01s | Dawn |
| Punteggio performance Lighthouse | 69 | 62 | Dawn |
Il risultato in prima pagina, cioè che Dawn disegna il suo elemento più grande in metà tempo, nasconde la scoperta più interessante.
Il motore di Horizon è il più leggero dei due. Un Total Blocking Time di 29ms è un numero eccellente: significa che quasi nessun JavaScript si mette tra lo shopper e una pagina interattiva. I 57ms di Dawn sono comunque buoni, ma il runtime di Horizon fa meno lavoro. Il codice del tema non è il problema.
Il problema è la vetrina di Horizon. Shopify ha vestito la demo di Horizon con lo stile full-bleed e ricco di media che il tema è progettato per vendere, e sono proprio quei media a richiedere 12,3 secondi per essere disegnati su una connessione mobile con throttling. Questo conta al di là della demo: le sezioni e le impostazioni predefinite con cui un tema viene distribuito sono quelle che la maggior parte dei merchant tiene. Se installi Horizon e mantieni video hero e immagini sovradimensionate, erediti quell’LCP. Se al loro posto usi media disciplinati e correttamente dimensionati, ottieni il motore pulito di Horizon senza il peso della sua demo.
Dawn rimane noioso e vince. La demo di Dawn è sobria, con immagini più piccole e nessun video, e converte quella misura in un LCP di 6.17s e nel punteggio complessivo più alto. È l’intera filosofia di Dawn, visibile nel suo codice sorgente: JavaScript minimo, asset system-first, impostazioni predefinite che non combattono contro la rete.
Scegli in base a ciò che farai davvero con i media. Un merchant che vuole uno storytelling video full-bleed renderà lento qualunque dei due temi, ma su Horizon parte da un runtime più leggero. Un merchant che vuole la vetrina gratuita più veloce possibile e manterrà le immagini sobrie ci arriva più in fretta con Dawn.
E se la velocità out-of-the-box è il fattore decisivo, nota che nessuno dei due temi gratuiti è arrivato in testa al nostro test completo: la demo più rapida che abbiamo misurato è stata Ultra con 1.91s di LCP, uno dei sei temi di UTD presenti nello store ufficiale, tre dei quali hanno occupato i primi tre posti della classifica dei 15 temi. Il gratuito è la scelta predefinita giusta; solo non è il tetto della velocità.
Horizon è la famiglia di temi first-party più recente di Shopify e viene proposta come opzione predefinita per i nuovi store, mentre Dawn resta disponibile nel Theme Store e come riferimento open-source su GitHub. Nei forum dei merchant si discute della successione, ma entrambi sono attualmente mantenuti e gratuiti.
Sulle rispettive demo store ufficiali, in condizioni Lighthouse mobile identiche, l'LCP mediano di Dawn è stato di 6.17 secondi contro i 12.32 di Horizon. Ma il Total Blocking Time di Horizon è risultato più basso (29ms vs 57ms): il suo paint più lento è peso dei media della demo, non peso del motore.
Sì. Sono entrambi temi Shopify first-party disponibili a costo zero, ed è per questo che rappresentano il termine di paragone predefinito per qualsiasi acquisto di un tema a pagamento.