Page Weight: How Heavy Is Too Heavy?
Page weight is the total number of bytes a browser downloads to load a page: the HTML plus every image, script, stylesheet, font, video and third-party embed. It’s not a Core Web Vital, but it sits underneath most of them. Heavy pages take longer to download, decode and render, and on metered mobile plans they cost your visitors money.
Why it matters
On a fast office connection a 5 MB page might feel fine. On a mid-range phone over a congested mobile network, the same page can take many seconds to become usable, and every script in it has to be parsed and run on a much slower CPU. Large images delay Largest Contentful Paint; large scripts drive up Total Blocking Time and INP.
What we check
We read Lighthouse’s total-byte-weight from the PageSpeed Insights run (mobile), which counts the
bytes transferred while loading the page.
| Result | Total page weight |
|---|---|
| Passed | up to 1,600 KB |
| Needs attention | 1,600 KB to 4,000 KB |
| Failed | over 4,000 KB |
The middle band is deliberately wide, so image-heavy sites such as shops and portfolios aren’t failed for having many product photos.
Where the bytes usually are
Open Chrome DevTools, go to the Network panel, reload, and sort by size. In most audits the culprits are, in order:
- Images. Photos uploaded straight from a camera, PNG used for photographs, images several times larger than they’re displayed.
- JavaScript. Frameworks, sliders, chat widgets, A/B testing tools and analytics tags.
- Fonts. Multiple families and weights, or full character sets you don’t use.
- Video. Autoplaying background videos are often the single largest item.
How to fix
- Serve modern image formats. WebP or AVIF are usually far smaller than JPEG and PNG at the same quality. Most CDNs and image services can convert on the fly.
- Size images for their slot. Use
srcsetandsizesso phones don’t download desktop images. - Lazy-load below-the-fold images with
loading="lazy", but never the main (LCP) image. - Remove JavaScript you don’t need. Audit third-party tags, drop unused libraries, and split bundles so each page loads only its own code.
- Subset and limit fonts. Two weights of one family in WOFF2 is plenty for most sites.
- Replace autoplay video with a poster image and a play button.
- Compress text responses with Brotli or gzip (see text compression).
A budget helps
Teams that keep pages light usually set a budget, for example “under 1 MB for the home page”, and check it on every release. Lighthouse CI can fail a build when a page goes over budget.
Further reading: web.dev: Performance budgets.