What Your Page Actually Weighs
Total page weight is the sum of every resource the browser downloads to render a page — HTML, CSS, JavaScript, images, fonts, and any other assets. It is the single most intuitive performance metric: bigger pages take longer to load, especially on slower connections. A page weighing 1.5 MB loads fundamentally differently from one weighing 5 MB, regardless of how well-optimized the server is.
What a Healthy Page Looks Like
The HTTP Archive tracks page weight across millions of sites. As of recent data, the median desktop page transfers around 2.3 MB, while the median mobile page is slightly smaller. But median is not the same as good — many of the fastest sites keep pages well under 1.5 MB for content-focused pages.
A practical breakdown for a well-optimized WordPress page might look like: 30-50 KB of HTML, 50-100 KB of CSS, 100-200 KB of JavaScript, 200-500 KB of images (compressed, modern formats), and 50-100 KB of fonts. That totals roughly 500 KB to 1 MB — well under what most sites actually ship.
Where the Weight Comes From
Images are typically the largest contributor. Unoptimized JPEGs or PNGs that could be served as WebP or AVIF often account for 60-70% of total page weight. A single hero image saved as an uncompressed PNG can weigh more than all other assets combined.
JavaScript is usually the second-largest contributor and the most expensive per byte. Unlike images, JavaScript must be parsed, compiled, and executed — 500 KB of JavaScript costs far more in load time than 500 KB of images. WordPress sites with many plugins often load JavaScript that is not needed on the current page at all.
CSS rarely dominates page weight on its own, but sites running multiple plugins and page builders can accumulate 300-500 KB of stylesheets, much of it unused on any given page.
Fonts typically add 100-300 KB. Each font weight or style is a separate file — loading four weights of a typeface means four separate downloads.
Why Page Weight Matters Beyond Load Time
Page weight directly affects mobile users on metered data plans — a 5 MB page costs real money to load in many markets. It also affects Core Web Vitals: heavier pages tend to have worse LCP scores because the browser has more to download before it can render the main content. And on slower devices, the CPU time required to process larger pages compounds the problem.
Setting a performance budget for page weight is one of the most effective ways to prevent gradual bloat as a site grows.
Further Reading
- Page Weight Report (HTTP Archive) — Live data on page weight trends across the web, broken down by resource type.
- Performance Budgets 101 (web.dev) — How to set meaningful limits on page weight and other performance metrics.