What Is Total Byte Weight and How to Reduce It?

Why Heavy Pages Hurt Rankings, Conversions, and Wallets#

A bloated payload cascades into every other performance metric — and into your business numbers:

• Slower Core Web Vitals: More bytes mean longer download time, which delays TTFB, FCP, and LCP. LCP is a confirmed Google ranking signal, and pages that fail Core Web Vitals lose ground in competitive queries.
• Mobile is hit hardest: On a 4G connection, every megabyte costs roughly 5+ seconds. A 4 MB page can take 20+ seconds on 3G — well past the point where most visitors abandon.
• Visitor data plans: Heavy pages eat into limited mobile data. In emerging markets, a 4 MB page can cost a real fraction of a daily data budget — and visitors notice.
• Battery drain: Downloading and parsing large JavaScript bundles consumes meaningful battery on phones, especially older ones.
• CDN bills: Egress is billed per GB. Cutting median page weight in half can cut bandwidth costs in half too — especially at high-traffic scale.
• AI search visibility: AI search engines source citations primarily from pages that already rank well. A failing Total Byte Weight pulls Core Web Vitals down, which pulls rankings down, which reduces your chance of being cited in AI Overviews and similar systems.

How Total Byte Weight Is Measured#

The metric is the sum of transfer size (compressed, over-the-wire bytes) of every resource the page requests during load — not the uncompressed file size on disk. The audit's scoring points (about 2,667 KiB for a score of 90, 4,000 KiB for 50) apply to the compressed transfer total.

Worked example for a typical product page:

Resource type        Transfer size
-------------------- ------------
HTML document            45 KB
CSS bundle               68 KB
JavaScript bundle       512 KB
Hero image (WebP)       180 KB
Below-fold images       620 KB
Web fonts (woff2)       110 KB
Third-party scripts     240 KB
Video poster + preview  150 KB
-------------------- ------------
Total                 1,925 KB   (over the 1,000 KB best-in-class mark)

On this page, the largest single category is below-fold imagery — exactly where lazy-loading and modern formats yield the biggest wins. The next-largest is JavaScript, where code-splitting and tree-shaking typically cut 30–50%.

How to Check Your Page's Byte Weight#

Several tools surface Total Byte Weight, broken down by resource type and origin:

• Greadme Page Audit — surfaces Total Byte Weight alongside Core Web Vitals, breaks the payload down by resource type, and pairs each oversized asset with an AI-generated fix.
• Greadme Site Audit — measures Total Byte Weight across every indexable page on your site, so you can pinpoint which templates (product pages, article pages, listing pages) are dragging your CWV down.
• Chrome DevTools → Network tab — disable cache, reload, and read the "transferred" total at the bottom of the panel. Sort by Size to find the biggest individual offenders.
• web.dev & Google Search Console — Search Console's Core Web Vitals report uses real-user (CrUX) data, while web.dev guidance ties byte-weight audits to LCP and TBT thresholds.

9 Proven Ways to Reduce Total Byte Weight#

<picture>
  <source type="image/avif" srcset="hero.avif" />
  <source type="image/webp" srcset="hero.webp" />
  <img src="hero.jpg" alt="Hero image" width="1200" height="630" />
</picture>

<img
  src="hero-1200.webp"
  srcset="hero-400.webp 400w,
          hero-800.webp 800w,
          hero-1200.webp 1200w,
          hero-1920.webp 1920w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1024px) 800px,
         1200px"
  alt="Hero image"
  width="1200" height="630" />

<img src="below-fold.webp" loading="lazy" decoding="async"
     width="800" height="450" alt="Product detail" />

<iframe src="https://www.youtube.com/embed/..." loading="lazy"
        width="560" height="315" title="Demo video"></iframe>

// Load the heavy editor only when the user clicks "Edit"
button.addEventListener('click', async () => {
  const { mountEditor } = await import('./editor');
  mountEditor(target);
});

// webpack.config.js
module.exports = {
  performance: {
    maxAssetSize: 250 * 1024,        // 250 KB per asset
    maxEntrypointSize: 400 * 1024,   // 400 KB per entry
    hints: 'error',                  // fail the build
  },
};

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC;
}

Common Byte-Weight Problems and Fixes#

Total Byte Weight Thresholds at a Glance#

Use this table as a quick reference when reviewing audit results:

FAQ#

What is a good Total Byte Weight?

Performance audits score compressed transfer size on a curve: about 2,667 KiB scores 90, and 4,000 KiB scores 50. Best-in-class sites stay under 1,000 KB. The web median (per the HTTP Archive Web Almanac, 2024) is around 2.0 MB on mobile and 2.6 MB on desktop — meaning the typical page on the internet today already carries at least twice the best-in-class budget.

Is Total Byte Weight a Google ranking factor?

Not directly — but it strongly influences metrics that are ranking factors. Heavier pages have slower LCP, FCP, and TTI, and LCP is a confirmed Core Web Vital used in ranking. Reducing byte weight is one of the most reliable ways to improve Core Web Vitals across the board.

Does the threshold apply to compressed or uncompressed size?

Compressed (transfer) size — the number of bytes that actually move across the network. A 600 KB JavaScript file served with Brotli might transfer as 150 KB, and only that 150 KB counts toward the total the audit scores. This is why enabling text compression is one of the highest-leverage fixes.

Why has the web median page weight grown so much?

HTTP Archive data shows median page weight has grown from ~1.2 MB in 2017 to over 2.3 MB in 2024. The two biggest drivers are JavaScript bundle growth (frameworks, analytics, A/B testing, personalization) and higher-resolution imagery for retina displays. Most sites compensate by shipping the largest image variant to every device — which is exactly what responsive images are designed to prevent.

Which resource type usually contributes the most?

On most consumer sites: images, at 40–55% of total weight. JavaScript is usually second at 20–30%, then video, fonts, CSS, and HTML. Third-party scripts (analytics, ads, embeds) often span all of those categories and can account for 20–40% of total requests by themselves.

Does Total Byte Weight matter for AI search engines?

Indirectly, yes. AI-driven systems (Google AI Overviews, generative answer engines) preferentially cite pages that already rank well in traditional search. A bloated page hurts Core Web Vitals → hurts rankings → reduces your chance of being chosen as a citation. Lean, fast pages compete better in both surfaces.

How often should I re-measure?

Treat byte weight as a budget that drifts every release. Set a CI check using your bundler's performance.maxAssetSize for JavaScript, run Greadme Page Audit on key templates after every meaningful release, and audit third-party scripts at least quarterly. Drift is much cheaper to catch in week one than in month six.