Cómo diagnosticar problemas de carga diferida en Shopify
Antes de pasar a las correcciones, confirme que la carga diferida en realidad no funciona. Aquí hay un diagnóstico rápido de 2 minutos:
Paso 1: Verifique la pestaña Red
- 1. Abre tu tienda Shopify en Chrome
- 2. Abra DevTools (F12 o Cmd+Opt+I en Mac)
- 3. Ir al Red
- 4. Filtrar por Imagen (solo imágenes)
- 5. Recarga completa: Ctrl+Mayús+R (o Cmd+Mayús+R)
- 6. Cuente las solicitudes de imágenes que se activan inmediatamente
- 7. Ahora desplácese lentamente hacia abajo: ¿aparecen nuevas solicitudes?
Si todas las imágenes se cargan a la vez al cargar la página: La carga diferida no funciona en absoluto.
Si algunas imágenes se cargan al desplazarse pero muchas se cargan por adelantado: La carga diferida funciona parcialmente, pero se omiten algunas imágenes.
Si las imágenes se cargan progresivamente a medida que te desplazas: La carga diferida está funcionando; la sugerencia de PageSpeed puede deberse a un problema diferente.
Paso 2: Inspeccionar imágenes individuales
Haga clic derecho en una imagen de la mitad inferior → Inspeccionar. Compruebe el <img> etiqueta para:
loading="lazy" → Se establece la carga diferida nativa
class="lazyload" o data-src="..." → Carga diferida de JavaScript (puede funcionar pero agrega sobrecarga)
Atributo
No loading → Imagen cargada ansiosa de forma predeterminada
También puede realizar una verificación rápida con nuestro prueba de velocidad gratuita de Shopify : marca automáticamente los problemas de imágenes diferidas.
Omita la solución de problemas: Thunder soluciona los 8 problemas automáticamente
Cada solución a continuación requiere edición del código del tema, tiempo del desarrollador y mantenimiento continuo. Thunder Page Speed Optimizer maneja la carga diferida, el aplazamiento de scripts, CSS crítico y optimización de fuentes en una sola instalación: independientemente de su tema o configuración de aplicación.
- ✦ Funciona con cualquier tema : carga diferida antigua, nueva, personalizada o rota
- ✦ Maneja contenido inyectado en la aplicación : pospone scripts y optimiza los recursos que agregan las aplicaciones
- ✦ Detecta automáticamente LCP — nunca carga con pereza lo que debería ser ansioso
- ✦ Mejora de la puntuación de velocidad promedio de más de 27 puntos
Solución 1: su tema no usa image_tag
El problema: Muchos temas de Shopify, especialmente los creados antes de 2022 o muy personalizados, usan etiquetas <img> simples en lugar del filtro Liquid image_tag de Shopify. Sin image_tag, no hay carga diferida automática, imágenes adaptables mediante srcset ni entrega en WebP.
Cómo comprobarlo: Abra el código de su tema (Tienda en línea → Temas → Editar código) y busque image_tag en archivos de sección. Si encuentras mayormente crudo <img src= en su lugar, tu tema no utiliza el canal de imágenes moderno de Shopify.
La solución: Sustituya las etiquetas <img> simples por el filtro image_tag. Para ello, debe editar los archivos Liquid del tema:
Antes:
<img src="{{ image | image_url: width: 800 }}" alt="{{ image.alt }}" />Después:
{{ image | image_url: width: 800 | image_tag: loading: "lazy", alt: image.alt }}
Para obtener la guía completa de implementación de carga diferida nativa, que incluye section.index lógica, vea nuestra Guía de carga diferida nativa de Shopify.
Solución 2: las imágenes inyectadas en la aplicación evitan la carga diferida de su tema
El problema: Cada aplicación de Shopify que agrega elementos visuales (widgets de reseñas (Judge.me, Loox), insignias de confianza (Trust Hero), ventanas emergentes de ventas adicionales (ReConvert), widgets de chat (Tidio) – inyecta su propio HTML e imágenes directamente en la página. Estas imágenes son no renderizado a través de las plantillas Liquid de su tema, para que la lógica de carga diferida de su tema nunca las toque.
La tienda Shopify promedio tiene entre 6 y 8 aplicaciones. Cada uno puede inyectar de 1 a 5 imágenes más JavaScript. Son potencialmente más de 30 imágenes y scripts que se cargan con entusiasmo y que tu tema no puede controlar.
Cómo comprobarlo: En DevTools, mire las imágenes de la página inferior que se cargaron inmediatamente. Haga clic derecho → Inspeccionar. Si la imagen está envuelta en un <div> con una clase específica de la aplicación (como jdgm-widget o loox-widget) en lugar de en la sección HTML de su tema, se inyecta en la aplicación.
La solución: Este es el problema más difícil de resolver manualmente. Opciones:
Póngase en contacto con cada desarrollador de aplicaciones y pídales que agreguen loading="lazy" a sus imágenes inyectadas. Algunos lo harán, la mayoría no le dará prioridad.
Escribir JavaScript personalizado que encuentra imágenes inyectadas por la aplicación después de cargar la página y agrega el atributo diferido. Esto es frágil y se rompe cuando las aplicaciones actualizan su código.
Utilice una aplicación de optimización de velocidad que maneja scripts de aplicaciones a nivel de red, posponiendo cargas útiles completas de aplicaciones hasta que sea necesario. esto es lo que Thunder lo hace automáticamente.
Solución 3: JavaScript y la carga diferida nativa están en conflicto
El problema: Algunos temas incluyen una biblioteca de carga diferida de JavaScript (como lazysizes) y el atributo nativo loading="lazy". Esto crea un doble procesamiento: el IntersectionObserver nativo del navegador se activa, y la biblioteca JS ejecuta su propio observador. El resultado pueden ser imágenes que parpadean, se cargan dos veces o, en algunos casos, nunca se cargan.
Esto también sucede cuando los comerciantes instalan una aplicación de carga diferida sobre un tema que ya tiene carga diferida nativa.
Cómo comprobarlo: Busque ambos en la misma imagen:
- •
loading="lazy"(nativo) - •
class="lazyload"odata-src(biblioteca de JavaScript)
Si ves ambos, hay un conflicto. También busque lazysizes.js o bibliotecas similares en la carpeta de activos de su tema.
La solución: Elimine la biblioteca JavaScript de carga diferida y use el atributo nativo loading="lazy". En 2026, más del 96% de los navegadores lo admiten, por lo que no hace falta una biblioteca JS adicional. Retire su script del tema y cambie los atributos data-src por src, con loading="lazy".
Antes (carga diferida de JS):
<img data-src="product.jpg" class="lazyload" alt="Producto" />Después (carga diferida nativa): El atributo
<img src="product.jpg" loading="lazy" alt="Producto" width="600" height="400" />Solución 4: Las imágenes de fondo CSS no se pueden cargar de forma diferida
El problema: El atributo loading="lazy" solo funciona en elementos <img> y <iframe>. Las imágenes configuradas mediante CSS con background-image siempre se descargan en cuanto se analiza el CSS, incluso si el elemento está muy por debajo de la parte visible de la página.
Muchos temas utilizan imágenes de fondo CSS para secciones destacadas, superposiciones de banners, efectos de paralaje y patrones decorativos. Estos son invisibles para la carga diferida nativa.
Cómo comprobarlo: En DevTools, busque imágenes en la pestaña Red que se cargaron inmediatamente pero que no son visibles en la pantalla. Haga clic en la URL de la imagen → compruebe si se hace referencia a ella en un archivo CSS en lugar de en un HTML
Etiqueta <img> .
La solución: Dos enfoques:
Opción A: Convertir a etiquetas
Sustituya las imágenes de fondo CSS por elementos <img> reales, colocados con CSS mediante object-fit: cover y posicionamiento absoluto. Así podrá añadir loading="lazy".
Opción B: IntersectionObserver de JavaScript
Escriba JS personalizado que observe las secciones inferiores que ingresan a la ventana gráfica y luego aplique dinámicamente el background-image CSS. Más complejo pero conserva su estructura de diseño existente.
Para las secciones principales de la página superior, las imágenes de fondo CSS están bien: debería carga inmediatamente. El problema está en las secciones inferiores que utilizan imágenes de fondo. Obtenga más información sobre cómo optimizar todo tipo de imágenes en nuestro Guía de optimización de imágenes de Shopify.
Solución 5: A las secciones personalizadas les falta el loading Atributo
El problema: Las secciones predeterminadas de su tema pueden manejar la carga diferida correctamente, pero las secciones personalizadas (agregadas por desarrolladores o aplicaciones de creación de secciones) a menudo lo omiten. Una única sección personalizada con imágenes cargadas con entusiasmo puede cargar de 5 a 10 imágenes adicionales en cada página.
Cómo comprobarlo: Inspeccione las imágenes en diferentes secciones de su página. Preste atención a las secciones que se ven diferentes del estilo predeterminado del tema — es probable que sean adiciones personalizadas. Revise cada una en busca de loading="lazy".
La solución: Edite cada archivo de sección personalizada y agregue el section.index lógica:
{%- liquid
if section.index > 2
assign loading = "lazy"
else
assign loading = "eager"
endif
-%}
{{ section.settings.image | image_url: width: 1200 | image_tag: loading: loading }}
Aplique esto a cada sección personalizada que muestre imágenes. Para obtener una descripción general de cómo section.index funciona y cuándo usarlo carga perezosa vs ansiosa, consulte nuestra guía comparativa.
Solución 6: Su tema carga de forma diferida imágenes de la mitad superior de la página (perjudicando a LCP)
El problema: Este es el problema opuesto e, irónicamente, es peor que no tener ninguna carga diferida. Algunos temas aplican loading="lazy" a cada
Página , incluido el banner principal y la foto principal del producto. Esto obliga al navegador a ejecutar IntersectionObserver antes de descargar la imagen más importante, lo que agrega entre 200 y 1000 ms a su LCP.
⚠️ Esto te cuesta 1 segundo de LCP
El equipo de desempeño de Shopify midió un Penalización LCP mediana de 1,0 segundos para tiendas que cargan de forma diferida su imagen LCP. Tu imagen de héroe debería siempre carga ansiosa.
Cómo comprobarlo: Abra su página de inicio. Haga clic con el botón derecho en la imagen principal del banner y seleccione Inspeccionar. Si ve loading="lazy", está perjudicando su LCP. Repita la comprobación con la imagen principal de una página de producto.
La solución: Configure la carga inmediata de las imágenes inicialmente visibles y añada fetchpriority="high" a su imagen LCP:
{{ section.settings.hero_image | image_url: width: 1400 | image_tag: loading: "eager", fetchpriority: "high" }}Para obtener información detallada sobre la solución de problemas de LCP, consulte nuestra Guía de optimización de Shopify LCP.
Solución 7: La falta de ancho y alto provoca un cambio en el diseño
El problema: Causa de imágenes cargadas de forma diferida sin dimensiones explícitas Cambio de diseño acumulativo (CLS). Antes de que se cargue la imagen, el navegador no reserva espacio para ella. Cuando la imagen finalmente se descarga, la página salta a medida que empuja el contenido hacia abajo. Los visitantes ven texto alternativo en un pequeño espacio colapsado y luego un cambio visual repentino: una experiencia terrible.
Cómo comprobarlo: En DevTools, observe los saltos en el diseño a medida que se desplaza. También puede ejecutar una auditoría Lighthouse: los problemas de CLS se marcarán con "Los elementos de la imagen no tienen ancho y alto explícitos".
La solución: Incluya siempre los atributos width y height en las imágenes, o use la propiedad CSS aspect-ratio:
Opción A: atributos HTML
<img src="product.jpg" loading="lazy" alt="Producto" width="600" height="400" />Opción B: relación de aspecto CSS
.product-image {
aspect-ratio: 3 / 2;
width: 100%;
object-fit: cover;
} Consejo profesional: Shopify image_tag agrega atributos de ancho y alto automáticamente. Si estás usando crudo
Etiquetas <img> , debe agregarlas usted mismo. Esta es una razón más para usa el filtro image_tag nativo de Shopify.
Solución 8: Safari y compatibilidad del navegador
El problema: Safari añadió soporte nativo de carga diferida en la versión 15.4 (marzo de 2022). Si está probando en una versión anterior de Safari, la carga diferida no funcionará. Más comúnmente, el umbral de carga diferida de Safari es diferente al de Chrome — Safari comienza a cargar imágenes diferidas antes (más lejos de la ventana de visualización), lo que puede hacer que parezca que la carga diferida no funciona en dispositivos Apple.
Cómo comprobarlo: Si la carga diferida funciona en Chrome pero no en Safari, verifique la versión de Safari. También tenga en cuenta que la implementación IntersectionObserver de Safari tiene márgenes de raíz ligeramente diferentes: las imágenes pueden comenzar a cargarse en 2 o 3 alturas de pantalla antes de ingresar a la ventana gráfica.
La solución: En la mayoría de los casos, el comportamiento de Safari es realmente bueno; simplemente es más agresivo en cuanto a la precarga. Si necesita una paridad exacta entre navegadores, necesitará una carga diferida basada en JavaScript con umbrales explícitos, pero la carga diferida nativa con umbrales predeterminados del navegador es el enfoque recomendado en 2026.
Para los verdaderamente paranoicos, consulte caniuse.com/loading-lazy-attr para la compatibilidad actual con el navegador: es superior al 96 % a nivel mundial y cubre prácticamente a todos los compradores de Shopify.
Cuándo dejar de solucionar problemas de bricolaje
Si tienes 2 o 3 de estos problemas sucediendo simultáneamente (lo cual es común en tiendas con temas antiguos y múltiples aplicaciones), solucionarlos manualmente resulta poco práctico. Cada solución requiere cambios en el código del tema que pueden fallar durante las actualizaciones del tema, y el contenido inyectado en la aplicación está esencialmente fuera de su control.
Aquí es donde un dedicado aplicación de optimización de velocidad se gana la vida. En lugar de solucionar problemas individuales, obtiene una solución que maneja toda la pila de optimización (imágenes, scripts, CSS, fuentes) en cualquier tema y cualquier combinación de aplicaciones.
¿No estás listo para una aplicación? Como mínimo, realiza una prueba de velocidad gratuita para comprender su punto de referencia actual e identificar qué problemas realmente están afectando más su desempeño. Para una orientación de optimización más amplia, nuestro guía completa de optimización de velocidad de Shopify cubre cada técnica en detalle.
Preguntas frecuentes
¿Cómo sé si la carga diferida funciona en mi tienda Shopify?
Abra Chrome DevTools (F12) → pestaña Red → filtrar por 'Img'. Recargue la página sin usar la caché. Si todas las imágenes se cargan a la vez durante la carga de la página, la carga diferida no funciona. Si las solicitudes de nuevas imágenes solo aparecen a medida que se desplaza hacia abajo, la carga diferida está activa. También puede hacer clic con el botón derecho en cualquier imagen situada fuera del área inicialmente visible → Inspeccionar y buscar loading='lazy' en el HTML.
¿Por qué PageSpeed Insights todavía dice "Aplazar imágenes fuera de pantalla" si tengo carga diferida?
Esto generalmente significa que la carga diferida no se aplica a todas las imágenes de la página inferior. Causas comunes: su tema solo carga de forma diferida algunas imágenes pero omite otras, las imágenes inyectadas en la aplicación omiten la carga diferida del tema o las imágenes de fondo CSS no se pueden cargar de forma diferida con el atributo de carga. También puede activarse si el umbral de carga diferida del navegador carga las imágenes ligeramente antes de que entren en la ventana gráfica.
¿Pueden las aplicaciones de Shopify interrumpir la carga diferida de mi tema?
Sí. Las aplicaciones inyectan su propio HTML, imágenes y scripts directamente en el DOM, evitando por completo las plantillas Liquid de su tema. Estas imágenes inyectadas por la aplicación no tendrán loading = 'lazy' a menos que el desarrollador de la aplicación lo agregue específicamente. Además, algunas aplicaciones incluyen su propio JavaScript de carga diferida que puede entrar en conflicto con la carga diferida del navegador nativo, provocando un doble procesamiento o imágenes que nunca se cargan.
¿Debo usar una aplicación de carga diferida o corregirla en el código de mi tema?
Si el problema es menor (a algunas imágenes les falta el atributo de carga), solucionarlo en el código del tema es sencillo. Si tiene varias aplicaciones que inyectan imágenes, un tema muy personalizado o desea una optimización integral más allá de la carga diferida de imágenes (aplazamiento de script, CSS crítico, precarga de fuentes), una aplicación como Thunder Page Speed Optimizer maneja todo automáticamente y funciona independientemente del tema o la configuración de la aplicación.
¿La carga diferida funciona en Shopify móvil?
Sí, la carga diferida nativa (loading='lazy') funciona en todos los navegadores móviles modernos, incluidos Safari en iOS 15.4+, Chrome en Android y Samsung Internet. Si la carga diferida aparece interrumpida solo en dispositivos móviles, verifique si hay: bibliotecas de carga diferida de JavaScript que entran en conflicto con los navegadores móviles, imágenes representadas en diferentes tamaños en dispositivos móviles que podrían estar dentro del umbral de precarga del navegador o plantillas de temas específicos para dispositivos móviles que no incluyen el atributo de carga.
¿Cómo soluciono la carga ansiosa en mi imagen de banner de Shopify theme.liquid hero?
Si la imagen principal de su banner en theme.liquid usa loading='lazy' en lugar de loading='eager', puede empeorar el LCP hasta 1 segundo. Busque su etiqueta en el archivo de sección del encabezado o del banner, no directamente en theme.liquid: revise sections/header.liquid o sections/image-banner.liquid. Cambie loading='lazy' por loading='eager' y añada fetchpriority='high'. Si usa image_tag, aplique la lógica de section.index: las secciones con índice 1 o 2 deben cargar sus imágenes de inmediato y las siguientes de forma diferida. Thunder Page Speed Optimizer detecta automáticamente su imagen LCP y nunca la carga de forma diferida, independientemente de la configuración del tema.
¿Por qué mis imágenes cargadas de forma diferida muestran texto alternativo antes de cargarse?
Esto sucede cuando las imágenes cargadas de forma diferida no tienen atributos explícitos de ancho y alto (o dimensiones CSS). Sin dimensiones, el navegador no puede reservar espacio para la imagen, por lo que muestra el texto alternativo en un espacio contraído. Cuando la imagen finalmente se carga, la página salta (cambio de diseño). Solucione este problema asegurándose de que cada imagen cargada de forma diferida tenga atributos de ancho y alto, o use el filtro image_tag de Shopify que agrega dimensiones automáticamente.
Haz que tu carga diferida de Shopify funcione correctamente
Los problemas de carga diferida en Shopify casi siempre se deben a lagunas en la implementación del tema, conflictos de aplicaciones o un comportamiento incorrecto por encima del pliegue. Las soluciones van desde lo simple (añadir loading="lazy" a algunas imágenes) a complejo (revisión de secciones personalizadas y administración de contenido insertado en la aplicación).
Recuerde: incluso la carga diferida perfecta solo aborda la entrega de imágenes. Scripts de bloqueo de renderizado y CSS no optimizado a menudo causan más daño que las imágenes no diferidas. Un enfoque integral (manejo conjunto de imágenes, scripts, CSS y fuentes) ofrece los mejores resultados.
Comience aquí: Prueba la velocidad de tu tienda para ver exactamente qué está afectando el rendimiento, luego solucione las correcciones anteriores, o deje que Thunder lo maneja automáticamente. Los planes comienzan en $19,99/mes con una prueba gratuita.