Solución rápida con Thunder
Network payload is partly content and partly loading strategy. Thunder cannot decide which lifestyle photo or video you should keep, but it can stop non-critical scripts from competing with your first viewport and reduce the JavaScript burden that app-heavy stores download early.
Use Thunder para limpiar la aplicación y el script, luego siga los pasos manuales a continuación para determinar el peso del medio. Si PageSpeed también detecta problemas de formato de imagen o de carga diferida, lea nuestra Guía de optimización de imágenes de Shopify y Guía WebP y AVIF.
Instalar Trueno¿Qué se considera una carga útil enorme?
El peso de la página es la cantidad total de bytes que descarga el navegador: HTML, CSS, JavaScript, imágenes, fuentes, videos, JSON, píxeles de seguimiento y recursos de la aplicación. Lighthouse señala cargas útiles muy grandes porque cada megabyte extra perjudica a los usuarios móviles, especialmente en conexiones lentas y teléfonos de gama media.
Una página de producto sencilla de Shopify puede cargar entre 1 y 2 MB inicialmente. Una página de inicio pesada con una presentación de diapositivas, un vídeo de fondo, un creador de páginas, cinco aplicaciones, tres familias de fuentes y grandes secciones de colección puede descargar fácilmente entre 6 y 12 MB. Al cliente no le importa que los activos sean hermosos si la página aún se está cargando mientras intenta comprar.
El tamaño de la carga útil no es el único factor de velocidad. Una página de 2 MB con un JavaScript terrible puede parecer peor que una página de 3 MB con una carga limpia. Pero cuando PageSpeed dice que la carga útil es enorme, los bytes son el primer lugar donde buscar.
Paso 1: Ordenar la pestaña Red por tamaño de transferencia
Open Chrome DevTools -> Red, deshabilite el caché, vuelva a cargar la página y ordene por tamaño transferido. Ignore los archivos pequeños por ahora. Los principales infractores habituales son las imágenes destacadas, las fotografías de productos, los vídeos incrustados, los paquetes de aplicaciones, los temas grandes de JavaScript, CSS y los archivos de fuentes.
Utilice PageSpeed para la puntuación, pero utilice la pestaña Red para tomar decisiones. Si el archivo más grande es una imagen principal de 2,4 MB, no comience minimizando un archivo CSS de 12 KB. Si los diez archivos principales son scripts de aplicaciones, no pase la mañana comprimiendo miniaturas de productos.
Para una auditoría repetible, siga nuestra guía de resultados de la prueba de velocidad y el completo Guía de optimización de velocidad de Shopify.
Paso 2: Solicite imágenes de Shopify más pequeñas
La CDN de Shopify puede mostrar imágenes redimensionadas, pero tu Liquid decide qué anchos solicitar. Si el héroe renderizado tiene 1200 px de ancho y el tema descarga un original de 4000 px, el navegador desperdicia ancho de banda antes de poder pintar LCP.
{{ section.settings.image
| image_url: width: 1600
| image_tag:
widths: '600, 900, 1200, 1600',
sizes: '(min-width: 990px) 100vw, 100vw',
loading: 'eager',
fetchpriority: 'high',
alt: section.settings.heading
}}Para las cuadrículas de productos debajo del pliegue, utilice anchos más pequeños y carga diferida. Una tarjeta de producto rara vez necesita una imagen de 2000 píxeles. Nuestro guía de velocidad de la página del producto y guía de velocidad de la página de colección cubre opciones específicas de plantilla.
Paso 3: Carga diferida todo lo que se encuentra debajo de la primera ventana gráfica
La primera ventana gráfica debería cargarse inmediatamente. Los medios de la mitad inferior de la página deberían esperar. Esto incluye tarjetas de productos en la parte inferior de la página, miniaturas de galerías, secciones de lookbook, carruseles de reseñas, feeds de Instagram y videos.
{{ product.featured_image
| image_url: width: 700
| image_tag:
widths: '300, 500, 700',
sizes: '(min-width: 990px) 25vw, 50vw',
loading: 'lazy',
alt: product.title
}}No cargues de forma diferida la imagen principal. Ese es un error diferente y normalmente perjudica a LCP. Utilice el guía de precarga de imágenes heroicas para imágenes de la mitad superior de la página y el guía de carga diferida para todo lo demás.
Paso 4: Reemplace las cargas útiles de video y controles deslizantes pesados
El vídeo es la forma más rápida de hacer enorme una página de Shopify. Un vídeo de fondo puede añadir varios megas antes de que el cliente vea un producto. Las incrustaciones de YouTube y Vimeo también pueden incorporar grandes paquetes de JavaScript antes de la interacción.
Utilice una imagen de póster y cargue el vídeo después de hacer clic. Para las secciones de héroes, una imagen estática suele ganar. Para obtener información sobre el producto, coloque el vídeo más abajo en la página y cargue la inserción de forma diferida. Para los controles deslizantes, muestre un héroe fuerte en lugar de precargar varias diapositivas.
Si el video es importante para la conversión, consérvelo. Simplemente no haga que todos los visitantes móviles lo descarguen antes de poder navegar. Nuestro Guía de optimización de vídeos de Shopify tiene patrones específicos para incrustar.
Paso 5: Cortar el peso de la aplicación, la fuente y el tema
Las aplicaciones agregan carga útil de formas menos obvias: archivos JavaScript, archivos CSS, fuentes web, imágenes de revisión, píxeles de seguimiento y respuestas API. Revise las aplicaciones incrustadas y elimine todo lo que no sea necesario en cada página. Luego busque archivos de temas en busca de fragmentos de aplicaciones antiguas que quedaron después de desinstalar aplicaciones.
Las fuentes son la próxima victoria fácil. Utilice una o dos familias, limite los pesos, precargue solo el archivo de fuente más importante y utilice fuentes del sistema para IU de bajo valor siempre que sea posible. Si PageSpeed muestra un retraso en la carga de la fuente, utilice nuestro Guía de optimización de fuentes de Shopify.
Para el peso del código, limpiar CSS y JavaScript no utilizados. Los creadores de páginas y las secciones de temas antiguos a menudo envían recursos que ya no admiten contenido visible.
Solución manual frente a solución Thunder
| Problema de carga útil | Corrección manual | Solución de trueno |
|---|---|---|
| Imágenes de gran tamaño | Solicitar anchos correctos de CDN de Shopify y medios comprimidos | Funciona junto con las mejores prácticas de imagen; no elige imágenes de productos |
| Carga útil de JavaScript de la aplicación | Eliminar aplicaciones, cargar fragmentos condicionalmente, diferir scripts | Aplaza automáticamente los scripts de aplicaciones no críticas |
| Vídeo e incrustaciones | Utilice carteles y cárguelos al hacer clic o desplazarse | Keeps scripts from competing with initial render |
| Código de tema no utilizado | Eliminar fragmentos antiguos y dividir CSS/JS | Reduce la presión de renderizado alrededor de los activos restantes |
Vuelva a realizar la prueba por plantilla, no solo por página de inicio
Los problemas de carga útil varían según la plantilla. Su página de inicio puede tener muchas imágenes, las páginas de productos pueden tener muchas aplicaciones y las páginas de colecciones pueden tener muchas tarjetas. Pruebe al menos una página de inicio, una página de producto y una página de colección.
Si desea la ruta automatizada más rápida, instale Thunder y luego limpie los archivos multimedia más grandes. Para obtener ayuda práctica, consulte nuestra Servicio de optimización de velocidad de Shopify. Para obtener detalles del plan, consulte Precios de trueno.
Referencias y Validación
Chrome Guía de carga útil de la red Lighthouse recomienda posponer las solicitudes innecesarias y reducir los recursos lo más posible. Eso se asigna directamente a Shopify: cambie el tamaño de los medios, cargue de forma diferida secciones no críticas, corte scripts de aplicaciones y mantenga la página inicial optimizada.
Los hilos de Shopify Community sobre esta advertencia generalmente incluyen el mismo consejo porque las causas son consistentes: las imágenes son demasiado grandes, las aplicaciones se cargan en todas partes, los videos se insertan demasiado pronto y el código no utilizado aún se envía. Primero arregle los archivos más grandes. Las pequeñas optimizaciones son importantes más adelante; las cargas útiles gigantes necesitan recortes directos.
Done For You
Core Web Vitals guarantee · 2-week delivery · 6 months Thunder free
Get Expert Optimization →Starting from €1,500
FAQ
¿Qué significan enormes cargas útiles de red en Shopify?
Significa que la página descarga demasiados bytes durante la carga inicial. En Shopify, las causas principales son las imágenes de gran tamaño, los videos, los paquetes de JavaScript, los scripts de aplicaciones, las fuentes, los recursos del creador de páginas y demasiadas tarjetas de productos en las páginas de la colección.
¿Qué peso de página es bueno para Shopify?
No existe un límite universal, pero las páginas importantes de Shopify generalmente deben permanecer por debajo de 2-3 MB en la carga móvil inicial. Si una página de inicio o de producto se descarga entre 5 y 10 MB antes de la interacción, los visitantes móviles lo sentirán.
¿Shopify comprime imágenes automáticamente?
Shopify ofrece imágenes a través de su CDN y puede generar versiones redimensionadas y formatos modernos, pero su tema aún controla las dimensiones solicitadas, la carga diferida, la prioridad de la imagen principal y si se incrustan medios de gran tamaño en la mitad superior de la página.
¿Puede Thunder reducir la carga útil de la red automáticamente?
Thunder reduces script pressure and optimizes loading behavior for app and theme assets. It can help prevent non-critical resources from loading too early, but manual media cleanup is still needed when the payload is mostly oversized images or video.
¿Las aplicaciones de Shopify aumentan el tamaño de la carga útil de la red?
Sí. Las aplicaciones suelen cargar JavaScript, CSS, fuentes, píxeles de seguimiento, imágenes y llamadas API. Los widgets de revisión, las herramientas de chat, las ventanas emergentes, los creadores de páginas, las suscripciones, los paquetes y las aplicaciones de personalización son contribuyentes comunes de carga útil.
¿Debo eliminar imágenes para solucionar esta advertencia?
No a ciegas. Mantenga las imágenes que ayudan a la conversión, pero cambie su tamaño correctamente, use los anchos de image_url de Shopify, cargue de forma diferida los medios debajo de la página, reemplace los controles deslizantes con un héroe fuerte y elimine imágenes duplicadas u ocultas.