Calculate total page weight from HTML, CSS, JS, images, fonts, media, and third-party resources. Optimize your page size for faster loads.
Page weight is the total size of all resources required to load a web page, including HTML, CSS, JavaScript, images, fonts, media files, and third-party scripts. The median web page weight has grown to over 2 MB, and heavier pages directly correlate with slower load times and higher bounce rates.
This calculator lets you input the size of each resource category and see the total page weight. It also shows the percentage breakdown, helping you identify which resource types contribute most to page bloat and should be prioritized for optimization.
Keeping page weight under control is essential for performance, especially on mobile networks. Performance budgets typically target 500 KB–1 MB for above-the-fold content and 1.5–2 MB total page weight for optimal user experience.
Precise measurement of this value supports informed infrastructure decisions and helps engineering teams optimize system architecture for both performance and cost efficiency. Quantifying this parameter enables systematic comparison across environments, deployments, and time periods, revealing optimization opportunities that improve both performance and cost-effectiveness.
Understanding where page weight comes from is the first step to reducing it. This calculator provides a clear breakdown of resource contributions, making it easy to identify the highest-impact optimization targets and track progress toward performance budgets. Regular monitoring of this value helps DevOps teams detect anomalies early and maintain the system reliability and performance that users and business stakeholders expect.
Total Page Weight = HTML + CSS + JS + Images + Fonts + Media + Third-Party. Each value in KB, converted to MB for total.
Result: 1,600 KB (1.56 MB) total page weight
The page totals 1,600 KB. JavaScript (350 KB, 22%) and images (800 KB, 50%) are the largest contributors. Optimizing images with modern formats (WebP/AVIF) could reduce image size by 30–50%, bringing total weight under 1.2 MB.
Web pages have grown dramatically over the past decade. The average page weight has increased from 500 KB in 2012 to over 2 MB today. Images, JavaScript, and third-party scripts are the primary drivers of this growth.
Set explicit budgets for each resource category: HTML under 50 KB, CSS under 100 KB, JS under 300 KB compressed, images under 500 KB total. Monitor these in CI/CD and alert when budgets are exceeded. Budgets prevent gradual performance degradation.
Images typically represent 40―70% of page weight. Use modern formats (WebP for broad support, AVIF for cutting-edge compression), serve responsive images with srcset, lazy-load below-the-fold images, and use appropriate quality settings (80% quality is visually identical to 100% at half the size).
JavaScript is the most expensive byte on the web because it must be downloaded, parsed, compiled, and executed. Code splitting, tree shaking, dynamic imports, and framework-specific optimizations can dramatically reduce JS payload size.
Under 1 MB compressed is excellent. 1–2 MB is acceptable for most sites. Over 3 MB indicates significant bloat. The HTTP Archive reports the median page weight at approximately 2.3 MB, which is heavier than ideal.
No. Transfer size accounts for compression (gzip/Brotli), which reduces text-based resources by 60–90%. Transfer size is what matters for load time and bandwidth. This calculator uses uncompressed sizes; your actual transfer size will be smaller.
Start with the largest contributor, which is usually images. Convert to modern formats (WebP/AVIF), implement responsive images, and lazy-load below-the-fold images. JavaScript is typically the second priority for optimization.
A performance budget sets maximum sizes for page weight, individual resource types, and load times. For example: total JS under 200 KB compressed, total images under 500 KB, LCP under 2.5 seconds. Enforce budgets in CI/CD to prevent regression.
Third-party scripts (analytics, ads, chat widgets, social embeds) often add 200–500 KB or more. They also make additional network requests. Audit third-party scripts quarterly and remove any that don't justify their performance cost.
Indirectly, yes. Google's Core Web Vitals (which affect ranking) are strongly influenced by page weight. Heavy pages have slower LCP and higher TBT, both of which negatively impact search rankings.