Shopify Liquid Optimization: velocizza il tuo Modelli di temi (2026)

Due livelli di velocità: liquido (server) + front-end (browser)

La velocità del negozio Shopify ha due livelli distinti. Ottimizzazione dei liquidi accelera la generazione di HTML lato server, riducendo il TTFB. Ottimizzazione front-end accelera ciò che fa il browser con quell'HTML, riducendo LCP, TBT e INP.

Thunder Page Speed Optimizer gestisce il livello front-end: deferring JavaScript con blocco del rendering, ottimizzando Consegna CSSe gestione dell'ordine di caricamento delle risorse. Questo articolo tratta il livello lato server: consente ai tuoi modelli Liquid di generare HTML più velocemente.

Esegui uno speed test sul tuo negozio per vedere entrambi gli strati in azione. Se il TTFB è superiore a 800 ms, l'ottimizzazione di Liquid dovrebbe essere la tua prima priorità. Se TTFB è già veloce ma LCP/TBT sono lenti, correzione delle risorse che bloccano il rendering con Thunder avrà l'impatto maggiore.

Come funziona la pipeline di rendering liquido di Shopify

Comprendere la pipeline di rendering ti aiuta a sapere dove gli sforzi di ottimizzazione fanno la differenza:

1. La richiesta arriva — Shopify riceve la richiesta HTTP del browser
2. Corrispondenza percorso — Shopify determina quale modello visualizzare (prodotto, collezione, pagina, ecc.)
3. Recupero dati — Shopify carica i dati del prodotto, i dati della collezione, le impostazioni e i metafield dal database
4. Lavorazione liquidi — Il motore del modello elabora tutti i tag, i loop, i condizionali e i filtri Liquid
5. Rendering della sezione — Ogni sezione del modello viene elaborata in modo indipendente
6. Assemblaggio HTML — Le sezioni elaborate vengono combinate nel documento HTML finale
7. Risposta inviata — L'HTML completo viene inviato al browser (questo è il momento in cui viene misurato il TTFB)

I passaggi 3-6 sono quelli in cui la qualità del codice Liquid conta di più. I template complessi con loop eccessivi, accesso intensivo ai dati e annidamento profondo di snippet estendono questi passaggi da 50ms a 500ms+.

L'intuizione chiave: ogni tag Liquid viene eseguito a ogni caricamento della pagina. A differenza del JavaScript front-end che può essere memorizzato nella cache, differito o caricato in modo lazy, Liquid viene rieseguito da zero a ogni richiesta. Questo rende l'ottimizzazione lato server composta — un miglioramento di 100ms di Liquid significa 100ms risparmiati su ogni singola visualizzazione di pagina. Scoprite di più su come il TTFB si inserisce nel quadro generale nella nostra Guida all'ottimizzazione del TTFB.

Profilazione delle prestazioni liquide con l'ispettore dei temi

Il Ispettore temi Shopify L'estensione Chrome è lo strumento migliore per identificare il codice Liquid lento. Ecco come utilizzarlo in modo efficace:

Impostazione

1. Installate "Shopify Theme Inspector for Chrome" dal Chrome Web Store
2. Accedi al tuo pannello di controllo Shopify nello stesso browser
3. Passa al tuo negozio (non all'amministratore, l'URL effettivo del negozio)
4. Fai clic sull'icona dell'estensione Theme Inspector → aggiunge ?pb=1 all'URL
5. Il grafico della fiamma del profiler appare in fondo alla pagina

Cosa cercare

• Blocchi larghi nel grafico della fiamma : rappresentano file Liquid o blocchi di codice che richiedono più tempo per il rendering
• Tratti >50ms : qualsiasi sezione che richiede più di 50 ms è un candidato all'ottimizzazione
• Chiamate di rendering dello snippet : rendering di snippet ad alta frequenza che si ripetono decine di volte
• Tempo totale di rendering del liquido : mostrato nella parte superiore del profiler. Meno di 200 ms va bene; oltre 500 ms necessitano di lavoro

Profilo di più tipi di pagina: home page, pagine di prodotto, pagine di collezione. Ciascuno avrà colli di bottiglia diversi. Le pagine di raccolta in genere hanno il tempo di rendering Liquid più elevato a causa dei loop di prodotto: consulta la nostra guida rapida alla pagina di raccolta per suggerimenti specifici della pagina.

Insidie ​​comuni delle prestazioni dei liquidi (e come risolverle)

1. Loop nidificati (il killer numero 1 delle prestazioni)

Un ciclo all'interno di un ciclo moltiplica le iterazioni in modo esponenziale. Questo è il problema di prestazioni di Liquid più comune e di maggiore impatto:

{% comment %} ❌ BAD: 50 products × 10 variants = 500 iterations {% endcomment %}

{% for product in collection.products %}

  {% for variant in product.variants %}

    {% if variant.available %}

      <option>{{ variant.title }} - {{ variant.price | money }}</option>

    {% endif %}

  {% endfor %}

{% endfor %}



{% comment %} ✅ BETTER: Limit products, handle variants client-side {% endcomment %}

{% for product in collection.products limit: 12 %}

  <div data-variants='{{ product.variants | json }}'>

    {{ product.title }}

  </div>

{% endfor %}

Correzione: Limita le iterazioni del ciclo esterno, sposta l'elaborazione interna su JavaScript ove possibile o appiattisci la struttura dei dati utilizzando json sul front-end.

2. Accesso eccessivo agli oggetti

Ogni volta che accedi alla proprietà di un oggetto Liquid, Shopify esegue una ricerca. L'accesso ripetuto alla stessa proprietà fa perdere tempo di elaborazione:

{% comment %} ❌ BAD: Accessing product.title 6 times {% endcomment %}

<h1>{{ product.title }}</h1>

<meta property="og:title" content="{{ product.title }}" />

<title>{{ product.title }} | {{ shop.name }}</title>

<span class="breadcrumb">{{ product.title }}</span>

<script>dataLayer.push({'name': '{{ product.title }}'})</script>



{% comment %} ✅ BETTER: Assign once, reference the variable {% endcomment %}

{% assign product_title = product.title %}

<h1>{{ product_title }}</h1>

<meta property="og:title" content="{{ product_title }}" />

<title>{{ product_title }} | {{ shop.name }}</title>

<span class="breadcrumb">{{ product_title }}</span>

<script>dataLayer.push({'name': '{{ product_title }}'})</script>

Regola pratica: Se accedi alla stessa proprietà dell'oggetto più di 3 volte, assegnala prima a una variabile. Ciò ha un impatto particolarmente elevato all’interno dei circuiti in cui i risparmi si moltiplicano.

3. Query di raccolta illimitate

Il caricamento di un'intera collezione quando ti servono solo pochi prodotti costringe Shopify a recuperare ed elaborare i dati non necessari:

{% comment %} ❌ BAD: Loads all products in the collection {% endcomment %}

{% for product in collections["best-sellers"].products %}

  {{ product.title }}

{% endfor %}



{% comment %} ✅ BETTER: Limit to what you actually display {% endcomment %}

{% for product in collections["best-sellers"].products limit: 8 %}

  {{ product.title }}

{% endfor %}

Impatto: Una raccolta con 500 prodotti richiede molto più tempo per l'iterazione rispetto a una limitata a 8. Utilizzare sempre Limite limit: quando sai di quanti articoli hai bisogno.

4. Snippet profondamente annidati Rendering

Ciascuno render ha un sovraccarico. Una sezione che esegue il rendering di uno snippet, che esegue il rendering di un altro snippet, che esegue il rendering di un altro snippet ancora, crea una catena di sovraccarico di elaborazione:

{% comment %} ❌ BAD: 3 levels of nesting for each product card {% endcomment %}

{% comment %} section → product-card snippet → price snippet → badge snippet {% endcomment %}

{% render "product-card", product: product %}

  {% comment %} Inside product-card.liquid: {% endcomment %}

  {% render "price-display", variant: product.selected_or_first_available_variant %}

    {% comment %} Inside price-display.liquid: {% endcomment %}

    {% render "sale-badge", compare_price: variant.compare_at_price %}



{% comment %} ✅ BETTER: Flatten into fewer, larger snippets {% endcomment %}

{% render "product-card", product: product %}

{% comment %} product-card.liquid handles price and badge inline {% endcomment %}

Migliore pratica: Mantieni l'annidamento degli snippet a un massimo di 2 livelli. Se trovi più di 3 livelli di annidamento, appiattisci gli snippet interni nel loro genitore.

5. Filtri per liquidi pesanti su set di dati di grandi dimensioni

Filtri liquidi come where, mape sort scorre le raccolte lato server. Il concatenamento di più filtri su set di dati di grandi dimensioni complica l'elaborazione:

{% comment %} ❌ SLOW: Three filter passes on a large collection {% endcomment %}

{% assign available = collection.products | where: "available", true %}

{% assign tagged = available | where: "tags", "featured" %}

{% assign sorted = tagged | sort: "price" %}



{% comment %} ✅ FASTER: Use a single limited loop with conditionals {% endcomment %}

{% for product in collection.products limit: 50 %}

  {% if product.available and product.tags contains "featured" %}

    {% comment %} Render product {% endcomment %}

  {% endif %}

{% endfor %}

Migliori pratiche per le prestazioni dei liquidi

Oltre a risolvere insidie ​​specifiche, queste pratiche mantengono veloci i modelli Liquid man mano che il tuo negozio cresce:

Utilizza l'impaginazione per raccolte di grandi dimensioni

Racchiudi sempre i cicli di raccolta nei tag impaginati. Senza impaginazione, Shopify tenta di elaborare tutti i prodotti contemporaneamente:

{% paginate collection.products by 24 %}

  {% for product in collection.products %}

    {% comment %} Render product card {% endcomment %}

  {% endfor %}

  {{ paginate | default_pagination }}

{% endpaginate %}

Sfrutta l'API di rendering della sezione

Shopify API di rendering della sezione ti consente di aggiornare singole sezioni tramite AJAX senza ricaricare l'intera pagina. Usalo per:

• Aggiornamenti del cassetto del carrello (rieseguire il rendering solo della sezione del carrello)
• Modifiche alle varianti del prodotto (rieseguire il rendering delle informazioni sul prodotto senza ricaricare l'intera pagina)
• Filtraggio raccolta (aggiorna solo la sezione griglia prodotto)
• Aggiunta rapida al carrello (riesegui il rendering del conteggio del carrello senza navigazione)

Ciò riduce il carico del server perché viene elaborata solo una sezione anziché l'intero modello di pagina.

Caricamento sezione condizionale

Non tutte le sezioni devono essere visualizzate per ogni visitatore. Utilizza i condizionali liquidi per saltare le sezioni pesanti quando non sono rilevanti:

{% comment %} Only render recently viewed if there are items to show {% endcomment %}

{% if section.settings.show_recently_viewed %}

  {% comment %} Render recently viewed section {% endcomment %}

{% endif %}



{% comment %} Skip heavy related products section on mobile if configured {% endcomment %}

{% unless section.settings.hide_on_mobile and request.user_agent contains "Mobile" %}

  {% comment %} Render related products {% endcomment %}

{% endunless %}

Riduci al minimo l'accesso al metafield

Le ricerche nei metafield richiedono query al database. Se utilizzi ampiamente i metafield, raggruppa i tuoi accessi:

{% comment %} ❌ BAD: Multiple metafield accesses scattered through template {% endcomment %}

<p>{{ product.metafields.custom.material }}</p>

<!-- ... 50 lines later ... -->

<span>{{ product.metafields.custom.material }}</span>



{% comment %} ✅ BETTER: Assign once at the top {% endcomment %}

{% assign material = product.metafields.custom.material %}

{% assign care_instructions = product.metafields.custom.care %}

{% assign origin = product.metafields.custom.origin %}

Elenco di controllo per l'ottimizzazione di Shopify Liquid

Esaminali in ordine: prima il profilo, quindi risolvi i problemi più grandi:

Domande frequenti sull'ottimizzazione di Shopify Liquid

Liquido più veloce = Primo byte più veloce = Tutto più veloce

L'ottimizzazione dei liquidi è il fondamento della velocità del negozio Shopify. Ogni millisecondo risparmiato nel rendering lato server si traduce direttamente in un TTFB più veloce e un TTFB più veloce significa che tutto a valle (rendering, interattività, carico visivo) inizia prima. Le soluzioni di maggiore impatto sono solitamente le più semplici: limitazione dei cicli di raccolta, assegnazione di valori ripetuti e appiattimento degli snippet nidificati.

Per un quadro completo della velocità, abbina l'ottimizzazione di Liquid ai miglioramenti della consegna front-end. Maniglie Thunder Page Speed Optimizer Differimento JavaScript, Ottimizzazione CSSe caricamento delle risorse: la controparte front-end del tuo lavoro Liquid lato server.

Metti alla prova il tuo negozio adesso per vedere il tuo TTFB attuale e identificare le opportunità di ottimizzazione. Per una strategia di ottimizzazione completa, consulta la nostra guida completa all'ottimizzazione della velocità di Shopify.