Shopify Enormous Network Payloads: Reduce Page Weight (2026)

Quick Fix with Thunder

What Counts as an Enormous Payload?

Page weight is the total number of bytes the browser downloads: HTML, CSS, JavaScript, images, fonts, videos, JSON, tracking pixels, and app assets. Lighthouse flags very large payloads because every extra megabyte hurts mobile users, especially on slow connections and mid-range phones.

A lean Shopify product page might load around 1-2 MB initially. A heavy homepage with a slideshow, video background, page builder, five apps, three font families, and large collection sections can easily download 6-12 MB. The customer does not care that the assets are beautiful if the page is still loading while they are trying to shop.

Payload size is not the only speed factor. A 2 MB page with terrible JavaScript can feel worse than a 3 MB page with clean loading. But when PageSpeed says the payload is enormous, bytes are the first place to look.

Step 1: Sort the Network Tab by Transfer Size

Open Chrome DevTools -> Network, disable cache, reload the page, and sort by transferred size. Ignore tiny files for now. The usual top offenders are hero images, product photos, embedded videos, app bundles, large theme JavaScript, CSS, and font files.

Use PageSpeed for the score, but use the Network tab for decisions. If the largest file is a 2.4 MB hero image, do not start by minifying a 12 KB CSS file. If the top ten files are app scripts, do not spend the morning compressing product thumbnails.

For a repeatable audit, follow our speed test results guide and the full Shopify speed optimization guide.

Step 2: Request Smaller Shopify Images

Shopify's CDN can serve resized images, but your Liquid decides which widths to request. If the rendered hero is 1200px wide and the theme downloads a 4000px original, the browser wastes bandwidth before it can paint 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
}}

For below-the-fold product grids, use smaller widths and lazy loading. A product card rarely needs a 2000px image. Our product page speed guide and collection page speed guide cover template-specific choices.

Step 3: Lazy-Load Everything Below the First Viewport

The first viewport should load immediately. Below-the-fold media should wait. This includes product cards lower on the page, gallery thumbnails, lookbook sections, reviews carousels, Instagram feeds, and 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
}}

Do not lazy-load the hero image. That is a different mistake and usually hurts LCP. Use the hero image preload guide for above-the-fold images and the lazy loading guide for everything else.

Step 4: Replace Heavy Video and Slider Payloads

Video is the fastest way to make a Shopify page enormous. A background video can add several megabytes before the customer sees a product. YouTube and Vimeo embeds can also pull in large JavaScript bundles before interaction.

Use a poster image and load the video after click. For hero sections, a static image often wins. For product education, place the video lower on the page and lazy-load the embed. For sliders, show one strong hero instead of preloading multiple slides.

If video matters to conversion, keep it. Just do not make every mobile visitor download it before they can browse. Our Shopify video optimization guide has embed-specific patterns.

Step 5: Cut App, Font, and Theme Weight

Apps add payload in less obvious ways: JavaScript files, CSS files, web fonts, review images, tracking pixels, and API responses. Go through app embeds and remove anything that is not needed on every page. Then search theme files for old app snippets left behind after uninstalling apps.

Fonts are the next easy win. Use one or two families, limit weights, preload only the most important font file, and use system fonts for low-value UI where possible. If PageSpeed shows font load delay, use our Shopify font optimization guide.

For code weight, clean up unused CSS and JavaScript. Page builders and old theme sections often ship assets that no longer support visible content.

Manual Fix vs Thunder Fix

Retest by Template, Not Just Homepage

Payload problems vary by template. Your homepage may be image-heavy, product pages may be app-heavy, and collection pages may be card-heavy. Test at least one homepage, one product page, and one collection page.

If you want the fastest automated path, install Thunder and then clean up the largest media files. If the largest files are images, use the properly size images guide; if repeat visitors keep re-downloading third-party assets, check the efficient cache policy guide. For hands-on help, see our Shopify speed optimization service. For plan details, see Thunder pricing.

References and Validation

Chrome's Lighthouse network payload guidance recommends deferring unnecessary requests and making resources as small as possible. That maps directly to Shopify: resize media, lazy-load non-critical sections, cut app scripts, and keep the initial page lean.

Shopify Community threads about this warning usually include the same advice because the causes are consistent: images are too large, apps load everywhere, videos are embedded too early, and unused code is still shipping. Fix the largest files first. Small optimizations matter later; giant payloads need direct cuts.