Qué hace Shopify de forma nativa para la carga diferida
Shopify no tiene un solo botón de "carga diferida" en tu panel de administración. No hay ninguna casilla de verificación en Configuración → Rendimiento que lo habilite en toda la tienda. En cambio, Shopify proporciona herramientas para desarrolladores de temas para implementar la carga diferida, y el uso de esas herramientas depende completamente de su tema.
Esto es lo que Shopify ofrece a nivel de plataforma:
El filtro Liquid image_tag — Cuando los temas usan este filtro para mostrar imágenes, Shopify puede añadir automáticamente loading="lazy" a las imágenes de las secciones situadas más abajo en la página.
La propiedad section.index — Indica la posición de una sección en la página. Permite cargar de inmediato las imágenes de las 2 primeras secciones y diferir las que quedan debajo.
Conversión automática WebP/AVIF : El CDN de Shopify muestra automáticamente imágenes en formatos modernos cuando el navegador los admite, lo que reduce el tamaño de los archivos entre un 25 % y un 50 %.
Imágenes adaptables — El filtro image_tag genera varios tamaños de imagen para que el navegador descargue el adecuado para cada pantalla.
Estos son bloques de construcción sólidos. Pero son elementos básicos, no una solución completa. La brecha entre las "herramientas disponibles" y las "herramientas realmente utilizadas en su tienda" es donde residen la mayoría de los problemas de rendimiento.
¿Tienes curiosidad por saber dónde se encuentra tu tienda? Realiza una prueba de velocidad gratuita para ver si la carga diferida ayuda o perjudica tu rendimiento.
Cómo funcionan image_tag y section.index en Shopify
El filtro Liquid image_tag es el método que Shopify recomienda para mostrar imágenes en los temas. Si se usa correctamente, gestiona los tamaños adaptables, la conversión de formato y la carga diferida en una sola línea:
{{ product.featured_image | image_url: width: 800 | image_tag: loading: "lazy" }}Resulta especialmente útil combinarlo con section.index. Esta propiedad indica la posición de una sección en la página. El equipo de rendimiento de Shopify recomienda usarla así:
{%- liquid
if section.index > 2
assign loading = "lazy"
else
assign loading = "eager"
endif
-%}
{{ section.settings.image | image_url: width: 1080 | image_tag: loading: loading }}Este código carga de inmediato las imágenes de las dos primeras secciones (normalmente la imagen principal y la colección destacada) y difiere todo lo que aparece debajo. Este enfoque evita el error más frecuente de la carga diferida: aplicar carga diferida a la imagen LCP.
Detalle importante: La propiedad section.index se introdujo a finales de 2022. Los temas anteriores no la usan, por lo que suelen diferir todas las imágenes (perjudicial para LCP) o ninguna (perjudicial para el rendimiento del contenido situado bajo la zona visible).
El filtro image_tag también genera un atributo srcset con varios anchos de imagen para que el navegador elija el tamaño óptimo. Esto complementa la carga diferida: cuando se necesita una imagen, el navegador selecciona en srcset la versión adecuada al ancho de la zona visible.
¿Qué temas de Shopify tienen carga diferida nativa?
No todos los temas son iguales cuando se trata de implementación de carga diferida. Aquí está el desglose:
Temas con buena carga diferida nativa
Dawn (y los temas basados en él) usa correctamente image_tag y section.index, y añade fetchpriority="high" a las imágenes LCP. Es la implementación de referencia de Shopify y un referente de rendimiento para los temas.
Sense, Craft, Taste, Colorblock — Estos temas gratuitos de Shopify se basan en la arquitectura Dawn y heredan la misma lógica de carga diferida.
La mayoría de los temas premium actualizados después de 2023 : desarrolladores de temas de renombre como Out of the Sandbox, Archetype y Prestige han actualizado sus temas para usarlos. section.index y image_tag.
Temas con carga diferida nativa deficiente o nula
Temas creados antes de 2022 — Estos son anteriores section.index y, a menudo, utilizan bibliotecas de carga diferida de JavaScript como lazysizes, o ninguna carga diferida.
Temas muy personalizados : incluso si el tema base tenía una carga diferida, las modificaciones personalizadas a menudo lo interrumpen. Los desarrolladores que agregan secciones personalizadas con frecuencia se saltan el section.index lógica.
Temas que utilizan carga diferida solo en JS : algunos temas utilizan lazysizes o bibliotecas similares que agregan una sobrecarga de JavaScript y pueden entrar en conflicto con la carga diferida del navegador nativo.
¿No estás seguro de en qué categoría entra tu tema? La forma más sencilla de averiguarlo es inspeccionar su sitio, lo cual cubriremos en el sección de prueba a continuación. Para obtener una visión más profunda del rendimiento del tema, consulte nuestra guía en el temas de Shopify más rápidos Guía.
5 cosas que la carga diferida nativa de Shopify no cubre
Incluso con un tema moderno usando image_tag correctamente, la carga diferida nativa de Shopify tiene importantes puntos ciegos:
1. Imágenes y scripts inyectados por aplicaciones
Cada aplicación de Shopify que agrega elementos visuales (widgets de reseñas, insignias de confianza, ventanas emergentes de ventas adicionales, widgets de chat) inyecta sus propias imágenes y scripts directamente en el DOM. Estos evitan por completo la carga diferida de su tema porque no se procesan a través de Liquid. image_tag.
La tienda Shopify promedio tiene entre 6 y 8 aplicaciones instaladas. Cada uno agrega scripts que se cargan inmediatamente, independientemente de dónde aparezcan en la página. Este es el el mayor asesino de velocidad en la mayoría de las tiendas : y está completamente fuera del alcance de la carga diferida nativa.
2. Imágenes de fondo CSS
El atributo loading="lazy" solo funciona en elementos <img> y <iframe>. Las imágenes configuradas como fondos CSS (background-image: url(...)) — habituales en secciones hero, banners y superposiciones — siempre se cargan inmediatamente. El navegador las descarga en cuanto analiza el CSS, aunque la sección esté muy por debajo de la parte visible de la página.
3. Vídeos e incrustaciones
Mientras loading="lazy" técnicamente funciona en iframes (incluidas las incrustaciones de YouTube), Shopify
El filtro image_tag no se aplica a elementos de vídeo ni a iframes: es solo de imagen. Los comerciantes que agregan videos de productos, reseñas de YouTube o incrustaciones de Instagram deben manejar la carga diferida por separado. Vea nuestro Guía de optimización de vídeos de Shopify para patrones de fachada y técnicas de carga diferida. Para una comprensión más profunda de las compensaciones, consulte Carga diferida versus carga ansiosa en Shopify.
4. Decisiones de carga receptivas
El section.index > 2 el enfoque es una heurística aproximada. Lo que está "debajo del pliegue" en un monitor de escritorio es muy diferente de un teléfono móvil. Una cuadrícula de imágenes que muestra 4 columnas en el escritorio (todas visibles) podría mostrar 1 columna en el móvil (solo 1 visible). La carga diferida nativa no se adapta al tamaño de la pantalla — utiliza la misma lógica basada en secciones independientemente del dispositivo.
5. Aplazamiento del guión
La carga diferida de imágenes es solo la mitad de la ecuación de rendimiento. Scripts de bloqueo de renderizado — tanto de su tema como de las aplicaciones — a menudo causan más daño al rendimiento que las imágenes no optimizadas. La carga diferida nativa aborda las imágenes pero no hace nada por JavaScript. Aplazar los scripts de las aplicaciones, integrar CSS crítico y precargar fuentes requieren un conjunto de herramientas completamente diferente.
Llene cada vacío: Thunder maneja lo que la carga diferida nativa no puede
El optimizador de velocidad de página Thunder funciona encima de la carga diferida nativa de tu tema, llenando todos los espacios enumerados anteriormente. Identifica automáticamente su imagen LCP y la carga con entusiasmo, carga de forma diferida todo lo que se encuentra debajo de la página (incluido el contenido inyectado por la aplicación) y pospone secuencias de comandos no críticas que la carga diferida de imágenes no puede tocar.
- ✦ Aplaza los scripts de la aplicación : el mayor asesino de velocidad que ninguna carga diferida de imágenes puede solucionar
- ✦ Detección inteligente de LCP : nunca carga de forma diferida el contenido de la mitad superior de la página, independientemente del dispositivo
- ✦ Funciona con cualquier tema : antiguo, nuevo, personalizado o listo para usar
- ✦ CSS crítico integrado + fuentes precargadas : optimización integral, no solo carga de imágenes
La mayoría de las tiendas ven un Mejora de puntuación de velocidad de más de 27 puntos después de la instalación, porque Thunder aborda toda la pila de optimización, no solo la carga de imágenes. Ver precios.
Instalar Thunder — Prueba gratuita →Cómo comprobar si tu tienda Shopify tiene carga diferida
Antes de realizar cualquier cambio, verifique si su tema ya implementa la carga diferida. Aquí hay tres formas de comprobarlo:
Método 1: Inspeccionar elemento (30 segundos)
- 1. Abre tu tienda en Chrome
- 2. Desplácese hacia abajo hasta una imagen muy por debajo de la página (por ejemplo, un producto en la tercera fila de una colección).
- 3. Haga clic derecho en la imagen → Inspeccionar
- 4. Buscar
Etiqueta
loading="lazy"en el<img>
Si ves loading="lazy", tu tema tiene carga diferida nativa para esa imagen. si ves loading="eager" o ningún atributo de carga, no es así.
Método 2: pestaña Red de Chrome DevTools
- 1. Abra DevTools (F12) → pestaña Red
- 2. Filtrar por "Img"
- 3. Recarga completa (Ctrl+Shift+R)
- 4. Observe el recuento de imágenes: si todas las imágenes se cargan inmediatamente, la carga diferida no funciona
- 5. Ahora desplácese lentamente hacia abajo: si aparecen nuevas solicitudes de imágenes mientras se desplaza, la carga diferida está activa
Método 3: PageSpeed Insights
Dirige tu tienda a través Estadísticas de PageSpeed de Google. Si ve la recomendación "Aplazar imágenes fuera de la pantalla", las imágenes de la página inferior no se están cargando de forma diferida. Si esa recomendación no aparece, es probable que la carga diferida esté funcionando. También puedes utilizar nuestro prueba de velocidad gratuita de Shopify para una evaluación rápida.
Agregar carga diferida nativa a Shopify manualmente
Si su tema no tiene carga diferida o lo implementa mal, aquí le mostramos cómo agregarlo manualmente. Esto requiere editar los archivos Liquid de su tema; primero haga una copia de seguridad.
Paso 1: use image_tag en lugar de etiquetas img
Encuentra instancias donde tu tema usa raw
Etiquetas <img> y reemplazarlas con Shopify
Filtro image_tag . Esto por sí solo le brinda imágenes responsivas, conversión WebP y la base para la carga diferida.
Antes (etiqueta img manual):
<img src="{{ product.featured_image | image_url: width: 800 }}" alt="{{ product.title }}" />Después (image_tag con carga diferida):
{{ product.featured_image | image_url: width: 800 | image_tag: loading: "lazy", alt: product.title }}Paso 2: Agregar lógica de section.index
Para evitar la carga diferida de imágenes en la mitad superior de la página, agregue lógica condicional basada en la posición de la sección:
{%- liquid
if section.index > 2
assign loading = "lazy"
else
assign loading = "eager"
endif
-%}
{{ section.settings.image | image_url: width: 1080 | image_tag: loading: loading }}Paso 3: Agregue fetchpriority a su imagen LCP
Para su imagen principal o imagen principal del producto (el elemento LCP probable), agregue fetchpriority="high" para indicarle al navegador que le dé prioridad:
{{ section.settings.hero_image | image_url: width: 1200 | image_tag: loading: "eager", fetchpriority: "high" }} ⚠️ Importante: Solo uso fetchpriority="high" en 1 o 2 imágenes por página. Usarlo en varias imágenes anula el propósito: si todo tiene alta prioridad, nada lo es. Para Estrategias de optimización de LCP, consulte nuestra guía dedicada.
Errores comunes de carga diferida nativa en Shopify
❌ Carga diferida de la imagen del héroe
Agregar loading="lazy" a su banner principal o imagen de producto destacado obliga al navegador a esperar a que IntersectionObserver confirme que es visible, lo que agrega entre 200 y 1000 ms a su LCP. Equipo de desempeño de Shopify confirmó que esto cuesta una mediana de 1,0 segundo de LCP.
❌ Mezcla de carga diferida nativa y JS
Algunos temas incluyen lazysizes.js y nativo loading="lazy". Esto crea un doble procesamiento: la carga diferida nativa del navegador se activa, y la biblioteca JS ejecuta su propia lógica de intersección. Pierde tiempo de CPU y puede hacer que las imágenes parpadeen o se carguen dos veces. Elija uno: nativo es la opción correcta en 2026.
❌ Faltan atributos de ancho y alto
Carga diferida sin explícito
Causas de los atributos width y height (o relación de aspecto CSS) Cambio de diseño acumulativo (CLS). Cuando se carga la imagen diferida, la página salta a medida que la imagen empuja el contenido hacia abajo. el
El filtro image_tag agrega dimensiones automáticamente: otra razón para usarlo en lugar de sin formato <img> .
❌ Suponiendo que todas las secciones usan image_tag
Incluso en temas que generalmente usan image_tag, las secciones personalizadas y las aplicaciones de secciones de terceros a menudo usan archivos sin formato
Etiquetas <img> . Una sección cargada incorrectamente puede afectar el rendimiento de toda la página. Audite todas las secciones, no solo los valores predeterminados del tema.
Estos errores son exactamente la razón por la que muchos comerciantes prefieren una solución integral. Si desea comprender el panorama completo de lo que está frenando su tienda, diagnostica los problemas de velocidad de tu tienda con nuestra guía paso a paso, o simplemente sigue la guía de optimización completa.
Preguntas frecuentes
¿Shopify carga imágenes automáticamente de forma diferida?
Parcialmente. El filtro Liquid image_tag de Shopify establece loading='lazy' en las imágenes de las secciones cuyo valor section.index es mayor que 2. Las imágenes de las dos primeras secciones se cargan de inmediato y las restantes, de forma diferida. Esto solo funciona en temas que utilizan correctamente image_tag. Muchos temas antiguos o personalizados no lo usan, por lo que sus imágenes se cargan de inmediato de forma predeterminada. Thunder Page Speed Optimizer aplica automáticamente la carga diferida inteligente en todos los temas.
¿El tema Dawn tiene carga diferida incorporada?
Sí. Dawn utiliza el filtro Liquid image_tag de Shopify y la propiedad section.index para diferir automáticamente la carga de las imágenes en las secciones posteriores a las dos primeras. También utiliza fetchpriority='high' en las imágenes LCP. Sin embargo, esta implementación no cubre las imágenes inyectadas dinámicamente por aplicaciones, las imágenes de fondo definidas mediante CSS, los vídeos ni los iframes. Todos ellos también pueden beneficiarse de la carga diferida.
¿Necesito una aplicación de carga diferida si mi tema ya la tiene?
Depende de la calidad de la implementación de su tema. Si utiliza correctamente el filtro nativo image_tag de Shopify y tiene pocas aplicaciones, la carga diferida integrada puede ser suficiente. Si utiliza varias aplicaciones que inyectan sus propias imágenes y scripts, tiene un tema personalizado o desea una optimización integral con aplazamiento de scripts, CSS crítico y precarga de fuentes, una aplicación como Thunder ofrece resultados significativamente mejores que la carga diferida del tema por sí sola.
¿Cuál es la diferencia entre la carga diferida nativa de Shopify y la carga diferida del navegador?
La carga diferida del navegador utiliza el atributo HTML loading='lazy', que retrasa la descarga de una imagen hasta que el usuario se desplaza cerca de ella. Funciona en más del 96 % de los navegadores modernos. La carga diferida nativa de Shopify se refiere al filtro Liquid image_tag, que añade automáticamente loading='lazy' a las imágenes de las secciones situadas fuera del área visible inicial. Liquid de Shopify establece el atributo y el navegador aplica el comportamiento de carga diferida.
¿La carga diferida nativa de Shopify puede afectar mi puntuación de velocidad?
Sí. Si el tema aplica loading='lazy' a las imágenes del área visible inicial, retrasa el LCP al añadir un paso IntersectionObserver innecesario. El equipo de rendimiento de Shopify observó que las tiendas que cargan su imagen LCP de forma diferida tienen un LCP mediano 1,0 segundo más lento que las que la cargan de inmediato. Los temas bien implementados utilizan section.index para evitarlo, pero no todos lo hacen correctamente.
Conclusión sobre la carga diferida nativa de Shopify
Shopify tiene carga diferida nativa, pero es una herramienta para desarrolladores de temas, no una función para toda la tienda. Si estás en un tema moderno como Dawn que implementa image_tag y section.index correctamente, las imágenes de su tema probablemente estén cargadas de forma diferida correctamente. Pero eso aún deja completamente sin abordar el contenido inyectado en aplicaciones, las imágenes de fondo CSS, los videos y, lo que es más importante, los scripts que bloquean el procesamiento.
Para la mayoría de las tiendas, la carga diferida nativa cubre entre el 30% y el 40% de la oportunidad de optimización. El resto requiere aplazamiento del guión, optimización de imagen, inserción de CSS crítico y priorización inteligente de recursos: exactamente qué Thunder Page Speed Optimizer lo hace automáticamente.
Comienza probando tu tienda: Realiza una prueba de velocidad gratuita para ver cuál es su situación y luego decida si la carga diferida nativa es suficiente o si necesita un enfoque más completo.