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

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

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

Los usos ideales de la tienda Shopify ambos : carga entusiasta 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 ansiosa: la ruta predeterminada

La carga ansiosa es lo que hacen los navegadores de forma predeterminada. Cuando el analizador HTML encuentra un <img> etiqueta sin cargando , 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 cargando="perezoso" 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 ansiosa en Shopify

Cargue con entusiasmo cualquier elemento que aparezca en la ventana gráfica inicial: lo que ve el visitante antes desplazándose. 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 ansiosa, descanso perezoso

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

Más allá de la pereza y el entusiasmo, hay una tercera palanca: prioridad de búsqueda. Este atributo no controla cuando se carga un recurso pero que importante es relativo a otros recursos:

La combinación de cargando="ansioso" + fetchpriority="alta" 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: Imagen de banner de Shopify Hero cargando ansiosa 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 Amanecer — no configurar fetchpriority="alta" en la imagen del héroe, dejando el rendimiento sobre la mesa.

Aquí tienes la solución exacta para tu tema.liquido 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 entusiasta no es una elección binaria: se trata de aplicar la estrategia correcta al elemento correcto. Cargue con entusiasmo su imagen LCP con alta prioridad, cargue con entusiasmo 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 recuerda: la estrategia de carga de imágenes es sólo una parte de la ecuación. correctamente optimizando tus imágenes de Shopify (formato, compresión, tamaño) es igualmente importante. y third-party scripts from apps a menudo causan más daño al rendimiento que las imágenes no optimizadas. Un enfoque holístico (manejar imágenes, scripts, CSS y fuentes juntos) 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.