Carga diferida versus carga inmediata en Shopify: Repara tu imagen de héroe LCP

Comparación rápida: carga diferida versus carga inmediata

Antes de profundizar, aquí está la diferencia fundamental. Ambas estrategias controlan cuando el navegador descarga un recurso, pero sus objetivos son opuestos.

La tienda Shopify ideal utiliza ambas estrategias : carga inmediata para el contenido que los visitantes ven primero, carga diferida para todo lo que verán más tarde. El desafío es saber dónde trazar la línea, especialmente cuando "en la mitad superior de la página" difiere entre dispositivos. Prueba la velocidad de tu tienda para ver cómo funciona su estrategia de carga actual.

Cómo funciona cada estrategia de carga internamente

Carga inmediata: la ruta predeterminada

La carga inmediata es lo que hacen los navegadores de forma predeterminada. Cuando el analizador HTML encuentra una etiqueta <img> sin el atributo loading , inmediatamente pone en cola la imagen para su descarga:

Esto es rápido y predecible para imágenes de arriba. ¿La desventaja? Si tiene 40 imágenes en una página de colección, el navegador intenta descargar las 40 simultáneamente. Tu imagen de héroe, la que determina tu Puntuación LCP : tiene que compartir ancho de banda con otras 39 imágenes a las que el visitante no se ha desplazado.

Carga diferida: diferida hasta que sea necesario

Cuando agregas loading="lazy" a una imagen, el navegador la registra pero no lo descarga hasta que IntersectionObserver detecte que la imagen se acerca a la ventana gráfica:

Este paso adicional es exactamente la razón por la cual la carga diferida de su imagen LCP es tan costosa: está agregando una espera innecesaria para su elemento visual más importante. Pero para las imágenes de la mitad inferior de la página, este aplazamiento es puro beneficio: menos competencia en ancho de banda y renderizado inicial más rápido.

Cuándo usar la carga inmediata en Shopify

Cargue de inmediato cualquier elemento que aparezca en la ventana gráfica inicial: lo que ve el visitante antes de desplazarse. En Shopify, esto normalmente significa:

Cuándo utilizar la carga diferida en Shopify

Carga diferida cualquier cosa que el visitante no vea hasta que se desplace. En la mayoría de las tiendas Shopify, esa es la mayoría de las imágenes:

Para obtener más detalles sobre qué cargar de forma diferida y la implementación técnica, consulte nuestro artículo completo. Guía de carga diferida de Shopify.

Estrategia de carga por tipo de página de Shopify

Las diferentes plantillas de página tienen diferentes elementos LCP y estructuras de contenido. Aquí está la estrategia de carga óptima para cada uno:

Cómo implementar ambas estrategias de carga en Shopify Liquid

Aquí está el código práctico de Liquid para implementar la estrategia de carga correcta en su tema. Esto sigue Carga diferida nativa de Shopify mejores prácticas.

Básico: Carga basada en índice de sección

{%- liquid
  if section.index > 2
    assign loading = "lazy"
  else
    assign loading = "eager"
  endif
-%}

{{ section.settings.image | image_url: width: 1200 | image_tag: loading: loading }}

Avanzado: Imagen LCP con prioridad de recuperación

{%- if section.index == 1 -%}
  {%- comment -%} Hero section — LCP image, maximum priority {%- endcomment -%}
  {{ section.settings.image | image_url: width: 1400 | image_tag: loading: "eager", fetchpriority: "high", decoding: "sync" }}
{%- elsif section.index == 2 -%}
  {%- comment -%} Second section — eager but normal priority {%- endcomment -%}
  {{ section.settings.image | image_url: width: 1200 | image_tag: loading: "eager" }}
{%- else -%}
  {%- comment -%} Below fold — lazy load {%- endcomment -%}
  {{ section.settings.image | image_url: width: 1200 | image_tag: loading: "lazy" }}
{%- endif -%}

Cuadrícula de productos: primera fila con carga inmediata y el resto con carga diferida

{%- for product in collection.products -%}
  {%- if forloop.index <= 4 and section.index <= 2 -%}
    {%- assign img_loading = "eager" -%}
  {%- else -%}
    {%- assign img_loading = "lazy" -%}
  {%- endif -%}

  {{ product.featured_image | image_url: width: 600 | image_tag: loading: img_loading, alt: product.title }}
{%- endfor -%}

fetchpriority: la tercera estrategia de carga que debes conocer

Además de la carga inmediata y diferida, existe un tercer control: fetchpriority. Este atributo no determina cuándo se carga un recurso, sino qué prioridad tiene frente a otros recursos:

La combinación de loading="eager" + fetchpriority="high" en su imagen LCP es la estrategia de carga más agresiva disponible. Le dice al navegador: "Descarga esto inmediatamente y priorízalo sobre todo lo demás". Para Optimización LCP, esta combinación normalmente reduce entre 100 y 300 ms el tiempo de LCP.

Solución: carga inmediata de la imagen principal de Shopify en theme.liquid

Uno de los problemas de velocidad de Shopify más comunes en 2026: la imagen de tu banner principal se carga de forma diferida de forma predeterminada, lo que destruye tu puntuación LCP. Muchos temas, incluidos Dawn — no configuran fetchpriority="high" en la imagen del héroe, dejando el rendimiento sobre la mesa.

Aquí tienes la solución exacta para tu theme.liquid o archivo de sección de héroe:

{%- comment -%} Fix: Force eager loading + high priority for hero banner image {%- endcomment -%}
{%- assign hero_image = section.settings.image -%}

{%- if hero_image != blank -%}
  {{ hero_image | image_url: width: 1400 | image_tag:
    loading: "eager",
    fetchpriority: "high",
    decoding: "sync",
    alt: hero_image.alt | default: section.settings.heading,
    class: "hero-banner__image"
  }}
{%- endif -%}

Después de realizar este cambio, ejecutar una prueba de velocidad para verificar la mejora del LCP. Debería ver una mejora de 100 a 500 ms en el tiempo de LCP, dependiendo del tamaño de la imagen principal y del tiempo de respuesta del servidor. Para tiendas donde la edición de código no es una opción, Thunder maneja esto automáticamente : detecta su elemento LCP y aplica los atributos de carga óptimos sin tocar los archivos de su tema.

5 errores en la estrategia de carga de Shopify que acaban con tu puntuación de velocidad

Vemos estos errores en cientos de tiendas Shopify. Cada uno te cuesta puntos PageSpeed reales:

Preguntas frecuentes

La estrategia de carga adecuada marca una diferencia real

La carga diferida versus la carga inmediata no es una elección binaria: se trata de aplicar la estrategia correcta al elemento correcto. Cargue de inmediato su imagen LCP con alta prioridad, cargue de inmediato el resto del contenido de la página superior y cargue de forma diferida todo lo que se encuentra debajo de la página. Esa es la fórmula que le brinda el renderizado inicial más rápido posible sin desperdiciar ancho de banda.

Pero recuerde: la estrategia de carga de imágenes es solo una parte de la ecuación. Optimizar sus imágenes de Shopify (formato, compresión y tamaño) es igual de importante. Además, los scripts de terceros procedentes de aplicaciones suelen perjudicar más el rendimiento que las imágenes sin optimizar. Un enfoque integral que gestione conjuntamente las imágenes, los scripts, el CSS y las fuentes ofrece los mejores resultados.

Siguiente paso: Realiza tu prueba de velocidad gratuita para ver cómo su estrategia de carga actual afecta el rendimiento, luego explore nuestra guía completa de optimización de velocidad de Shopify para ver la imagen completa.