Carga diferida de Shopify: Imágenes, vídeos y más

¿Qué es la carga diferida?

La carga diferida es una estrategia que retrasa la carga de recursos no críticos hasta que realmente se necesitan. En lugar de descargar todas las imágenes de la página en el momento en que llega un visitante, el navegador sólo carga imágenes cuando el visitante se desplaza hacia ellas.

Piensa en la cocina de un restaurante: en lugar de preparar cada plato del menú en el momento en que abre el restaurante, cocinan cada plato cuando un cliente lo pide. ¿El resultado? Primer servicio más rápido y menos esfuerzo desperdiciado.

En una página típica de producto o colección de Shopify, es posible que tengas entre 20 y 50 imágenes. Sin carga diferida, el navegador intenta descargarlos todos simultáneamente, luchando por el ancho de banda y ralentizando las imágenes que el visitante ve primero: el banner principal, la foto del producto, los íconos de navegación.

Con carga diferida, solo el en la mitad superior de la página las imágenes se cargan inmediatamente. Todo lo que se encuentra debajo del pliegue espera hasta que el visitante se desplaza cerca de él. El resultado: representación de la página inicial más rápida, menor uso de ancho de banda y una mejor experiencia, especialmente en dispositivos móviles.

Por qué la carga diferida es importante para las tiendas Shopify

Las tiendas Shopify tienen muchas imágenes por naturaleza. Fotografías de productos, imágenes de estilos de vida, pancartas de colecciones, insignias de confianza, widgets de aplicaciones: una página de inicio típica puede tener fácilmente más de 30 imágenes con un total de entre 5 y 15 MB de datos.

Sin carga diferida, todas esas imágenes compiten por el ancho de banda en la carga inicial de la página. Esto es lo que eso significa en la práctica:

La carga diferida adecuada puede reducir el peso de la página inicial en 40–70% en páginas con muchas imágenes. Esto se traduce directamente en una primera pintura más rápida y una mejor experiencia de usuario. Sin embargo, la carga diferida es solo una pieza del rompecabezas; para obtener una imagen completa, lea nuestro guía completa de optimización.

El error número uno de carga diferida (y le está costando 1 segundo)

Aquí está la verdad contraintuitiva: el error de carga diferida más común no es no realizar la carga diferida: es una carga diferida demasiado agresiva.

Específicamente, carga diferida de tu imagen principal o elemento LCP. Según El propio equipo de rendimiento de Shopify:

¿Por qué sucede esto? Cuando se establece loading="lazy" en una imagen de la mitad superior de la página, se añade un paso innecesario:

Ese paso de detección adicional agrega entre 200 y 1000 ms de retraso a su imagen más importante. En dispositivos móviles con una ejecución de JavaScript más lenta, es aún peor.

La regla es simple:

• ✓ En la mitad superior de la página: Carga inmediata (sin el atributo loading o con loading="eager")
• ✓ Debajo del pliegue: Carga diferida (loading="lazy")
• ✗ Nunca: Carga diferida de la imagen principal, la imagen destacada del producto o cualquier candidato a LCP

Suena simple, ¿verdad? En la práctica, es complicado. "En la mitad superior de la página" es diferente en cada dispositivo, cada tamaño de pantalla y cada plantilla de página. Lo que está en la mitad superior de la página en un monitor de escritorio de 27" podría estar en la mitad inferior de la página en un iPhone SE. Hacer esto correctamente manualmente requiere un conocimiento receptivo en docenas de puntos de interrupción.

Carga diferida nativa versus JavaScript: cuál usar en 2026

Hay dos enfoques para la carga diferida de imágenes, y esta decisión es más importante de lo que la mayoría de los desarrolladores de Shopify creen.

Carga diferida nativa (loading="lazy")

Añadida a la especificación HTML en 2019, la carga diferida nativa ya es compatible con más del 96 % de los navegadores (todas las versiones modernas de Chrome, Firefox, Safari y Edge). Solo tienes que añadir loading="lazy" a un elemento <img> o <iframe>:

<img
  src="product-photo.jpg"
  loading="lazy"
  alt="Zapatillas para correr azules - vista lateral"
  width="800"
  height="600"
/>

Eso es todo. Sin biblioteca de JavaScript, sin configuración, sin aumento del tamaño del paquete. El navegador se encarga de todo.

Carga diferida con JavaScript (lazysizes, etc.)

Antes de la carga diferida nativa, el enfoque estándar era usar bibliotecas de JavaScript como lazysizes. Estas bibliotecas utilizan la API IntersectionObserver para detectar cuándo las imágenes se acercan a la ventana gráfica y luego sustituyen el valor provisional de data-src por el valor real de src.

<!-- JS lazy loading pattern -->
<img
  data-src="product-photo.jpg"
  class="lazyload"
  alt="Zapatillas para correr azules - vista lateral"
/>
<script src="lazysizes.min.js" async></script>

Esto todavía funciona, pero agrega una sobrecarga de JavaScript: generalmente entre 5 y 10 KB de secuencia de comandos adicional que debe descargarse, analizarse y ejecutarse antes de que comience cualquier carga diferida.

Comparación

Qué cargar de forma diferida (y qué NO)

No todos los recursos deben recibir el mismo trato. Aquí hay un desglose práctico de las tiendas Shopify:

✓ Carga diferida estos

✗ Nunca cargues estos de forma perezosa

Cómo implementar la carga diferida en Shopify Liquid

Si estás editando el código de tu tema manualmente, aquí te mostramos cómo implementar la carga diferida correctamente en el lenguaje de plantillas Liquid de Shopify.

Método 1: Filtro image_tag de Shopify (recomendado)

El filtro image_tag de Shopify Liquid establece automáticamente loading="lazy" en las imágenes. También gestiona los atributos adaptativos srcset y sizes para optimizar la entrega.

{{- product.featured_image | image_url: width: 800 | image_tag:
    loading: 'lazy',
    widths: '200,400,600,800',
    sizes: '(min-width: 768px) 50vw, 100vw',
    alt: product.featured_image.alt -}}

Para tu imagen de héroe/LCP, establece explícitamente la carga inmediata:

{{- section.settings.hero_image | image_url: width: 1200 | image_tag:
    loading: 'eager',
    fetchpriority: 'high',
    widths: '600,900,1200,1800',
    sizes: '100vw',
    alt: section.settings.hero_alt -}}

Método 2: HTML sin procesar con atributo de carga

Si estás escribiendo HTML sin formato (secciones personalizadas, fragmentos), agrega el atributo directamente:

<!-- Below-fold image: lazy load -->
<img
  src="{{ image | image_url: width: 600 }}"
  alt="{{ image.alt | escape }}"
  width="{{ image.width }}"
  height="{{ image.height }}"
  loading="lazy"
  decoding="async"
/>

<!-- Above-fold image: eager load -->
<img
  src="{{ image | image_url: width: 1200 }}"
  alt="{{ image.alt | escape }}"
  width="{{ image.width }}"
  height="{{ image.height }}"
  loading="eager"
  fetchpriority="high"
/>

Método 3: Carga inteligente basada en la posición de la sección

Dawn y otros temas de Shopify 2.0 usan un patrón inteligente: rastrean qué sección es la primera en la página y solo cargan imágenes con entusiasmo en esa sección.

{%- liquid
  # In the layout or page template:
  assign first_section = true
-%}

{%- for block in section.blocks -%}
  {%- if first_section -%}
    {%- assign loading_strategy = 'eager' -%}
    {%- assign fetch_priority = 'high' -%}
    {%- assign first_section = false -%}
  {%- else -%}
    {%- assign loading_strategy = 'lazy' -%}
    {%- assign fetch_priority = 'auto' -%}
  {%- endif -%}

  {{- block.settings.image | image_url: width: 800 | image_tag:
      loading: loading_strategy,
      fetchpriority: fetch_priority -}}
{%- endfor -%}

Este enfoque es mejor que la carga diferida general, pero sigue siendo imperfecto: no tiene en cuenta cuántas imágenes son visibles en la mitad superior de la página en cada sección y varía según el dispositivo.

Más allá de las imágenes: carga diferida de vídeos, iframes y secciones

Las imágenes son el objetivo obvio, pero los principios de carga diferida también se aplican a otros recursos pesados.

Vídeos incrustados (YouTube, Vimeo)

Se carga una inserción de YouTube 500–800 KB de JavaScript más la interfaz de usuario del reproductor de video, incluso si el visitante nunca presiona reproducir. Dos soluciones comunes:

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  loading="lazy"
  title="Título del vídeo"
  allow="accelerometer; autoplay; encrypted-media; gyroscope"
  allowfullscreen
></iframe>

<div class="video-facade" data-video-id="VIDEO_ID">
  <img
    src="https://i.ytimg.com/vi/VIDEO_ID/hqdefault.jpg"
    alt="Miniatura del vídeo"
    loading="lazy"
  />
  <button class="play-btn" aria-label="Reproducir vídeo">▶</button>
</div>

API de representación de secciones de Shopify

Shopify presentó el API de representación de secciones que le permite cargar secciones enteras a pedido, no solo imágenes. Esto es como una carga diferida con esteroides: en lugar de cargar solo la imagen más tarde, carga el HTML, CSS y JavaScript de toda la sección solo cuando es necesario.

Combinado con IntersectionObserver, puede crear una verdadera experiencia de "carga al desplazarse" donde las secciones debajo de la página no existen en absoluto en el HTML inicial. Esto es particularmente poderoso para:

• • Secciones de recomendación de productos
• • Revisar widgets
• • Secciones del feed de Instagram
• • Pesado widgets de aplicaciones de terceros

Scripts de aplicaciones de terceros

Aquí es donde se esconden las verdaderas mejoras de rendimiento. La mayoría de las aplicaciones de Shopify inyectan scripts que bloquean el renderizado en el <head> de la tienda. Aunque el atributo loading no permite aplicar carga diferida a un script, sí puede usar defer o async:

<!-- Blocking (bad) -->
<script src="app-widget.js"></script>

<!-- Deferred (better) -->
<script src="app-widget.js" defer></script>

<!-- Async (good for independent scripts) -->
<script src="app-widget.js" async></script>

¿El problema? No siempre se puede controlar cómo las aplicaciones inyectan sus scripts. Muchas aplicaciones codifican etiquetas de secuencias de comandos sincrónicas que no se pueden modificar sin dañar la aplicación. Esta es la razón principal por la que la optimización manual llega a un límite y por la que existe Thunder. Thunder intercepta y vuelve a secuenciar todos los scripts que se cargan automáticamente, independientemente de cómo los inserten las aplicaciones.

Cómo probar si la carga diferida está funcionando

Ha añadido loading="lazy" a sus imágenes, pero ¿cómo sabe que realmente funciona? Estas son cuatro formas de comprobarlo:

1. Pestaña Red de Chrome DevTools

2. Inspeccionar elemento

Haga clic derecho en cualquier imagen situada debajo del pliegue y seleccione Inspeccionar. Mire el elemento <img> en el panel Elementos: debería ver loading="lazy" como atributo.

3. Auditoría de PageSpeed Insights

Ejecute su página PageSpeed Insights o prueba la velocidad de tu tienda con nuestra herramienta gratuita. Si no se implementa la carga diferida, verá la sugerencia: "Aplazar imágenes fuera de pantalla" con una estimación de ahorro potencial (en KB y segundos).

4. Faro en DevTools

Chrome DevTools tiene una pestaña Lighthouse incorporada. Ejecute una auditoría de rendimiento y verifique dos diagnósticos:

• • "Aplazar imágenes fuera de pantalla" : carga diferida no implementada o incompleta
• • "La imagen más grande de Contentful Paint se cargó de forma diferida" : te da pereza cargar tu LCP (¡soluciona esto inmediatamente!)

Thunder versus carga diferida manual

Preguntas frecuentes

Recursos relacionados