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 loads product data, collection data, settings, and metafields from the 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)

Steps 3-6 are where Liquid code quality matters most. Complex templates with excessive loops, heavy data access, and deep snippet nesting extend these steps from 50ms to 500ms+.

L'intuizione chiave: ogni tag Liquid viene eseguito a ogni caricamento della pagina. Unlike front-end JavaScript that can be cached, deferred, or lazy-loaded, Liquid re-executes from scratch on every request. This makes server-side optimization compound — a 100ms Liquid improvement means 100ms saved on every single page view. Learn more about how TTFB fits into the bigger picture in our 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. Install "Shopify Theme Inspector for Chrome" from the 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 %}'}{'
'}
{'      {{ variant.title }} - {{ variant.price | money }}'}{'
'}
{'    {% endif %}'}{'
'}
{'  {% endfor %}'}{'
'}
{'{% endfor %}'}{'
'}
{'
'}
{'{% comment %} ✅ BETTER: Limit products, handle variants client-side {% endcomment %}'}{'
'}
{'{% for product in collection.products limit: 12 %}'}{'
'}
{'  
'}{'
'}
{'    {{ product.title }}'}{'
'}
{'  
'}{'
'}
{'{% endfor %}'}}

Correzione: Limita le iterazioni del ciclo esterno, sposta l'elaborazione interna su JavaScript ove possibile o appiattisci la struttura dei dati utilizzando json Filtro ed elaborazione 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 %}

{'
{{ product.title }}
'}{'
'}
{''}{'
'}
{''}{'
'}
{'{{ product.title }}'}{'
'}
{'<script>dataLayer.push({'name': '{{ product.title }}'})</script>'}{'
'}
{'
'}
{'{% comment %} ✅ BETTER: Assign once, reference the variable {% endcomment %}'}{'
'}
{'{% assign product_title = product.title %}'}{'
'}
{'
{{ product_title }}
'}{'
'}
{''}{'
'}
{''}{'
'}
{'{{ product_title }}'}{'
'}
{'<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 : quando sai di quanti articoli hai bisogno.

4. Snippet profondamente annidati Rendering

Ciascuno La chiamata 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 dove Mappa, e ordinamento 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 %}

{'
{{ product.metafields.custom.material }}
'}{'
'}
{''}{'
'}
{'{{ product.metafields.custom.material }}'}{'
'}
{'
'}
{'{% 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.