La galería de una ficha puede pesar más que la portada.
Cinco fotos de 3 MB son 15 MB. Da igual que la home esté optimizada: quien entra a un producto sigue esperando. Y en una tienda, la foto es el producto.
Abre una ficha, ordena la pestaña de red por tamaño y mira las imágenes. La principal debe cargarse pronto y con prioridad; las de la galería, solo cuando se ven. Si cada miniatura descarga una foto de 3000 px, ahí está el peso.
Qué pasa en una ficha de producto
Una ficha tiene más trabajo que una página de texto: imagen principal, galería, variaciones, precio, stock, botón de compra, pestañas de descripción, productos relacionados. Cada pieza puede estar bien o puede estar cargando de más.
Los tres sospechosos habituales:
- La galería completa al entrar. Se descargan todas las fotos aunque el cliente solo vea la primera.
- Las variaciones. Algunos maquetadores cargan todas las imágenes de todas las combinaciones por si acaso.
- El vídeo o el zoom. Una librería de zoom o un vídeo de fondo añaden peso y trabajo antes de que el cliente decida nada.
La imagen principal manda
El LCP de una ficha suele ser la foto del producto. Es lo que el cliente está esperando ver. Si esa imagen se carga tarde, la página se siente lenta aunque el resto esté perfecto.
Por eso la principal no lleva `loading="lazy"`. Debe ir con prioridad alta y, si se puede, prerresuelta: `fetchpriority="high"` y, cuando el tema lo permite, un `preload` en el `
`. La galería que está debajo sí puede ser perezosa.Cómo comprobarlo sin acceso al panel
Abre una ficha en una ventana privada, abre las herramientas del navegador y recarga. En la pestaña de red:
- Ordena por tamaño. Las imágenes de producto suelen estar arriba.
- Haz clic en la más grande y compara el tamaño del archivo con el que se muestra.
- Mira cuántas imágenes se descargan antes de que hagas clic en la galería.
- Filtra por «Img» y cuenta. Si hay diez fotos de producto y solo ves una, sobra nueve.
Repite la prueba con una variación seleccionada. Algunos temas descargan la imagen de cada variante al cambiar de opción, y otros las descargan todas al cargar.
Qué se puede arreglar
- Redimensionar antes de subir. La foto más grande que se va a ver, no la que salió de la cámara.
- Servir WebP o AVIF con la calidad justa. En producto se nota menos que en un paisaje, pero se nota.
- Usar `srcset`. Que el móvil descargue la versión de 800 px y el escritorio la de 1600.
- Cargar la galería bajo demanda. Miniaturas ligeras y la foto grande solo al abrirla.
- Reservar el espacio de la imagen. Ancho y alto definidos para que el texto no salte cuando llega la foto.
- Vídeo, solo si aporta. Si lo hay, con póster y sin autoplay con sonido. Mejor aún: que no bloquee la carga inicial.
En una tienda, la foto no ilustra el producto: es el producto. Pero no hace falta enviarla a tamaño de valla publicitaria.El equilibrio
Productos relacionados y upsells
Los relacionados están debajo del pliegue y muchas veces se cargan al entrar. No es el problema principal, pero suma. Si el tema los pinta con las fotos a tamaño completo, una ficha puede acabar descargando ocho imágenes de producto en lugar de una.
La solución es la misma: miniaturas del tamaño real y carga diferida. No hace falta tocar el diseño; solo dejar de enviar píxeles que no se ven.
¿Cuánto tarda en verse tu producto?
La auditoría mira la portada de tu tienda: cuánto pesan sus imágenes, en qué formato se sirven y si se cargan todas de golpe o solo cuando hacen falta.
Auditar mi tienda