Dos capas de velocidad: Liquid (Servidor) + Front-End (Navegador)

La velocidad de la tienda Shopify tiene dos capas distintas. Optimización de líquidos acelera la generación de HTML del lado del servidor, reduciendo TTFB. Optimización del front-end acelera lo que hace el navegador con ese HTML, reduciendo LCP, TBT e INP.

Thunder Page Speed Optimizer maneja la capa frontal: aplazar JavaScript que bloquea el renderizado, optimizando Entrega de CSSy gestionar el orden de carga de recursos. Este artículo cubre la capa del lado del servidor: cómo hacer que sus plantillas de Liquid generen HTML más rápido.

Realiza una prueba de velocidad en tu tienda para ver ambas capas en acción. Si TTFB está por encima de 800 ms, la optimización de Liquid debería ser su primera prioridad. Si TTFB ya es rápido pero LCP/TBT son lentos, arreglando recursos que bloquean el renderizado con Thunder tendrá el mayor impacto.

Cómo funciona el proceso de renderizado líquido de Shopify

Comprender el proceso de renderizado le ayuda a saber dónde los esfuerzos de optimización marcan la diferencia:

1. Llega la solicitud — Shopify recibe la solicitud HTTP del navegador
2. Coincidencia de rutas — Shopify determina qué plantilla representar (producto, colección, página, etc.)
3. Obtención de datos — Shopify loads product data, collection data, settings, and metafields from the database
4. Procesamiento de líquidos : el motor de plantillas procesa todas las etiquetas, bucles, condicionales y filtros de Liquid.
5. Representación de sección : cada sección de la plantilla se procesa de forma independiente
6. Ensamblaje HTML : las secciones procesadas se combinan en el documento HTML final
7. Respuesta enviada : el HTML completo se envía al navegador (aquí es cuando se mide el 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+.

La idea clave: cada etiqueta de Liquid se ejecuta en cada carga de página. 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 Guía de optimización de TTFB.

Creación de perfiles de rendimiento líquido con Theme Inspector

El Inspector de temas de Shopify La extensión de Chrome es la mejor herramienta para identificar código Liquid lento. A continuación se explica cómo utilizarlo de forma eficaz:

Configuración

1. Install "Shopify Theme Inspector for Chrome" from the Chrome Web Store
2. Inicie sesión en su administrador de Shopify en el mismo navegador
3. Navegue hasta el escaparate de su tienda (no el administrador, la URL real de la tienda)
4. Haga clic en el ícono de extensión del Inspector de temas → agrega ?pb=1 a la URL
5. El gráfico de llamas del perfilador aparece en la parte inferior de la página.

Qué buscar

• Bloques anchos en el gráfico de llamas : representan archivos de Liquid o bloques de código que tardan más en renderizarse
• Secciones >50ms : cualquier sección que tarde más de 50 ms es candidata a optimización
• Llamadas de renderizado de fragmentos : renderizaciones de fragmentos de alta frecuencia que se repiten docenas de veces
• Tiempo total de renderizado líquido : se muestra en la parte superior del generador de perfiles. Menos de 200 ms es bueno; más de 500 ms necesita trabajo

Perfile varios tipos de páginas: página de inicio, páginas de productos, páginas de colección. Cada uno tendrá diferentes obstáculos. Las páginas de colección suelen tener el tiempo de renderizado de Liquid más alto debido a los bucles de productos; consulte nuestra guía de velocidad de la página de colección para obtener consejos específicos de la página.

Errores comunes en el rendimiento de los líquidos (y cómo solucionarlos)

1. Bucles anidados (el factor determinante del rendimiento número uno)

Un bucle dentro de un bucle multiplica las iteraciones exponencialmente. Este es el problema de rendimiento de Liquid más común y de mayor impacto:

{% 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 %}'}}

Solución: Limite las iteraciones del bucle externo, mueva el procesamiento interno a JavaScript cuando sea posible o aplane la estructura de datos usando json filtrar y procesar en el front-end.

2. Acceso excesivo a objetos

Cada vez que accedes a una propiedad de objeto Liquid, Shopify realiza una búsqueda. Acceder repetidamente a la misma propiedad hace perder tiempo de procesamiento:

{% 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>'}}

Regla general: Si accede a la misma propiedad de objeto más de 3 veces, asígnela primero a una variable. Esto tiene un impacto especial dentro de los circuitos donde los ahorros se multiplican.

3. Consultas de recopilación ilimitadas

Cargar una colección completa cuando solo necesitas unos pocos productos obliga a Shopify a buscar y procesar datos innecesarios:

{% 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 %}'}}

Impacto: Una colección con 500 productos tarda mucho más en iterarse que una limitada a 8. Utilice siempre Límite : cuando sabes cuántos artículos necesitas.

4. Fragmentos profundamente anidados

Cada uno renderizar La llamada tiene gastos generales. Una sección que representa un fragmento, que representa otro fragmento, que representa otro fragmento más, crea una cadena de sobrecarga de procesamiento:

{% 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 %}'}}

Mejores prácticas: Mantenga el anidamiento de fragmentos en 2 niveles como máximo. Si encuentra más de 3 niveles de anidamiento, aplane los fragmentos internos en su padre.

5. Filtros de líquidos pesados en grandes conjuntos de datos

Filtros de líquidos como donde, mapa, y ordenar iterar a través de las colecciones del lado del servidor. Encadenar múltiples filtros en grandes conjuntos de datos complica el procesamiento:

{% 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 %}'}}

Mejores prácticas de rendimiento de líquidos

Más allá de solucionar errores específicos, estas prácticas mantienen las plantillas de Liquid rápidas a medida que crece su tienda:

Usar paginación para colecciones grandes

Siempre ajuste los bucles de colección en etiquetas de paginación. Sin paginación, Shopify intenta procesar todos los productos a la vez:

{% paginate collection.products by 24 %}

{'  {% for product in collection.products %}'}{'
'}
{'    {% comment %} Render product card {% endcomment %}'}{'
'}
{'  {% endfor %}'}{'
'}
{'  {{ paginate | default_pagination }}'}{'
'}
{'{% endpaginate %}'}}

Aprovechar la API de representación de secciones

Shopify API de representación de secciones te permite actualizar secciones individuales a través de AJAX sin recargar toda la página. Utilice esto para:

• Actualizaciones del cajón del carrito (volver a representar solo la sección del carrito)
• Cambios en la variante del producto (volver a representar la información del producto sin recargar la página completa)
• Filtrado de colecciones (actualice solo la sección de la cuadrícula de productos)
• Agregar rápidamente al carrito (volver a representar el recuento del carrito sin navegación)

Esto reduce la carga del servidor porque solo se procesa una sección en lugar de toda la plantilla de página.

Carga de sección condicional

No es necesario representar todas las secciones para todos los visitantes. Utilice condicionales líquidos para omitir secciones pesadas cuando no sean relevantes:

{% 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 %}'}}

Minimizar el acceso a metacampos

Las búsquedas de metacampos requieren consultas de bases de datos. Si utiliza metacampos ampliamente, agrupe su acceso:

{% 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 %}'}}

Lista de verificación de optimización de líquidos de Shopify

Resuelva estos problemas en orden: primero el perfil y luego solucione los problemas más importantes:

Preguntas frecuentes sobre la optimización de Shopify Liquid

Líquido más rápido = Primer byte más rápido = Todo más rápido

La optimización líquida es la base de la velocidad de la tienda Shopify. Cada milisegundo ahorrado en el renderizado del lado del servidor se traduce directamente en un TTFB más rápido, y un TTFB más rápido significa que todo lo posterior (renderizado, interactividad, carga visual) comienza antes. Las soluciones más impactantes suelen ser las más simples: limitar los bucles de recopilación, asignar valores repetidos y aplanar fragmentos anidados.

Para obtener una imagen completa de la velocidad, combine la optimización de Liquid con mejoras en la entrega frontal. manijas Thunder Page Speed Optimizer Aplazamiento de JavaScript, Optimización CSSy carga de recursos: la contraparte frontal del trabajo Liquid del lado del servidor.

Prueba tu tienda ahora para ver su TTFB actual e identificar oportunidades de optimización. Para obtener una estrategia de optimización completa, consulte nuestra guía completa de optimización de velocidad de Shopify.