Acelere las páginas de productos de Shopify en 60 segundos
Antes de sumergirse en las optimizaciones manuales, prueba la velocidad de la página de tu producto para ver tu puntuación actual. Ingrese la URL de la página del producto (no solo su página de inicio) para obtener una imagen precisa. Si su puntuación móvil es inferior a 60, Thunder Page Speed Optimizer puede ayudar de inmediato:
- Pospone la revisión de scripts de aplicaciones (Judge.me, Loox, Stamped) para que las imágenes de sus productos se muestren primero
- Retrasa las ventas cruzadas y adicionales de JavaScript del widget hasta después de cargar la página
- Optimiza el orden de carga de análisis y scripts de chat en páginas de productos
- Funciona con todos los temas de Shopify 2.0: no se necesitan cambios de código
Para los comerciantes que quieran comprender qué está ralentizando las páginas de sus productos y también optimizarlas manualmente, sigan leyendo.
Por qué las páginas de productos de Shopify son más lentas que otras páginas
Su página de inicio puede obtener una puntuación de 75 en dispositivos móviles, mientras que las páginas de sus productos obtienen una puntuación de 45. Esa brecha no es aleatoria. Las páginas de productos cargan muchos más recursos que cualquier otro tipo de página en su tienda:
| Recurso | Tamaño típico | Por qué está cargado |
|---|---|---|
| Imágenes de productos (5-10) | 500KB-2MB | Galería, zoom, imágenes variantes |
| Revisar los scripts de la aplicación | 150-500KB | Calificaciones por estrellas, carrusel de reseñas |
| Venta adicional/venta cruzada de aplicaciones | 100-400KB | Widgets "También te pueden gustar" |
| Selector de variantes JS | 20-80KB | Muestras de color, selectores de tamaño |
| Datos JSON del producto | 10-150KB | Precios variantes, inventario, metacampos |
| Guiones de análisis | 150-600KB | Seguimiento de comercio electrónico mejorado |
| Widget de chat | 300-800KB | Burbuja de soporte en cada página |
Se carga una página de producto típica con reseñas, recomendaciones de ventas adicionales, análisis y un widget de chat. 1,5-4 MB solo de JavaScript : encima de las imágenes del producto. Compare eso con una página de inicio con una imagen principal y algunos productos destacados que cargan entre 500 KB y 1 MB de JavaScript.
La ironía: las páginas de productos son el lugar donde se produce la conversión. Una página de producto lenta le cuesta directamente las ventas. Nuestro datos de velocidad y conversiones muestra que cada segundo adicional de tiempo de carga de la página del producto reduce las tasas de conversión entre un 7% y un 12%.
Optimización de imágenes de productos para mayor velocidad
Las imágenes de productos suelen ser el recurso más importante en las páginas de productos y el más común. Elemento LCP. Optimizar correctamente la imagen es el cambio manual de mayor impacto que puede realizar.
Cargar dimensiones y formato
- Tamaño máximo de carga: 2000x2000px. La CDN de Shopify genera versiones más pequeñas automáticamente a través de
conjunto de origen. Cargar originales de 4000 px desperdicia tiempo de procesamiento y almacenamiento. - Utilice JPEG para fotografías de productos — La calidad del 80-85% logra el mejor equilibrio. PNG solo para productos con transparencia (vidrio, superposiciones).
- Shopify convierte a WebP automáticamente para los navegadores que lo admiten, pero la calidad del archivo fuente sigue siendo importante para el respaldo.
- Comprimir antes de cargar. Herramientas como TinyPNG o Squoosh pueden reducir el tamaño de la imagen entre un 40% y un 60% sin pérdida visible de calidad. Nuestro guía de optimización de imágenes cubre el flujo de trabajo completo.
Número de imágenes de productos
Cada imagen de producto agrega peso a la página, incluso con carga diferida. Los temas de Shopify generalmente cargan con entusiasmo las primeras 1 o 2 imágenes y cargan el resto de manera diferida, pero el navegador aún descubre y comienza a analizar todas las URL de las imágenes durante la carga inicial de la página.
| Imágenes por producto | Impacto en el peso de la página | Recomendación |
|---|---|---|
| 1-3 imágenes | 100-400KB | Ideal para productos simples |
| 4-6 imágenes | 300-800KB | Punto óptimo para la mayoría de los productos |
| 7-10 imágenes | 500KB-1.5MB | Moda/muebles: asegúrese de que la carga diferida funcione |
| 10+ imágenes | 1MB+ | Considere el video para tomas detalladas |
Precargar la imagen principal del producto
La primera imagen del producto casi siempre es el elemento LCP en las páginas de productos. Al precargarlo, se le indica al navegador que lo busque antes de descubrirlo en el HTML, lo que reduce el LCP entre 300 y 800 ms:
{% comment %} Add to theme.liquid <head> {% endcomment %}
{'{% if template contains "product" %}'}{'
'}
{' {% assign featured_image = product.featured_image %}'}{'
'}
{' {% if featured_image %}'}{'
'}
{' '}{'
'}
{' {% endif %}'}{'
'}
{'{% endif %}'}}Para más técnicas de precarga, consulte nuestro guía de sugerencias de recursos para Shopify.
Scripts de aplicaciones de páginas de productos: el asesino de velocidad oculto
Muchas aplicaciones de Shopify se dirigen específicamente a páginas de productos. Revisar widgets, recomendaciones de ventas adicionales, tablas de tallas, insignias de confianza: todos ellos inyectan JavaScript que se ejecuta en cada página de producto. Así es como las aplicaciones de páginas de productos más comunes afectan la velocidad:
Revisar aplicaciones
Las aplicaciones de reseñas son esenciales para la prueba social, pero se encuentran entre los guiones más pesados en las páginas de productos. Cargan widgets de calificación de estrellas, carruseles de reseñas, reseñas de fotografías y secciones de preguntas y respuestas, todo lo cual requiere una importante cantidad de JavaScript:
- Juez.yo: 150-300KB JS: relativamente liviano entre las aplicaciones de revisión
- Loox (reseñas de fotos): 200-500 KB JS: más pesado debido a la funcionalidad de galería de imágenes
- Estampado.io: 150-400 KB JS: varía según los widgets habilitados
- Yotpo: 300-600KB JS: uno de los más pesados debido a las funciones del conjunto completo
Las reseñas son fundamentales para la conversión, por lo que eliminar la aplicación no es la respuesta. En su lugar, posponga el guión de revisión para que la imagen del producto, el título, el precio y el botón Agregar al carrito se muestren primero. Thunder maneja esto automáticamente.
Aplicaciones de venta cruzada y adicional
"Frequently bought together" and "You may also like" widgets add 100-400KB of JavaScript plus additional product image requests. These widgets are valuable below the fold but shouldn't block the main product content from rendering.
Aplicaciones de insignia de confianza y prueba social
Las aplicaciones de insignias de confianza (insignias de envío gratuito, íconos de pago seguro) parecen livianas, pero muchas cargan entre 50 y 150 KB de JavaScript para imágenes estáticas simples. Considere reemplazar las insignias de confianza basadas en aplicaciones con HTML/CSS estático directamente en su tema: cero JavaScript, mismo impacto visual. nuestra guía sobre aplicaciones que ralentizan tu tienda enumera los peores infractores y las alternativas más rápidas.
Cómo auditar los scripts de la página del producto
- Abra la página de un producto en Chrome → DevTools → pestaña Red
- Filtrar por "JS" para ver todos los archivos JavaScript
- Ordenar por tamaño (el más grande primero)
- Busque dominios de terceros: cada uno representa una aplicación o un script externo
- Tenga en cuenta qué scripts bloquean la representación (consulte la columna "Iniciador")
This audit often reveals surprises — scripts from apps you forgot you installed, or scripts de terceros cargarse en páginas de productos donde no sirven para nada.
Velocidad del selector de variantes en las páginas de productos de Shopify
Los productos con muchas variantes (tamaño, color, material) crean desafíos de rendimiento. El objeto JSON del producto Shopify, integrado en línea en cada página de producto, contiene datos para cada variante, incluido el precio, el estado del inventario y las imágenes.
Impacto por recuento de variantes:
- Menos de 20 variantes: Impacto insignificante (~5-20 KB de JSON)
- 20-50 variantes: Impacto moderado (~20-60 KB de JSON)
- 50-100 variantes: Impacto notable (~60-150 KB de JSON, puede afectar INP)
- Más de 100 variantes: Importante: considere dividirlo en varios productos
Más allá del peso de los datos, los selectores de variantes con muchas opciones pueden causar Problemas con INP si el JavaScript que maneja el cambio de variantes no está optimizado. Cada cambio de variante desencadena una actualización del DOM de precio, disponibilidad y potencialmente imágenes: cuantas más variantes, más intensa es cada interacción.
Consejo de optimización: Si tiene imágenes de variantes específicas, asegúrese de que solo se cargue con entusiasmo la imagen de la variante actual. Deje que la carga diferida se encargue del resto. Algunos temas obtienen previamente todas las imágenes variantes, lo que aumenta enormemente el peso de la página.
Estructura de la página del producto Shopify para máxima velocidad
El orden y la estructura de las secciones de la página de su producto son importantes tanto para la velocidad percibida como para la velocidad medida. Aquí está la estructura óptima para páginas de productos rápidas:
En la parte superior de la página (cargar inmediatamente)
- Galería de imágenes del producto — Primera imagen precargada, el resto cargada de forma diferida
- Título y precio del producto : HTML simple, no se necesita JavaScript
- Selector de variantes — JS mínimo para el menú desplegable/muestra
- Botón Agregar al carrito — Debe estar funcional inmediatamente
- Breve descripción : primeras 2 o 3 frases de la descripción del producto
Debajo del pliegue (carga diferida)
- Descripción completa del producto : puede usar pestañas plegables
- Widget de revisión — Aplazar el script, mostrar después del desplazamiento
- Productos relacionados / "También te puede gustar" — Cargar al desplazarse
- Productos vistos recientemente — Cargar al desplazarse
- Insignias y garantías de confianza — HTML estático, no se necesita JS
The key principle: everything the customer needs to make a purchase decision (image, price, Add to Cart) should load first. Everything else can wait. This is what separates a product page that scores 40 on mobile from one that scores 70.
Para obtener un enfoque integral para la optimización de toda la tienda, consulte nuestra guía completa de optimización de velocidad.
Velocidad de la página de producto móvil: el campo de batalla de la conversión
Over 70% of Shopify traffic comes from mobile devices, and product pages are where the speed gap between mobile and desktop is largest. A product page scoring 90 on desktop might score 45 on mobile because:
- Las CPU móviles son más lentas : el análisis de JavaScript tarda entre 3 y 5 veces más en dispositivos móviles en promedio que en computadoras de escritorio
- Las redes móviles son menos fiables — Incluso en 4G, los picos de latencia provocan retrasos en la carga de recursos
- Las galerías de imágenes de productos son más pesadas en dispositivos móviles : las galerías deslizables a menudo precargan imágenes adyacentes para deslizarlas suavemente
- Las ventanas gráficas móviles activan diferentes diseños : algunos temas cargan CSS y JS adicionales para diseños de páginas de productos específicos para dispositivos móviles
Revisa tu puntuaciones de velocidad en dispositivos móviles frente a computadoras de escritorio : si la brecha es de más de 30 puntos, es probable que haya una aplicación con mucho JavaScript que sea particularmente exigente en dispositivos móviles. Utilice la aceleración de CPU de Chrome DevTools (desaceleración 4x) para simular la experiencia móvil en el escritorio.
Thunder apunta específicamente al rendimiento móvil: su aplazamiento de secuencias de comandos tiene el mayor impacto en las puntuaciones móviles porque ahí es donde el análisis de JavaScript es el cuello de botella. Ver planes de precios.
Velocidad de la página del producto y SEO: lo que mide Google
Google utiliza Core Web Vitals como factor de clasificación, y las páginas de sus productos se miden individualmente. Una página de producto lenta puede tener un rendimiento inferior en los resultados de búsqueda incluso si su página de inicio es rápida. Las métricas que más importan para las páginas de productos:
- LCP (pintura con contenido más grande): Generalmente la imagen principal del producto. Objetivo en menos de 2,5 segundos. Precargar la imagen es la solución número uno.
- INP (Interacción con la siguiente pintura): Selección de variantes, clics en Agregar al carrito e interacciones en la galería. Objetivo por debajo de 200 ms. Los scripts de aplicaciones pesados suelen ser los culpables.
- CLS (cambio de diseño acumulativo): Galerías de imágenes sin dimensiones explícitas, widgets de revisión que se cargan tarde y reducen el contenido, cambios de precio en la selección de variantes. Objetivo inferior a 0,1.
Corrija estas métricas con nuestras guías dedicadas: Optimización LCP, Correcciones de INP, y Correcciones de CLS.
Velocidad de la página del producto: corrección manual frente a trueno
| Optimización | Aproximación manual | Con Trueno |
|---|---|---|
| Aplazamiento del guión de revisión | Editar el código del tema, corre el riesgo de alterar la visualización de la revisión | Automático: las reseñas aún se cargan, justo después de renderizar la página |
| Optimización de widgets de ventas adicionales | Contactar al desarrollador de la aplicación, opciones limitadas | Aplazamiento automático de widgets no críticos |
| Gestión de scripts de análisis | Estrategia de carga personalizada por script | Todos los análisis diferidos sin pérdida de datos |
| Precarga de imagen | Agregar sugerencia de precarga en theme.liquid | Priorización automática de recursos |
| Aumento típico de puntuación en dispositivos móviles | 10-20 puntos (horas de trabajo) | 20-35 puntos (60 segundos de preparación) |
Mejores resultados: combine la optimización manual de imágenes con Optimización automática del script de Thunder. Ver planes actuales.
Lista de verificación de velocidad de la página del producto
Work through this checklist from top to bottom — items are ordered by impact:
- Instalar Thunder Page Speed Optimizer : pospone todos los scripts no críticos en las páginas de productos. Mayor impacto, menor esfuerzo. Instalar ahora
- Comprimir todas las imágenes de productos : use TinyPNG o Squoosh, apunte a menos de 200 KB por imagen a 2000x2000 px como máximo.
- Limite las imágenes a 4-6 por producto — Más imágenes = más peso. Utilice el vídeo para obtener ángulos adicionales si es necesario.
- Precargar la imagen principal del producto — Add the preload hint from the code snippet above.
- Auditar aplicaciones de páginas de productos — Count JavaScript files from third-party domains. Remove apps you're not using.
- Reemplazar las insignias de confianza basadas en aplicaciones con HTML estático : no se necesita JavaScript para imágenes estáticas.
- Reducir el recuento de variantes : divide productos con más de 100 variantes en listados separados.
- Asegúrese de que la carga diferida esté funcionando : comprueba que las imágenes de debajo del pliegue tengan
cargando="perezoso". - Prueba en móvil — Ejecutar nuestra prueba de velocidad con la URL de la página del producto, no solo la página de inicio.
Preguntas frecuentes sobre la velocidad de la página de productos de Shopify
¿Cuál es una buena puntuación de velocidad para la página de un producto de Shopify?
A realistic target for Shopify product pages is 60-80 on mobile and 85-95 on desktop in PageSpeed Insights. Stock themes with no apps score 80-95 on mobile, but real stores with review apps, upsell widgets, and analytics rarely stay above 70. If your product pages score below 40 on mobile, there's a significant optimization opportunity — typically from app scripts and unoptimized product images.
¿Por qué las páginas de mis productos de Shopify son más lentas que mi página de inicio?
Las páginas de productos cargan más recursos que la mayoría de las otras páginas: imágenes de productos de alta resolución (a menudo, de 5 a 10 por producto), selector de variantes de JavaScript, widgets de reseñas, scripts de aplicaciones de ventas cruzadas y adicionales y marcado de datos estructurados. Muchas aplicaciones también inyectan scripts específicamente en páginas de productos que no se ejecutan en la página de inicio. Una página de inicio con una única imagen principal y secciones mínimas tiene mucho menos que cargar que una página de producto con una galería, reseñas y productos recomendados.
¿Cuántas imágenes de productos debo usar para obtener la mejor velocidad?
Utilice de 4 a 6 imágenes de productos para obtener el mejor equilibrio entre conversión y velocidad. Cada imagen adicional agrega entre 50 y 200 KB según la resolución. Más allá de 6 imágenes, el costo de la velocidad supera el beneficio de conversión para la mayoría de los productos. Si necesita más imágenes (muebles, moda), utilice la carga diferida de manera agresiva para que solo se carguen las primeras 1 o 2 imágenes de inmediato. La carga diferida nativa de Shopify maneja esto en la mayoría de los temas modernos.
¿Las reseñas de productos ralentizan las páginas de productos de Shopify?
Sí: las aplicaciones de reseñas son uno de los principales contribuyentes a las secuencias de comandos en las páginas de productos. Judge.me agrega entre 150 y 300 KB de JavaScript, Loox (con reseñas de fotografías) agrega entre 200 y 500 KB y Stamped agrega entre 150 y 400 KB. Los scripts se cargan en cada página de producto, ya sea que ese producto tenga reseñas o no. Thunder pospone los scripts de las aplicaciones de revisión para que se carguen después de que se muestre la página, preservando el valor SEO de las revisiones sin la penalización de velocidad.
¿La cantidad de variantes del producto afecta la velocidad de la página?
Somewhat. Each variant adds data to the product JSON object embedded in the page. A product with 100+ variants (e.g., size × color × material combinations) can add 50-150KB of inline JSON. The bigger impact comes from variant-specific images — if each variant has its own image set, the browser may preload more images than necessary. Keep variants under 50 when possible and use a consistent image set across similar variants.
¿Cómo acelera Thunder específicamente las páginas de productos de Shopify?
Thunder pospone todo el JavaScript no crítico en las páginas de productos, incluidos los widgets de revisión, las aplicaciones de ventas adicionales, los scripts de análisis y los widgets de chat, para que se carguen después de que la página se vuelva interactiva. Esto significa que la galería de imágenes del producto, el título, el precio y el botón Agregar al carrito se muestran más rápido. La mayoría de las páginas de productos obtienen una mejora de 20 a 35 puntos en la puntuación de PageSpeed móvil. Thunder es totalmente compatible con todos los temas de Shopify 2.0 y no afecta la funcionalidad de la página del producto.
Haga que sus páginas de productos Shopify sean rápidas
Product pages are your most important pages and typically your slowest. The speed gap comes from product image galleries, review widgets, upsell apps, and analytics scripts — all fighting for bandwidth on the page where conversion happens.
La optimización de velocidad de la página de producto más efectiva combina: comprimir y limitar imágenes de productos, precargar la imagen principal del producto, auditar y eliminar aplicaciones innecesarias y usar Thunder Page Speed Optimizer para posponer todos los scripts no críticos para que el contenido de su producto se muestre primero.
Pruebe una página de producto ahora , no su página de inicio, para ver la puntuación de velocidad real de la página de su producto. Luego, revise la lista de verificación anterior para cerrar la brecha.
Expert Speed Optimization for Your Store
Our team handles everything — theme optimization, app cleanup, Core Web Vitals guarantee. Most stores optimized in 2 weeks.
✅ Core Web Vitals Guarantee · ⚡ 2-Week Delivery · 🎁 6 Months Free Thunder
Starting from €1,500 · Learn more