¿Shopify carga imágenes automáticamente de forma diferida?

Parcialmente. El tema Dawn de Shopify y la mayoría de los temas modernos configuran load='lazy' en las imágenes debajo de la página usando el filtro Liquid image_tag. Sin embargo, esto sólo funciona si el desarrollador del tema lo implementó correctamente. Muchos temas antiguos y temas personalizados no se cargan de forma diferida en absoluto o, peor aún, cargan todo de forma diferida, incluida la imagen principal, lo que perjudica a LCP. Thunder Page Speed Optimizer maneja esto automáticamente, aplicando una carga diferida inteligente a las imágenes de la parte inferior y al mismo tiempo garantiza que las imágenes de la parte superior se carguen con entusiasmo.

¿La carga diferida puede afectar el rendimiento de mi tienda Shopify?

Sí, si se aplica incorrectamente. La carga diferida de su imagen principal o elemento LCP agrega una demora innecesaria porque el navegador espera a que JavaScript detecte que la imagen está en la ventana gráfica antes de cargarla. El propio equipo de rendimiento de Shopify descubrió que las tiendas que cargan su imagen LCP de forma diferida tienen un LCP promedio 1,0 segundo más lento que aquellas que la cargan con entusiasmo. La regla es simple: carga ansiosa en la mitad superior de la página, carga diferida debajo. Thunder aplica esta regla automáticamente.

¿Cuál es la diferencia entre la carga diferida nativa y la carga diferida de JavaScript?

La carga diferida nativa utiliza el atributo load='lazy' integrado del navegador; no se requiere JavaScript adicional. La carga diferida de JavaScript utiliza bibliotecas como lazysizes con la API IntersectionObserver. Ahora se recomienda la carga diferida nativa porque es más liviana (sin sobrecarga de JS), compatible con más del 96% de los navegadores y maneja la degradación elegante automáticamente. La única ventaja que todavía tiene la carga diferida basada en JS es un control más granular sobre los umbrales de carga, lo que rara vez importa para la mayoría de las tiendas Shopify.

¿Debo cargar de forma diferida los scripts de la aplicación Shopify?

Absolutamente. Los scripts de aplicaciones de terceros son uno de los mayores asesinos de velocidad en Shopify. Si bien no puedes cargar secuencias de comandos de forma diferida de la misma manera que las imágenes, puedes posponerlas: cargarlas después de que se procese el contenido crítico. Técnicamente, esto es un aplazamiento de secuencias de comandos en lugar de una carga diferida, pero el concepto es el mismo: retrasar recursos no críticos. Thunder hace esto automáticamente para todos los scripts de aplicaciones, razón por la cual la mayoría de las tiendas ven mejoras en la puntuación de velocidad de entre 20 y 30 puntos.

¿Cómo verifico si la carga diferida funciona en mi tienda Shopify?

Abra su tienda en Chrome, haga clic derecho en una imagen debajo de la página y seleccione Inspeccionar. Busque cargando='lazy' en la etiqueta img. También puede abrir Chrome DevTools → pestaña Red → filtrar por 'Img' → desplazarse hacia abajo en la página y observar cómo aparecen nuevas solicitudes de imágenes a medida que se desplaza. Si todas las imágenes se cargan a la vez al cargar la página, la carga diferida no funciona. Para una auditoría completa, ejecute su tienda a través de PageSpeed Insights y verifique la sugerencia "Aplazar imágenes fuera de la pantalla".

¿La carga diferida afecta el SEO en Shopify?

When implemented correctly, lazy loading has zero negative SEO impact. Googlebot renders JavaScript and can see lazy-loaded images. The key is ensuring your images have proper alt text and are in the HTML (not dynamically injected). Native lazy loading with loading='lazy' is fully supported by Google's crawler. The SEO risk comes from broken implementations where images are hidden behind JavaScript that Googlebot can't execute — but this isn't a concern with native lazy loading or Thunder's implementation.

Guía de carga diferida de Shopify: imágenes, vídeos y guiones (2026)

¿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.

Cómo funciona técnicamente: El navegador utiliza el API IntersectionObserver para observar cuando un elemento está a punto de ingresar a la ventana gráfica. Cuando detecta que la imagen está cerca, activa la descarga. Con carga diferida nativa (cargando="perezoso"), this is all handled by the browser — zero JavaScript required from your end.

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:

→

LCP más lento (pintura con contenido más grande): La imagen principal, el elemento visual más importante, se carga más lentamente porque comparte ancho de banda con otras 30 imágenes a las que el visitante ni siquiera se ha desplazado todavía.

→

Tasas de rebote más altas en dispositivos móviles: Las conexiones móviles son más lentas y variables. Cargar 10 MB de imágenes en una conexión 4G puede tardar entre 8 y 12 segundos. Si su tienda no procesa rápidamente, los visitantes rebotan — y no regresan.

→

Ancho de banda desperdiciado: La mayoría de los visitantes no se desplazan hasta el final de la página. Si el 60% de tus imágenes están en la mitad inferior de la página y el 70% de los visitantes se van antes de desplazarse, estás descargando megabytes de datos que nadie ve.

→

Elementos vitales web centrales inferiores: Google utiliza Core Web Vitals como señal de clasificación. La carga excesiva de imágenes afecta directamente al LCP y puede provocar cambios de diseño (CLS) si no se establecen las dimensiones de la imagen.

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:

⚠️ El asesino LCP

"Los sitios de Shopify que cargan de forma diferida su imagen LCP tienen un LCP medio que es 1,0 segundo más lento que los ansiosos y cargados."

— Equipo de rendimiento de Shopify, performance.shopify.com

¿Por qué sucede esto? cuando estableces cargando="perezoso" en una imagen de la mitad superior de la página, agrega un paso innecesario:

Sin carga diferida (correcto):

El navegador lee HTML → Encuentra la imagen → Comienza a descargar inmediatamente

Con carga diferida en LCP (incorrecto):

El navegador lee HTML → Encuentra la imagen → Marca como diferida → Espera a IntersectionObserver → Detecta que la imagen está en la ventana gráfica → Entonces comienza a descargar

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 ansiosa (no atributo cargando , o cargando="ansioso")
✓ Debajo del pliegue: Carga diferida (cargando="perezoso")
✗ 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.

⚡

Omita el trabajo manual: Thunder maneja la carga diferida automáticamente

Se aplica el Optimizador de velocidad de página Thunder estrategias de carga inteligentes en toda tu tienda. Identifica automáticamente su imagen LCP y la carga con entusiasmo mientras carga lentamente todo lo que se encuentra debajo de la página: sin cambios de código, sin edición de temas, sin adivinar puntos de interrupción.

Pero Thunder va más allá de la carga diferida básica. También:

✦ Pospone secuencias de comandos de aplicaciones que bloquean el procesamiento : el mayor asesino de velocidad que la carga diferida por sí sola no puede solucionar
✦ CSS crítico integrado para que tu página se muestre al instante
✦ Precarga fuentes para eliminar el destello de texto invisible (FOIT)
✦ Monitores diarios para que las optimizaciones sigan siendo efectivas a medida que agrega productos y aplicaciones

La mayoría de las tiendas ven un Mejora de puntuación de velocidad de más de 27 puntos a los pocos minutos de la instalación. No se necesita desarrollador. Consultar planes para encontrar la opción adecuada para su tienda.

Instalar Thunder — Prueba gratuita →

¿Ya tienes Thunder instalado? Puede omitir las secciones de implementación manual a continuación: Thunder maneja todo esto automáticamente. Sigue leyendo si quieres entender lo que sucede bajo el capó.

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 (`cargando="perezoso"`)

Agregada a la especificación HTML en 2019, la carga diferida nativa ahora es compatible con 96%+ de los navegadores (todas las versiones modernas de Chrome, Firefox, Safari y Edge). simplemente agregas cargando="perezoso" a tu <img> o Elementos</code> : </p> <div class="bg-gray-900 rounded-xl p-5 mb-4"> <pre class="text-sm text-gray-100 overflow-x-auto"><code><img src="product-photo.jpg" loading="lazy" alt="Zapatillas para correr azules - vista lateral" width="800" height="600" /></code></pre> </div> <p class="text-gray-600 leading-relaxed mb-4"> Eso es todo. Sin biblioteca de JavaScript, sin configuración, sin aumento del tamaño del paquete. El navegador se encarga de todo. </p> <h3 class="text-xl font-bold mb-4 mt-8">Carga diferida de JavaScript (tamaños diferidos, etc.)</h3> <p class="text-gray-600 leading-relaxed mb-4"> Antes de la carga diferida nativa, el enfoque estándar era usar bibliotecas de JavaScript como <a href="https://github.com/aFarkas/lazysizes" target="_blank" rel="noopener noreferrer" class="text-amber-600 hover:text-amber-700">tamaños perezosos</a>. Estas bibliotecas utilizan la API IntersectionObserver para detectar cuándo las imágenes se acercan a la ventana gráfica y luego intercambian un marcador de posición. <code>fuente de datos</code> con lo real <code>origen</code>. </p> <div class="bg-gray-900 rounded-xl p-5 mb-4"> <pre class="text-sm text-gray-100 overflow-x-auto"><code> <img data-src="product-photo.jpg" class="lazyload" alt="Zapatillas para correr azules - vista lateral" /> <script src="lazysizes.min.js" async></script></code></pre> </div> <p class="text-gray-600 leading-relaxed mb-6"> 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. </p> <h3 class="text-xl font-bold mb-4">Comparación</h3> <div class="overflow-x-auto mb-6"> <table class="w-full text-sm border-collapse"> <thead> <tr class="bg-gray-50"> <th class="text-left p-3 border border-gray-200 font-semibold"></th> <th class="text-left p-3 border border-gray-200 font-semibold">Nativo (<code>cargando="perezoso"</code>)</th> <th class="text-left p-3 border border-gray-200 font-semibold">JavaScript (tamaños diferidos)</th> </tr> </thead> <tbody> <tr> <td class="p-3 border border-gray-200 font-medium">JS sobrecarga</td> <td class="p-3 border border-gray-200 text-green-700">Cero</td> <td class="p-3 border border-gray-200 text-red-700">5–10 KB</td> </tr> <tr class="bg-gray-50"> <td class="p-3 border border-gray-200 font-medium">Compatibilidad con navegador</td> <td class="p-3 border border-gray-200">96%+</td> <td class="p-3 border border-gray-200">100% (polirelleno)</td> </tr> <tr> <td class="p-3 border border-gray-200 font-medium">Complejidad de configuración</td> <td class="p-3 border border-gray-200 text-green-700">Un atributo</td> <td class="p-3 border border-gray-200 text-red-700">Biblioteca + nombres de clases</td> </tr> <tr class="bg-gray-50"> <td class="p-3 border border-gray-200 font-medium">Control de umbral</td> <td class="p-3 border border-gray-200">El navegador decide</td> <td class="p-3 border border-gray-200 text-green-700">Personalizable</td> </tr> <tr> <td class="p-3 border border-gray-200 font-medium">Seguridad SEO</td> <td class="p-3 border border-gray-200 text-green-700">Completo (imágenes en HTML)</td> <td class="p-3 border border-gray-200">Depende de la implementación</td> </tr> <tr class="bg-gray-50"> <td class="p-3 border border-gray-200 font-medium">Repliegue</td> <td class="p-3 border border-gray-200 text-green-700">Cargas ansiosas (elegantes)</td> <td class="p-3 border border-gray-200 text-red-700">Es posible que las imágenes no se carguen</td> </tr> <tr> <td class="p-3 border border-gray-200 font-medium">Recomendación (2026)</td> <td class="p-3 border border-gray-200 text-green-700 font-bold">✓ Usa esto</td> <td class="p-3 border border-gray-200 text-gray-400">Legado: eliminación gradual</td> </tr> </tbody> </table> </div> <div class="bg-blue-50 border border-blue-200 rounded-xl p-5"> <p class="text-sm text-gray-700"> <strong>Conclusión:</strong> En 2026, utilice carga diferida nativa. El 4% de los navegadores que no lo soportan simplemente cargarán las imágenes con impaciencia, lo cual está perfectamente bien. Ya no hay razón para agregar una biblioteca JavaScript para esto. Si su tema todavía usa tamaños diferidos, es hora de migrar. </p> </div> </section>  <section id="what-to-lazy-load" class="mb-16"> <h2 class="text-2xl md:text-3xl font-bold mb-6">Qué cargar de forma diferida (y qué NO)</h2> <p class="text-gray-600 leading-relaxed mb-4"> No todos los recursos deben recibir el mismo trato. Aquí hay un desglose práctico de las tiendas Shopify: </p> <h3 class="text-xl font-bold mb-4 mt-8 text-green-700">✓ Carga diferida estos</h3> <div class="space-y-3 mb-8"> <div class="flex gap-3 items-start"> <span class="text-green-600 font-bold mt-0.5 shrink-0">✓</span> <p class="text-gray-600"><strong>Imágenes de productos en cuadrículas de colección</strong> : debajo de la primera fila, carga de forma diferida todas las miniaturas. Una página de colección con 48 productos no necesita las 48 imágenes en la carga inicial.</p> </div> <div class="flex gap-3 items-start"> <span class="text-green-600 font-bold mt-0.5 shrink-0">✓</span> <p class="text-gray-600"><strong>Secciones debajo del pliegue</strong> : testimonios, feeds de Instagram, carruseles "También te pueden gustar", vistas previas de publicaciones de blogs: cualquier cosa que un visitante necesite desplazarse para ver.</p> </div> <div class="flex gap-3 items-start"> <span class="text-green-600 font-bold mt-0.5 shrink-0">✓</span> <p class="text-gray-600"><strong>Incrustaciones de YouTube/Vimeo</strong> : los iframes son caros. Una sola inserción de YouTube carga más de 500 KB de scripts. uso <code>cargando="perezoso"</code> en iframes o reemplácelo con una miniatura estática que cargue el iframe al hacer clic (patrón de fachada).</p> </div> <div class="flex gap-3 items-start"> <span class="text-green-600 font-bold mt-0.5 shrink-0">✓</span> <p class="text-gray-600"><strong>Imágenes de productos adicionales</strong> : en las páginas de productos, las imágenes de la galería más allá de la foto destacada se pueden cargar de forma diferida.</p> </div> <div class="flex gap-3 items-start"> <span class="text-green-600 font-bold mt-0.5 shrink-0">✓</span> <p class="text-gray-600"><strong>Contenido del pie de página</strong> : insignias de confianza, íconos de pago, imágenes de la sección del boletín: todo en la parte inferior de cada página.</p> </div> </div> <h3 class="text-xl font-bold mb-4 text-red-700">✗ Nunca cargues estos de forma perezosa</h3> <div class="space-y-3 mb-6"> <div class="flex gap-3 items-start"> <span class="text-red-600 font-bold mt-0.5 shrink-0">✗</span> <p class="text-gray-600"><strong>Imágenes de héroe/banner</strong> : este es casi siempre su elemento LCP. La carga diferida cuesta ~1 segundo. Carga siempre con ganas. Considere agregar <code><enlace rel="precarga"></code> para mayor velocidad.</p> </div> <div class="flex gap-3 items-start"> <span class="text-red-600 font-bold mt-0.5 shrink-0">✗</span> <p class="text-gray-600"><strong>Imagen destacada del producto</strong> — La foto principal del producto en un PDP es el candidato a LCP. Cárgalo inmediatamente.</p> </div> <div class="flex gap-3 items-start"> <span class="text-red-600 font-bold mt-0.5 shrink-0">✗</span> <p class="text-gray-600"><strong>Logotipo e imágenes de navegación</strong> : son pequeños, están por encima del pliegue y son fundamentales para la primera pintura. No los retrases.</p> </div> <div class="flex gap-3 items-start"> <span class="text-red-600 font-bold mt-0.5 shrink-0">✗</span> <p class="text-gray-600"><strong>Imágenes de fondo configuradas mediante CSS</strong> — <code>cargando="perezoso"</code> solo funciona en Etiquetas <code><img></code> y <code><iframe> Elementos</code> . Las imágenes de fondo CSS requieren un enfoque diferente (IntersectionObserver para alternar una clase).</p> </div> </div> <div class="bg-amber-50 border border-amber-200 rounded-xl p-5"> <p class="text-sm text-gray-700"> <strong>Consejo profesional:</strong> ¿No estás seguro de cuál es tu elemento LCP? Ejecute su página a través <a href="https://pagespeed.web.dev/" target="_blank" rel="noopener noreferrer" class="text-amber-600 hover:text-amber-700">PageSpeed Insights</a> y busque el diagnóstico "Elemento de pintura con contenido más grande". Esa es la imagen que nunca debes cargar de forma diferida. </p> </div> </section>  <section id="implementation" class="mb-16"> <h2 class="text-2xl md:text-3xl font-bold mb-6">Cómo implementar la carga diferida en Shopify Liquid</h2> <p class="text-gray-600 leading-relaxed mb-4"> 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. </p> <h3 class="text-xl font-bold mb-4 mt-8">Método 1: Filtro image_tag de Shopify (recomendado)</h3> <p class="text-gray-600 leading-relaxed mb-4"> Líquido de Shopify El filtro <code>etiqueta_imagen El filtro</code> se establece automáticamente <code>cargando="perezoso"</code> en imágenes. También maneja responsivo <code>conjunto de origen</code> y <code>tamaños</code> atributos para una entrega óptima. </p> <div class="bg-gray-900 rounded-xl p-5 mb-4"> <pre class="text-sm text-gray-100 overflow-x-auto"><code>{{- 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 -}}</code></pre> </div> <p class="text-gray-600 leading-relaxed mb-4"> Para tu imagen de héroe/LCP, establece explícitamente la carga inmediata: </p> <div class="bg-gray-900 rounded-xl p-5 mb-4"> <pre class="text-sm text-gray-100 overflow-x-auto"><code>{{- 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 -}}</code></pre> </div> <div class="bg-blue-50 border border-blue-200 rounded-xl p-5 mb-6"> <p class="text-sm text-gray-700"> <strong>Detalle clave:</strong> Aviso <code>prioridad de búsqueda: 'alta'</code> en la imagen del héroe. Esto le indica al navegador que priorice la descarga de esta imagen sobre otros recursos. Combinado con una carga rápida, es la forma más rápida de renderizar su imagen LCP. Más información sobre <a href="/es/blog/shopify-lcp-optimization/" class="text-amber-600 hover:text-amber-700">Optimización de LCP en Shopify</a>. </p> </div> <h3 class="text-xl font-bold mb-4 mt-8">Método 2: HTML sin procesar con atributo de carga</h3> <p class="text-gray-600 leading-relaxed mb-4"> Si estás escribiendo HTML sin formato (secciones personalizadas, fragmentos), agrega el atributo directamente: </p> <div class="bg-gray-900 rounded-xl p-5 mb-4"> <pre class="text-sm text-gray-100 overflow-x-auto"><code> <img src="{{ image | image_url: width: 600 }}" alt="{{ image.alt | escape }}" width="{{ image.width }}" height="{{ image.height }}" loading="lazy" decoding="async" />  <img src="{{ image | image_url: width: 1200 }}" alt="{{ image.alt | escape }}" width="{{ image.width }}" height="{{ image.height }}" loading="eager" fetchpriority="high" /></code></pre> </div> <div class="bg-amber-50 border border-amber-200 rounded-xl p-5 mb-6"> <p class="text-sm text-gray-700"> <strong>¡Establezca siempre el ancho y el alto!</strong> Sin dimensiones explícitas, las imágenes cargadas de forma diferida causan <a href="/es/blog/shopify-core-web-vitals-guide/" class="text-amber-600 hover:text-amber-700">cambio de diseño (CLS)</a> cuando se cargan: la página salta a medida que la imagen empuja el contenido hacia abajo. Establezca el ancho/alto en HTML o use CSS <code>relación de aspecto Propiedad</code> para reservar espacio. </p> </div> <h3 class="text-xl font-bold mb-4 mt-8">Método 3: Carga inteligente basada en la posición de la sección</h3> <p class="text-gray-600 leading-relaxed mb-4"> 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. </p> <div class="bg-gray-900 rounded-xl p-5 mb-4"> <pre class="text-sm text-gray-100 overflow-x-auto"><code>{%- 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 -%}</code></pre> </div> <p class="text-gray-600 leading-relaxed mb-4"> 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. </p> <div class="bg-gray-50 border border-gray-200 rounded-xl p-5"> <p class="text-sm text-gray-600"> <strong>El enfoque manual se vuelve complejo rápidamente.</strong> Entre puntos de interrupción responsivos, secciones dinámicas y contenido insertado en aplicaciones, lograr una carga diferida en cada plantilla de página requiere horas de desarrollo de temas, con mantenimiento continuo cada vez que cambia su diseño. Esto es exactamente lo que Thunder automatiza. <a href={thunderInstallUrl} class="text-amber-600 hover:text-amber-700 font-medium">Pruébalo gratis →</a> </p> </div> </section>  <section id="beyond-images" class="mb-16"> <h2 class="text-2xl md:text-3xl font-bold mb-6">Más allá de las imágenes: carga diferida de vídeos, iframes y secciones</h2> <p class="text-gray-600 leading-relaxed mb-4"> Las imágenes son el objetivo obvio, pero los principios de carga diferida también se aplican a otros recursos pesados. </p> <h3 class="text-xl font-bold mb-4 mt-8">Vídeos incrustados (YouTube, Vimeo)</h3> <p class="text-gray-600 leading-relaxed mb-4"> Se carga una inserción de YouTube <strong>500–800 KB de JavaScript</strong> más la interfaz de usuario del reproductor de video, incluso si el visitante nunca presiona reproducir. Dos soluciones comunes: </p> <div class="space-y-4 mb-6"> <div class="bg-gray-50 rounded-xl p-5"> <p class="text-sm text-gray-700 mb-2"><strong>Opción A: iframe diferido nativo</strong></p> <div class="bg-gray-900 rounded-lg p-4"> <pre class="text-xs text-gray-100 overflow-x-auto"><code><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></code></pre> </div> </div> <div class="bg-gray-50 rounded-xl p-5"> <p class="text-sm text-gray-700 mb-2"><strong>Opción B: Patrón de fachada (mejor)</strong></p> <p class="text-sm text-gray-600 mb-2">Muestra una miniatura estática con un botón de reproducción. Cargue el iframe completo solo cuando haga clic en él. Esto ahorra más de 500 KB a los visitantes que nunca reproducen el vídeo.</p> <div class="bg-gray-900 rounded-lg p-4"> <pre class="text-xs text-gray-100 overflow-x-auto"><code><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></code></pre> </div> </div> </div> <h3 class="text-xl font-bold mb-4 mt-8">API de representación de secciones de Shopify</h3> <p class="text-gray-600 leading-relaxed mb-4"> Shopify presentó el <strong>API de representación de secciones</strong> 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. </p> <p class="text-gray-600 leading-relaxed mb-4"> 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: </p> <ul class="space-y-2 text-gray-600 mb-6 ml-4"> <li class="flex gap-2"><span class="text-amber-500">•</span> Secciones de recomendación de productos</li> <li class="flex gap-2"><span class="text-amber-500">•</span> Revisar widgets</li> <li class="flex gap-2"><span class="text-amber-500">•</span> Secciones del feed de Instagram</li> <li class="flex gap-2"><span class="text-amber-500">•</span> Pesado <a href="/es/blog/shopify-third-party-scripts/" class="text-amber-600 hover:text-amber-700">widgets de aplicaciones de terceros</a></li> </ul> <h3 class="text-xl font-bold mb-4 mt-8">Scripts de aplicaciones de terceros</h3> <p class="text-gray-600 leading-relaxed mb-4"> Aquí es donde se esconden las verdaderas victorias en el rendimiento. La mayoría de las aplicaciones de Shopify inyectan <a href="/es/blog/shopify-render-blocking-resources/" class="text-amber-600 hover:text-amber-700">scripts de bloqueo de renderizado</a> en la de tu tienda <code><head></code>. Si bien no se puede "cargar de forma diferida" directamente un script con el <code>cargando</code> atributo, puedes <strong>aplazar</strong> o <strong>asíncrono</strong> ellos: </p> <div class="bg-gray-900 rounded-xl p-5 mb-4"> <pre class="text-sm text-gray-100 overflow-x-auto"><code> <script src="app-widget.js"></script>  <script src="app-widget.js" defer></script>  <script src="app-widget.js" async></script></code></pre> </div> <p class="text-gray-600 leading-relaxed mb-4"> ¿El problema? <strong>No siempre se puede controlar cómo las aplicaciones inyectan sus scripts.</strong> 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. </p> </section>  <section id="testing" class="mb-16"> <h2 class="text-2xl md:text-3xl font-bold mb-6">Cómo probar si la carga diferida está funcionando</h2> <p class="text-gray-600 leading-relaxed mb-4"> Has añadido <code>cargando="perezoso"</code> a tus imágenes, pero ¿cómo sabes que realmente está funcionando? Aquí hay cuatro formas de verificar: </p> <h3 class="text-xl font-bold mb-4 mt-8">1. Pestaña Red de Chrome DevTools</h3> <div class="space-y-2 text-gray-600 mb-6"> <p>El método más confiable:</p> <ol class="list-decimal ml-6 space-y-2"> <li>Abre tu tienda en Chrome → Haz clic derecho → <strong>Inspeccionar</strong> → <strong>Red</strong> </li> <li>Filtrar por <strong>Imagen</strong> (tipo de imagen)</li> <li>Actualizar completamente la página (<code>Cmd+Mayús+R</code> / <code>Ctrl+Mayús+R</code>)</li> <li>Tenga en cuenta cuántas imágenes se cargan inicialmente (este es el recuento de cargas ansiosas)</li> <li>Ahora desplácese hacia abajo lentamente y observe cómo aparecen nuevas solicitudes de imágenes.</li> </ol> <p class="mt-2">Si todas las imágenes se cargan en la página inicial, independientemente de la posición de desplazamiento, la carga diferida no funciona. Consulte nuestra guía dedicada sobre <a href="/es/blog/shopify-lazy-loading-not-working/" class="text-amber-600 hover:text-amber-700">la carga diferida no funciona</a> para correcciones paso a paso.</p> </div> <h3 class="text-xl font-bold mb-4 mt-8">2. Inspeccionar elemento</h3> <p class="text-gray-600 leading-relaxed mb-4"> Haga clic derecho en cualquier imagen del pliegue inferior → <strong>Inspeccionar</strong>. Mira el <code><img></code> en el panel Elementos. deberías ver <code>cargando="perezoso"</code> como atributo. </p> <h3 class="text-xl font-bold mb-4 mt-8">3. Auditoría de PageSpeed Insights</h3> <p class="text-gray-600 leading-relaxed mb-4"> Ejecute su página <a href="https://pagespeed.web.dev/" target="_blank" rel="noopener noreferrer" class="text-amber-600 hover:text-amber-700">PageSpeed Insights</a> o <a href="/tools/speed-test/" class="text-amber-600 hover:text-amber-700">prueba la velocidad de tu tienda</a> con nuestra herramienta gratuita. Si no se implementa la carga diferida, verá la sugerencia: <strong>"Aplazar imágenes fuera de pantalla"</strong> con una estimación de ahorro potencial (en KB y segundos). </p> <h3 class="text-xl font-bold mb-4 mt-8">4. Faro en DevTools</h3> <p class="text-gray-600 leading-relaxed mb-4"> Chrome DevTools tiene una pestaña Lighthouse incorporada. Ejecute una auditoría de rendimiento y verifique dos diagnósticos: </p> <ul class="space-y-2 text-gray-600 mb-4 ml-4"> <li class="flex gap-2"><span class="text-amber-500">•</span> <strong>"Aplazar imágenes fuera de pantalla"</strong> : carga diferida no implementada o incompleta</li> <li class="flex gap-2"><span class="text-amber-500">•</span> <strong>"La imagen más grande de Contentful Paint se cargó de forma diferida"</strong> : te da pereza cargar tu LCP (¡soluciona esto inmediatamente!)</li> </ul> <div class="bg-red-50 border border-red-200 rounded-xl p-5"> <p class="text-sm text-gray-700"> <strong>Esté atento a:</strong> La advertencia del faro <em>"La imagen más grande de Contentful Paint se cargó de forma diferida"</em> es el diagnóstico más crítico. Si ve esto, su imagen LCP tiene <code>cargando="perezoso"</code> y te está costando ~1 segundo. Cambiarlo a <code>cargando="ansioso"</code> con <code>fetchpriority="alta"</code> inmediatamente. </p> </div> </section>  <section class="mb-16"> <h2 class="text-2xl md:text-3xl font-bold mb-6">Trueno versus carga diferida manual</h2> <div class="overflow-x-auto mb-6"> <table class="w-full text-sm border-collapse"> <thead> <tr class="bg-gray-50"> <th class="text-left p-3 border border-gray-200 font-semibold"></th> <th class="text-left p-3 border border-gray-200 font-semibold">⚡ Trueno</th> <th class="text-left p-3 border border-gray-200 font-semibold">Implementación manual</th> </tr> </thead> <tbody> <tr> <td class="p-3 border border-gray-200 font-medium">Tiempo de configuración</td> <td class="p-3 border border-gray-200 text-green-700">60 segundos</td> <td class="p-3 border border-gray-200 text-red-700">2–6 horas</td> </tr> <tr class="bg-gray-50"> <td class="p-3 border border-gray-200 font-medium">Habilidad necesaria</td> <td class="p-3 border border-gray-200 text-green-700">Ninguno</td> <td class="p-3 border border-gray-200 text-red-700">Líquido + HTML + JS</td> </tr> <tr> <td class="p-3 border border-gray-200 font-medium">Detección de LCP</td> <td class="p-3 border border-gray-200 text-green-700">Automático (por página)</td> <td class="p-3 border border-gray-200 text-red-700">Manual por plantilla</td> </tr> <tr class="bg-gray-50"> <td class="p-3 border border-gray-200 font-medium">Optimización del script de la aplicación</td> <td class="p-3 border border-gray-200 text-green-700">Incluido</td> <td class="p-3 border border-gray-200 text-red-700">No es posible manualmente</td> </tr> <tr> <td class="p-3 border border-gray-200 font-medium">Manejo responsivo</td> <td class="p-3 border border-gray-200 text-green-700">Todos los puntos de interrupción</td> <td class="p-3 border border-gray-200 text-red-700">Mejor suposición</td> </tr> <tr class="bg-gray-50"> <td class="p-3 border border-gray-200 font-medium">Mantenimiento continuo</td> <td class="p-3 border border-gray-200 text-green-700">Cero (automático)</td> <td class="p-3 border border-gray-200 text-red-700">Cada cambio de tema/diseño</td> </tr> <tr> <td class="p-3 border border-gray-200 font-medium">Riesgo de rotura de tienda</td> <td class="p-3 border border-gray-200 text-green-700">Cero (reversible)</td> <td class="p-3 border border-gray-200 text-red-700">Medio (ediciones de código)</td> </tr> <tr class="bg-gray-50"> <td class="p-3 border border-gray-200 font-medium">Mejora típica</td> <td class="p-3 border border-gray-200 text-green-700 font-bold">Más de 27 puntos de velocidad</td> <td class="p-3 border border-gray-200">5 a 15 puntos (solo imágenes)</td> </tr> </tbody> </table> </div> <div class="text-center"> <a href={thunderInstallUrl} class="inline-flex items-center gap-2 bg-amber-500 text-white px-8 py-4 rounded-xl font-semibold hover:bg-amber-600 transition shadow-lg shadow-amber-200 text-lg" > Pruebe Thunder Free: vea los resultados en 60 segundos → </a> </div> </section>  <section id="faq" class="mb-16"> <h2 class="text-2xl md:text-3xl font-bold mb-8">Preguntas frecuentes</h2> <div class="space-y-6"> {faqItems.map((item) => ( <div class="border border-gray-200 rounded-xl p-6"> <h3 class="text-lg font-bold mb-3">{item.question}</h3> <p class="text-gray-600 leading-relaxed">{item.answer}</p> </div> ))} </div> </section>  <section class="mb-16"> <h2 class="text-2xl md:text-3xl font-bold mb-6">Recursos relacionados</h2> <div class="grid md:grid-cols-2 gap-4"> <a href="/es/blog/shopify-image-optimization/" class="block bg-gray-50 rounded-xl p-5 hover:bg-gray-100 transition border border-gray-200"> <p class="font-semibold text-gray-900 mb-1">Guía de optimización de imágenes de Shopify</p> <p class="text-sm text-gray-500">Formatos, compresión, imágenes responsivas y más</p> </a> <a href="/es/blog/shopify-lcp-optimization/" class="block bg-gray-50 rounded-xl p-5 hover:bg-gray-100 transition border border-gray-200"> <p class="font-semibold text-gray-900 mb-1">Optimización de Shopify LCP</p> <p class="text-sm text-gray-500">La guía completa para la pintura con contenido más grande</p> </a> <a href="/es/blog/shopify-render-blocking-resources/" class="block bg-gray-50 rounded-xl p-5 hover:bg-gray-100 transition border border-gray-200"> <p class="font-semibold text-gray-900 mb-1">Recursos de bloqueo de renderizado en Shopify</p> <p class="text-sm text-gray-500">Cómo identificar y solucionar el bloqueo de CSS y JS</p> </a> <a href="/es/blog/shopify-core-web-vitals-guide/" class="block bg-gray-50 rounded-xl p-5 hover:bg-gray-100 transition border border-gray-200"> <p class="font-semibold text-gray-900 mb-1">Guía de elementos básicos de Web Vitals</p> <p class="text-sm text-gray-500">LCP, CLS, INP: qué significan y cómo solucionarlos</p> </a> </div> </section> </div> </article>  <section class="py-16 bg-gray-50"> <div class="max-w-4xl mx-auto px-4"> <DualCTA /> </div> </section> </Base>

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

📋 Tabla de contenidos

¿Qué es la carga diferida?

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

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

Omita el trabajo manual: Thunder maneja la carga diferida automáticamente

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

Carga diferida nativa (`cargando="perezoso"`)

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

📋 Tabla de contenidos

¿Qué es la carga diferida?

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

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

Omita el trabajo manual: Thunder maneja la carga diferida automáticamente

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

Carga diferida nativa (cargando="perezoso")

Carga diferida nativa (`cargando="perezoso"`)