Shopify acelera las tiendas Liquid: las páginas empiezan a cargar hasta un 29% más rápido

La velocidad de una tienda online no depende únicamente de la cantidad de código, imágenes o aplicaciones que utiliza. También depende de la forma en que el servidor entrega la página al navegador. En septiembre de 2026, Shopify anunció un cambio importante en la infraestructura de las tiendas basadas en Liquid: el HTML puede empezar a llegar al navegador antes de que termine de renderizarse toda la plantilla.

Según los datos publicados por Shopify, este cambio permitió reducir el Time to First Byte (TTFB) aproximadamente un 29% en el percentil 75 para la tienda mediana, mientras que en el percentil 90 la mejora fue de alrededor del 21%. Shopify también registró mejoras de entre un 2% y un 6% en First Contentful Paint (FCP) y Largest Contentful Paint (LCP).

Para los comerciantes que utilizan Shopify existe además una ventaja especialmente importante: la mejora se ha implementado a nivel de plataforma y, en las páginas compatibles, no requiere ningún cambio por parte del comerciante para empezar a beneficiarse del nuevo mecanismo. Sin embargo, la estructura de cada tema sigue desempeñando un papel fundamental en la velocidad que percibe realmente el usuario.

¿Qué ha cambiado en la carga de las tiendas Shopify?

Tradicionalmente, cuando se solicitaba una página Liquid, Shopify procesaba el documento y el navegador tenía que esperar antes de poder empezar a trabajar con determinados elementos importantes de la respuesta. Esto significaba que recursos necesarios para mostrar el contenido, como hojas de estilo o fuentes, podían permanecer sin descubrir mientras el servidor continuaba procesando la plantilla.

Con el nuevo sistema, Shopify renderiza el contenido del layout hasta {{ content_for_header }} y envía esa primera parte al navegador lo antes posible. El HTML restante llega posteriormente dentro del mismo flujo de respuesta cuando termina de procesarse la plantilla.

En la práctica, el servidor y el navegador pueden trabajar de una forma más paralela. Mientras Shopify continúa procesando la plantilla, el navegador ya puede interpretar la primera parte del documento, establecer conexiones y comenzar a descargar los recursos que encuentra.

Es importante señalar que esto no significa que el documento HTML final sea diferente. Cuando se unen las diferentes partes, el resultado continúa siendo el mismo documento. Lo que cambia es el momento en que el navegador empieza a recibir y procesar información útil.

¿Por qué puede mejorar la experiencia del usuario?

En e-commerce, cada periodo de espera puede influir en la percepción de calidad de la experiencia. Cuando el navegador recibe antes las referencias a CSS, fuentes y otros recursos necesarios para mostrar inicialmente la página, puede empezar a procesarlos mientras el servidor todavía está generando el resto del contenido.

Por este motivo, la mejora del TTFB debe analizarse junto con métricas de rendimiento visual. FCP indica cuándo el visitante empieza a ver contenido, mientras que LCP está relacionado con el momento en que aparece uno de los elementos de contenido más grandes dentro del área visible de la página.

Shopify registró mejoras más moderadas en estas dos métricas, de entre un 2% y un 6%, pero son precisamente estas diferencias las que pueden influir directamente en lo que experimenta el comprador. Una respuesta más rápida del servidor es importante, pero para el cliente lo realmente relevante es cuándo puede ver y utilizar la tienda.

No todas las páginas de Shopify son compatibles todavía

La implementación todavía no cubre todas las páginas ni todas las configuraciones de temas. Según la documentación técnica de Shopify, una página puede utilizar HTML en streaming cuando se renderiza a partir de una plantilla JSON y cuando {{ content_for_header }} aparece como una etiqueta de salida simple dentro del head.

Existen, por tanto, varias situaciones en las que actualmente no se aplica este sistema:

• Páginas renderizadas desde plantillas .liquid en lugar de plantillas JSON.

• Implementaciones en las que {{ content_for_header }} utiliza filtros o se encuentra dentro de condiciones o bloques de captura.

• Casos en los que {{ content_for_header }} está dentro de un snippet o se asigna previamente a una variable.

• Previsualizaciones de temas, la barra de previsualización y el editor de temas.

Esto significa también que los desarrolladores que quieran comprobar el impacto real de esta mejora deberían realizar las pruebas sobre el tema publicado de la tienda, y no depender exclusivamente del editor o del entorno de previsualización.

La arquitectura del tema sigue marcando la diferencia

Uno de los aspectos más interesantes de esta actualización es que dos tiendas Shopify compatibles pueden obtener mejoras visuales diferentes aunque ambas registren una reducción similar del TTFB.

La razón se encuentra en la posición de los recursos críticos respecto a {{ content_for_header }}. El navegador solo puede descargar aquello que ya conoce. Si la hoja de estilos principal se declara después de esta etiqueta, su referencia llegará con la segunda parte de la respuesta.

Si, por el contrario, los recursos esenciales para la primera visualización se encuentran correctamente definidos antes de {{ content_for_header }}, el navegador puede empezar a descargarlos mientras Shopify sigue procesando el resto de la plantilla.

Shopify mostró esta diferencia utilizando sus temas Dawn y Horizon. Durante la implementación, ambos consiguieron mejoras similares en TTFB, pero Horizon convirtió esa ventaja de infraestructura en mejoras superiores de FCP y LCP porque una mayor cantidad de recursos necesarios para la renderización ya estaba disponible para el navegador mientras la plantilla continuaba procesándose.

¿Hay que mover todos los recursos antes de content_for_header?

No. La optimización debe realizarse teniendo en cuenta las dependencias existentes dentro del tema. Mover recursos de forma indiscriminada puede generar problemas inesperados.

Por ejemplo, los scripts ejecutados antes de que determinadas variables de Shopify estén disponibles pueden producir errores. Cambiar la posición de una hoja de estilos también puede afectar a la especificidad del CSS cuando sus reglas compiten con estilos inyectados por Shopify.

El enfoque adecuado consiste en identificar qué recursos son realmente críticos para la primera visualización, comprender sus dependencias y, posteriormente, optimizar su posición dentro del documento.

Este es un buen ejemplo de cómo el rendimiento de Shopify depende de la combinación entre mejoras realizadas a nivel de plataforma y decisiones tomadas durante el desarrollo del tema. Para empresas con necesidades más avanzadas, una estrategia de desarrollo de e-commerce avanzado con Shopify Plus debería considerar estas cuestiones de rendimiento desde la propia arquitectura del proyecto.

El streaming no elimina la necesidad de optimizar Liquid

Existe otra diferencia importante que conviene entender: el nuevo mecanismo modifica cuándo empieza a llegar el HTML al navegador, pero no elimina el trabajo de procesamiento que debe realizar el servidor.

Una plantilla que contiene operaciones Liquid costosas sigue necesitando tiempo de procesamiento. Los bucles complejos, las llamadas de renderizado innecesarias y las estructuras poco eficientes no desaparecen simplemente porque la primera parte del documento pueda enviarse antes.

Las buenas prácticas de rendimiento en Liquid continúan siendo, por tanto, esenciales. El objetivo debería abordarse desde dos frentes: permitir que el navegador empiece a realizar trabajo útil lo antes posible y, al mismo tiempo, reducir el tiempo total necesario para generar la respuesta completa.

El mismo principio se aplica cuando el contenido visible en la parte superior de la página depende de una API externa solicitada mediante JavaScript. Iniciar antes las solicitudes críticas puede hacer que estas se ejecuten en paralelo con el procesamiento de la plantilla, en lugar de generar un nuevo periodo de espera secuencial.

El TTFB requiere ahora una interpretación más cuidadosa

La introducción del HTML en streaming también plantea un reto interesante en la medición del rendimiento. Durante muchos años, el TTFB se ha utilizado como un indicador aproximado del tiempo que necesita el servidor para empezar a responder. Tecnologías como Early Hints y ahora las respuestas progresivas hacen que esta interpretación sea menos directa.

Con streaming, el primer byte puede llegar considerablemente antes mientras el servidor continúa procesando el resto del documento. Por tanto, una reducción del 29% en el TTFB no significa necesariamente que todo el proceso de renderizado del servidor sea un 29% más rápido.

Para analizar el procesamiento de Liquid, Shopify recomienda herramientas como Theme Inspector for Chrome. Otra aproximación consiste en observar el intervalo entre finalResponseHeadersStart y responseEnd, aunque esta medición también puede estar condicionada por la red y el dispositivo utilizado.

Este cambio refuerza un principio importante del análisis de rendimiento web: ninguna métrica debería interpretarse de forma aislada. TTFB, FCP, LCP y el tiempo total de renderizado responden a preguntas diferentes sobre el proceso de carga.

¿Qué conviene analizar en una tienda Shopify?

Las mejoras automáticas de infraestructura constituyen una excelente base, pero no sustituyen un análisis técnico de la tienda. Para comprobar si un proyecto Shopify está aprovechando realmente las capacidades actuales de la plataforma, conviene revisar:

1. Si las principales páginas de la tienda utilizan plantillas JSON compatibles con streaming.

2. Dónde está situado {{ content_for_header }} dentro del layout.

3. Qué hojas de estilo, fuentes y otros recursos críticos se declaran antes y después de esta etiqueta.

4. Si existen scripts que dependen de objetos o variables de Shopify disponibles únicamente más adelante.

5. Cuánto tiempo de procesamiento continúa consumiendo Liquid.

6. Si el contenido situado por encima del primer scroll depende de solicitudes externas que comienzan demasiado tarde.

7. Cómo se comportan FCP y LCP en condiciones de uso realistas y no únicamente en una prueba aislada.

Un análisis más amplio de SEO técnico también puede ayudar a identificar problemas de rendimiento, arquitectura e implementación que pueden afectar tanto a la experiencia del usuario como a la capacidad de una tienda para competir en los resultados orgánicos.

El rendimiento continúa siendo una responsabilidad compartida

Esta actualización demuestra una de las ventajas de trabajar con una plataforma de e-commerce capaz de implementar mejoras de infraestructura a gran escala. Un cambio realizado por Shopify puede generar mejoras de rendimiento en un gran número de tiendas sin exigir que cada comerciante modifique individualmente su código.

Al mismo tiempo, también demuestra los límites de esa ventaja. Shopify puede entregar antes la primera parte del HTML, pero no puede convertir automáticamente un tema mal estructurado en una tienda de alto rendimiento.

El orden de los recursos, la calidad del código Liquid, las aplicaciones instaladas, JavaScript, las integraciones con terceros, las imágenes y la arquitectura general del tema continúan influyendo en la experiencia final.

Para tiendas con volúmenes elevados de tráfico u operaciones de e-commerce más complejas, pequeñas mejoras pueden acumularse hasta generar diferencias relevantes. Por este motivo, el rendimiento debería considerarse un proceso continuo de medición, desarrollo y optimización, y no una tarea que se realiza una única vez durante el lanzamiento de la tienda.

Una tienda Shopify más rápida empieza antes del primer byte

La nueva arquitectura de HTML en streaming de Shopify permite que el navegador empiece a trabajar mientras el servidor continúa procesando otras partes de la página. Es un cambio de infraestructura que puede resultar prácticamente invisible para comerciantes y compradores, pero que reduce periodos durante los cuales el navegador anteriormente permanecía esperando.

El siguiente paso consiste en asegurarse de que el tema puede aprovechar correctamente esta ventaja. Posicionar los recursos críticos en el lugar adecuado, reducir el procesamiento Liquid innecesario y medir las métricas que reflejan la experiencia real del usuario son ahora todavía más importantes.

Para las empresas que utilizan Shopify como un canal estratégico de ventas, una adecuada estrategia de transformación digital debería considerar el rendimiento, la tecnología, la experiencia de usuario, el SEO y la conversión como partes interconectadas del mismo sistema. Una infraestructura más rápida crea una oportunidad - la calidad del tema y de su implementación determina hasta qué punto esa oportunidad se convierte en una experiencia de compra realmente más rápida.