Shopify ora invia le pagine in due tempi: il tuo tema è pronto?
Se hai un e-commerce basato su Shopify, da qualche giorno le tue pagine potrebbero caricare più velocemente. Oppure no: dipende da come è scritto il tema.
Shopify ha cambiato il modo in cui consegna le pagine al browser. Non c’è niente da attivare, ma ci sono due condizioni da rispettare, e parecchi temi personalizzati negli anni ne hanno violata almeno una senza che nessuno se ne accorgesse.
Cosa è cambiato recentemente nei temi Shopify?
Prima la pagina arrivava in un unico blocco. Il server generava tutti gli elementi: layout e sezioni, e solo alla fine spediva l’HTML. Nel frattempo il browser restava in attesa, con la connessione aperta e niente da scaricare.
Ora la risposta parte in due tempi. La prima parte, dall’inizio del documento fino al tag {{ content_for_header }}, viene spedita appena è pronta, mentre le sezioni sono ancora in lavorazione sul server. Il browser riceve l’apertura dell’head e comincia subito a scaricare fogli di stile, font e le altre risorse che trova lì. Il resto della pagina arriva dopo, nello stesso flusso.
In pratica server e browser lavorano in parallelo invece che uno dopo l’altro.
Quanto si guadagna a ottimizzare il tema Shopify?
Shopify ha pubblicato i numeri: sul negozio mediano il Time to First Byte, cioè il tempo prima che arrivi il primo pezzo di pagina, è sceso del 29% al 75° percentile e del 21% al 90°.
Sui tempi che l’utente percepisce l’effetto è più piccolo: First Contentful Paint e Largest Contentful Paint migliorano tra il 2% e il 6%. Su Horizon, il tema di riferimento più recente, il miglioramento è di circa l’8% sul primo paint e del 4% sull’LCP; su Dawn del 3% e del 2%.
È un guadagno reale e gratuito, ma non trasforma un negozio lento in uno veloce (per quello ci sono i Core Web Vitals). Soprattutto, arriva solo a chi ha il tema nelle condizioni giuste.
Le due condizioni per ottimizzare al meglio
- La pagina deve nascere da un template JSON. Le pagine generate da template .liquid per ora restano fuori. Se il tuo tema ha ancora template come product.liquid o collection.liquid al posto dei rispettivi .json, quelle pagine non ne beneficiano. Succede spesso nei temi nati prima di Online Store 2.0 e mai migrati.
- {{ content_for_header }} deve stare nell’head come output puro. Niente filtri applicati, non dentro un {% if %}, non dentro un {% capture %}. È il punto in cui Shopify spezza la risposta, e deve poterlo trovare così com’è. Per prudenza, tienilo direttamente nel layout e non spostato in uno snippet.
Lo streaming non vale nell’anteprima dei temi né nell’editor del tema: se provi le modifiche lì, non vedrai la differenza.
Cosa mettere sopra il tag
Qui sta la parte che fa davvero la differenza. Il browser può iniziare a scaricare solo quello che riceve nella prima parte. Se fogli di stile, preload dei font e variabili CSS del primo paint stanno sotto content_for_header, arrivano insieme al resto della pagina e il vantaggio si perde quasi tutto.
Un head che ne approfitta ha, in quest’ordine:
- meta charset, viewport e title;
- il preload dei font usati sopra la piega;
- il foglio di stile principale e le variabili CSS del tema;
- {{ content_for_header }};
- tutto ciò che può aspettare.
Un’avvertenza: spostare un foglio di stile sopra content_for_header cambia l’ordine rispetto agli stili che Shopify e le app iniettano lì. Se due regole si contendono lo stesso elemento, può vincere quella sbagliata. Dopo lo spostamento controlla le pagine principali, soprattutto dove ci sono widget di app.
Come controllare il tuo tema in cinque minuti
- Apri Negozio online → Temi → Modifica codice sul tema pubblicato.
- Nella cartella templates, guarda l’estensione dei template principali: prodotto, collezione, pagina, home. Devono essere .json.
- Apri layout/theme.liquid e cerca content_for_header. Deve comparire una volta sola, dentro l’head, scritto esattamente {{ content_for_header }}.
- Guarda cosa c’è sopra: CSS principale, preload dei font, variabili CSS. Se sono tutti sotto, c’è margine.
Se al punto 2 trovi template .liquid o al punto 3 qualcosa di diverso da un output puro, il tuo negozio non sta ricevendo il miglioramento.
Se preferisci che lo guardi io, è il tipo di controllo che faccio nello sviluppo di temi Shopify.
