Enormous payloads medium
Avoid enormous network payloads
The total bytes transferred to load the page exceed Lighthouse's roughly 1,600 KiB budget, slowing load and costing mobile data.
What you see
Avoid enormous network payloads Total size was 4,210 KiB Large network payloads cost users real money and are highly correlated with long load times.
What’s actually happening
Lighthouse lists the heaviest requests, sorted by transfer size, and shows a total well past the ~1,600 KiB target. On a fast connection nobody notices. On a phone over 4G or a throttled link, those megabytes turn into seconds of waiting, push out LCP, and burn through a metered data plan. The worst offenders are almost always a handful of items: a couple of unoptimized hero images, one bloated JavaScript bundle, and a font file or two.
Common causes
- Full-resolution images served far larger than their displayed size, in JPEG/PNG instead of WebP or AVIF
- JavaScript shipped uncompressed and unminified, often a single vendor bundle pulling in code the page never runs
- CSS that isn't minified or gzip/brotli-compressed, including framework stylesheets where most rules go unused
- Font files loaded as full TTF/OTF, or many weights and styles when the page uses two
- Autoplaying video or large GIFs embedded directly instead of a poster image plus on-demand load
How to fix it
- Find the biggest offenders firstSort the Lighthouse list by size and open the Network panel with the disk-cache disabled. Usually 80% of the weight is three or four files. Fix those before touching anything small — that's where the seconds are.
- Compress and resize imagesConvert hero and content images to WebP or AVIF, and export them at the actual dimensions they render (a 360px-wide thumbnail should not ship a 2400px source). Use `srcset` so phones download a smaller file than desktops. This is typically the single largest win.
- Turn on text compression and minificationConfirm the server sends Brotli or gzip for HTML, CSS, and JS — check for `content-encoding: br` in the response headers. Minify everything in the build. Compression alone often cuts text payloads by 60–80%.
- Trim and split JavaScriptRun a bundle analyzer, drop dependencies you don't need, and code-split so each route ships only its own code. Lazy-load heavy widgets (maps, carousels, chat) on interaction rather than at first paint.
- Subset fonts and defer mediaShip only the weights you use as WOFF2, and subset to the character ranges you need. Replace autoplaying video with a poster image that loads the real file on click, and never inline a multi-megabyte GIF.
Stop it recurring
Set a performance budget in CI (Lighthouse CI or bundlesize) that fails the build when total transfer size crosses your threshold, so a stray 3 MB image never ships unnoticed.
Related errors