Solución rápida con Thunder
Thunder Page Speed mejora automáticamente la entrega de imágenes comunes de Shopify y los problemas de Core Web Vitals. Es el primer paso más rápido para tiendas con secciones de temas mixtos, tarjetas de productos, widgets de aplicaciones y etiquetas de imágenes antiguas.
Por qué Shopify recibe la advertencia de ancho y alto
Lighthouse marca elementos de imagen sin ancho y alto explícitos porque el navegador no puede reservar espacio de diseño con confianza mientras se descarga la imagen. Si la imagen aparece y empuja texto, botones, tarjetas de productos, reseñas o contenido debajo de la página hacia abajo, los compradores ven un salto. Google explica esto en la guía de estabilidad del diseño: las imágenes y los videos necesitan dimensiones para que el navegador pueda asignar espacio antes de que el recurso termine de cargarse.
Los temas de Shopify a menudo comienzan limpios y luego cambian. Un desarrollador agrega un héroe personalizado. Una sección de la página de destino codifica una imagen. Un creador de páginas inyecta un banner. Una aplicación de reseñas inserta fotografías de clientes. Una publicación de blog utiliza HTML sin formato en lugar del componente de imagen del tema. Cada uno puede crear la misma advertencia de PageSpeed.
Esto se superpone con Correcciones de Shopify CLS, optimización de imagen, y dimensionar correctamente las imágenes. El ancho y el alto no se trata de comprimir el archivo. Se trata de hacer que el diseño sea predecible.
Manual Paso a Paso: Reparar Elementos de Imagen Sin Dimensiones
1. Encuentra las imágenes exactas de los informes de Lighthouse
Ejecute PageSpeed Insights en la página de inicio, una página de producto y una página de colección. Abra la auditoría "Los elementos de la imagen no tienen ancho y alto explícitos" y copie las URL de las imágenes. Luego busque en su tema el nombre del archivo, el nombre de la sección, el bloque de aplicación o el fragmento que lo representa.
Utilice las mismas URL durante las pruebas. Las ejecuciones de PageSpeed varían, así que mantenga un proceso estable antes y después usando la guía de variación de puntuación de la prueba de velocidad.
2. Prefiere Shopify image_tag para imágenes propiedad del tema
Para imágenes almacenadas en Shopify, use la canalización de imágenes de Liquid en lugar de URL de CDN sin formato. Ayuda a generar fuentes responsivas y mantiene la imagen dentro del comportamiento CDN de Shopify. La clave es representar un marcado que le dé al navegador un cuadro estable.
<!-- Product card image -->
{{ product.featured_image
| image_url: width: 700
| image_tag:
widths: '350, 500, 700',
sizes: '(min-width: 990px) 25vw, 50vw',
loading: 'lazy',
alt: product.featured_image.alt
}}3. Agregar dimensiones a etiquetas img sin formato
Si una sección personalizada debe usar un formato sin formato img , agregue atributos de ancho y alto que coincidan con la proporción intrínseca de la imagen. CSS aún puede hacer que la imagen responda. Los atributos definen la proporción; CSS define cómo escala.
<img
src="{{ section.settings.badge | image_url: width: 480 }}"
width="480"
height="320"
loading="lazy"
decoding="async"
alt="{{ section.settings.badge.alt | escape }}"
class="feature-badge"
>
.feature-badge {
width: 100%;
height: auto;
}4. Reserve una ranura con relación de aspecto para tarjetas recortadas
Las tarjetas de productos, los mosaicos de colecciones, los lookbooks y los bloques editoriales a menudo recortan imágenes. Si no puede confiar en las dimensiones naturales de la imagen, reserve un recipiente estable con relación de aspecto y recorta la imagen dentro de él.
.product-card__media {
aspect-ratio: 4 / 5;
overflow: hidden;
background: #f5f5f5;
}
.product-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}5. Verifique los widgets de la aplicación y los bloques del creador de páginas
If the reported image comes from reviews, Instagram feeds, shoppable galleries, recommendations, or a page builder, the fix may live in app settings rather than theme files. Disable the block in a duplicated theme, retest, and confirm ownership before editing. The guides on revisar widgets y Los creadores de páginas ralentizan Shopify cubre ese flujo de trabajo.
Solución manual frente a solución Thunder
| Problema | Corrección manual | Solución de trueno |
|---|---|---|
| Las etiquetas img sin procesar no tienen dimensiones | Agregue atributos de ancho y alto o cambie a image_tag. | Mejora la imagen común y los patrones CLS automáticamente. |
| Saltan las tarjetas de producto | Agregue ranuras de relación de aspecto y contenedores de imágenes estables. | Ayuda a estabilizar la representación de imágenes del escaparate como parte de la optimización de Core Web Vitals. |
| Las imágenes de la aplicación cambian el contenido | Encuentre el propietario de la aplicación, cambie la configuración del widget o retrase el widget. | Reduce la presión general sobre aplicaciones e imágenes, con revisión manual para widgets rebeldes. |
| Las imágenes también son demasiado grandes | Combina dimensiones con srcset responsivo y tamaños correctos. | Combina la estabilidad del diseño con mejoras en la entrega automatizada de imágenes. |
Qué no romper
No codifique dimensiones exclusivas de escritorio que distorsionen las imágenes móviles. No eliminar responsivo conjunto de origen mientras agrega ancho y alto. No fuerces todas las imágenes a tener la misma proporción si la fotografía del producto utiliza diferentes cultivos. El navegador necesita un área reservada estable, pero los compradores aún necesitan una presentación limpia del producto.
También tenga en cuenta LCP. Las imágenes destacadas y de productos de la mitad superior de la página generalmente deben ser entusiastas y de alta prioridad, mientras que las imágenes de la mitad inferior de la página pueden ser vagas. leer posponer imágenes fuera de pantalla en Shopify y Optimización LCP si la misma página tiene advertencias de prioridad de imagen.
Cómo confirmar que la corrección de ancho y alto de Shopify funcionó
Vuelva a realizar la prueba con PageSpeed Insights y el prueba de velocidad gratuita de Shopify. La advertencia debería incluir menos imágenes o desaparecer. CLS debe permanecer por debajo de 0,1 en los datos de campo y la página debe sentirse estable mientras se carga en una conexión móvil.
Para un flujo de trabajo completo en toda la tienda, utilice el guía completa de optimización de velocidad de Shopify. Si su tienda tiene muchas secciones heredadas o widgets de aplicaciones, compare las opciones de automatización en la la mejor guía de aplicaciones de velocidad de Shopify o reseña Precios de trueno.
FAQ
¿Qué significan los elementos de imagen que no tienen ancho y alto explícitos en Shopify?
It means Lighthouse found image tags where the browser cannot reserve the right layout space before the image loads. On Shopify, this usually comes from custom sections, app widgets, hardcoded image tags, blog images, or product card markup that omits width and height attributes.
¿La falta de ancho y alto de la imagen perjudica a Core Web Vitals?
Sí. Las dimensiones faltantes pueden aumentar el cambio de diseño acumulativo porque el contenido de la página se mueve después de cargar las imágenes. CLS es uno de los Core Web Vitals de Google, y un CLS deficiente puede perjudicar la experiencia del usuario en las tiendas móviles.
¿Shopify image_url e image_tag agregan dimensiones automáticamente?
El asistente image_tag de Shopify puede generar marcas de imágenes útiles, pero los fragmentos personalizados y las etiquetas img sin procesar a menudo lo omiten. Aún necesitas verificar que el HTML renderizado contenga dimensiones estables o un contenedor de relación de aspecto.
¿Puede Thunder corregir las advertencias de ancho y alto que faltan?
Thunder puede mejorar automáticamente muchos problemas comunes de estabilidad de imagen y diseño de Shopify. Es posible que las secciones altamente personalizadas o los iframes de aplicaciones de terceros aún necesiten correcciones a nivel de tema o aplicación.
¿Cómo pruebo la solución?
Ejecute la misma página a través de PageSpeed Insights y una prueba de velocidad de Shopify antes y después del cambio. Compruebe que la advertencia se haya reducido, que CLS se mantenga por debajo de 0,1 y que las tarjetas de productos, los banners de héroe y las imágenes de blogs sigan recortándose correctamente en el móvil.