Total Page Weight Targets by Site Type
Review recommended total page weight targets for different website types — blogs, e-commerce, SPAs, dashboards, and landing pages. Includes industry benchmarks and median page weights.
Detailed Explanation
Total Page Weight Targets
The HTTP Archive tracks the state of the web and reports that the median page weight in 2024 is approximately 2.5 MB on desktop and 2.2 MB on mobile. These numbers are far too high for good performance. Setting explicit weight targets below the industry median gives your site a competitive advantage.
Recommended Targets by Site Type
| Site Type | Target Weight | Notes |
|---|---|---|
| Blog / Content | 400-600 KB | Text-heavy, few interactive elements |
| Landing Page | 300-500 KB | Single focus, minimal navigation |
| E-commerce PDP | 600-900 KB | Product images drive most of the weight |
| SPA (initial) | 500-800 KB | Heavy JS framework, code-split routes |
| Dashboard | 400-700 KB | Data-driven, minimal imagery |
| Documentation | 300-500 KB | Pure text + code blocks |
| News / Media | 800-1200 KB | Rich media, but should still be optimized |
How the Median Compares
The median web page at 2.2 MB is 3-5x heavier than recommended targets. The excess typically comes from:
- Unoptimized images — Often 50-70% of total page weight
- Unused JavaScript — Third-party scripts, unused framework code
- Web fonts — Loading entire font families instead of subsets
- Video autoplay — Embedded video posters and preloads
Setting Your Target
- Identify your user base — Check your analytics for device types, connection speeds, and geographic distribution
- Benchmark competitors — Measure the top 3 sites in your space using WebPageTest or Lighthouse
- Choose a connection profile — Typically 3G (1.6 Mbps) for mobile, Fast 4G (12 Mbps) for desktop
- Calculate the budget — Speed × time × 125
- Add 20% margin — Account for third-party script growth and future features
Tracking Over Time
Page weight tends to creep upward over time as features are added. Without active monitoring:
- New analytics scripts get added but old ones are not removed
- Marketing adds tracking pixels and chat widgets
- Developers add polyfills and utility libraries
- Design refreshes introduce higher-resolution images
A performance budget dashboard that tracks weight over every deployment is the best defense against this natural growth.
Use Case
Total page weight targets provide a clear, measurable goal that everyone on the team can understand — from designers to product managers to QA testers. They are particularly useful during project planning to evaluate the feasibility of proposed designs. If a mockup includes a hero video, a parallax image gallery, and a complex interactive widget, the weight target immediately surfaces the tradeoff between visual richness and performance.