Elementos de imagen de Shopify a los que les falta ancho y alto: corrija la advertencia de PageSpeed

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 aspect-ratio 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

Si la imagen reportada proviene de reseñas, feeds de Instagram, galerías comprables, recomendaciones o un creador de páginas, la solución puede residir en la configuración de la aplicación en lugar de los archivos del tema. Deshabilite el bloque en un tema duplicado, vuelva a probar y confirme la propiedad antes de editar. Las guías sobre revisar widgets y Los creadores de páginas ralentizan Shopify cubre ese flujo de trabajo.

Solución manual frente a solución Thunder

Qué no romper

No fije dimensiones pensadas solo para escritorio que distorsionen las imágenes en móviles. No elimine el atributo adaptable srcset al añadir el ancho y el alto. No fuerce todas las imágenes a tener la misma proporción si las fotografías de los productos usan recortes distintos. El navegador necesita un espacio reservado estable, pero los compradores también necesitan una presentación clara del producto.

Tenga en cuenta también el LCP. La imagen principal o de producto situada en la mitad superior de la página normalmente debe cargarse de inmediato con loading="eager" y prioridad alta, mientras que las imágenes situadas más abajo pueden cargarse de forma diferida con loading="lazy". Consulte cómo diferir imágenes fuera de pantalla en Shopify y la guía de optimización del LCP si la misma página muestra advertencias sobre la prioridad de las imágenes.

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 la 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 guía de las mejores aplicaciones de velocidad para Shopify o consulte los precios de Thunder.

FAQ