Page Weight Calculator

About the Page Weight Calculator

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. Public web-performance datasets show median pages landing well above 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 a strong user experience.

When This Page Helps

Understanding where page weight comes from is the first step to reducing it. It gives a clear breakdown of resource contributions, making it easy to identify the highest-impact optimization targets and track progress toward performance budgets.

How to Use the Inputs

1. Enter the size of HTML content in kilobytes.
2. Enter the total size of CSS files.
3. Enter the total size of JavaScript files.
4. Enter the total size of images.
5. Enter font file sizes and media/third-party sizes.
6. Review the total page weight and category breakdown.
7. Target the largest category for optimization first.

Example Calculation

Tips & Best Practices

• Images are typically the largest contributor — use WebP/AVIF and responsive images.
• Code-split JavaScript to only load what's needed for the initial view.
• Subset fonts to include only characters your site actually uses.
• Audit third-party scripts regularly — they grow silently over time.
• Set a performance budget and enforce it in your CI/CD pipeline.
• Enable Brotli/gzip compression for text-based assets (HTML, CSS, JS).
• Use tree-shaking to eliminate unused code from JavaScript bundles.

The Growing Web

Web pages have grown dramatically over the past decade. Public web-performance datasets show median page weight increasing from roughly half a megabyte in the early 2010s to well above 2 MB in modern measurements. Images, JavaScript, and third-party scripts are the primary drivers of this growth.

Performance Budgets

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.

Image Optimization

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 Weight

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.

Frequently Asked Questions

• What is a good page weight?

  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.

• Does page weight equal transfer size?

  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.

• Which resource should I optimize first?

  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.

• What is a performance budget?

  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.

• How do third-party scripts affect page weight?

  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.

• Does page weight affect SEO?

  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.