A heavy page loads slowly, ranks worse and loses visitors before they see the content. Here's how to measure the weight — and find the elements that add most of it.
Updated August 2026 · 5 min read
$ curl -s https://yoursite.com | wc -c # HTML alone $ curl -sI https://yoursite.com/img.jpg | grep -i content-length
Every extra megabyte delays first content — and Google measures this directly through Core Web Vitals (LCP). A page loading in one second typically converts two to three times better than one taking five. Weight also hits mobile users on limited data plans hardest, precisely the visitors who most often buy locally.
| Element | Typical share of weight |
|---|---|
| Images and video | 60–80% |
| JavaScript | 10–20% |
| Fonts | 2–8% |
| CSS + HTML | 2–5% |
Also see: speed checks without Lighthouse, metadata audits and finding every page on a site.
Under 500 KB is a great target for most pages; up to 2 MB is acceptable for image-heavy ones. The web average sits around 2–3 MB, so coming in below that already puts you ahead of most competitors.
Open developer tools (F12), switch to the Network tab and reload. The bottom row shows total transferred size. Note that compressed transfer is usually smaller than uncompressed size — both numbers matter.
Yes, directly: more bytes mean longer download times, especially on mobile connections. But render-blocking JavaScript, request count and server response time often affect perceived speed just as much as raw size.
Images and video (often 60–80% of weight), then JavaScript bundles, fonts and third-party scripts like chat widgets and analytics. Start by compressing images — that's almost always the biggest win.