What a 2 MB Page Costs Your Visitors

Two megabytes looks small beside a phone photo or video file. On a fast home connection, a 2 MB page can also appear almost instantly. That makes it tempting to call the page lightweight.

I would not. A web page is assembled through network requests, processed on the visitor’s device, and often opened under much less convenient conditions than the developer’s desk provides.

The total hides several different costs

A 2 MB page might be divided like this:

HTML         30 KB
CSS          60 KB
JavaScript  400 KB
Fonts       200 KB
Images     1.2 MB
Other       110 KB

The total matters, but the categories are not interchangeable. A 400 KB image must be downloaded and decoded. A 400 KB JavaScript bundle must be:

downloaded
↓
parsed
↓
compiled
↓
executed

It may then change the DOM or start more requests. Equal transfer sizes can create very different amounts of work.

A fast connection hides the compromise

Testing over 500 Mbps makes many pages look fine. The same page on weak mobile coverage includes latency, variable bandwidth, and a phone doing other work at the same time.

Ten visits to 2 MB pages transfer roughly:

20 MB

A hundred transfer:

200 MB

That is easy to dismiss on home fibre and more noticeable on a limited plan, while roaming, or in poor coverage. Performance should not quietly assume everyone has the developer’s connection.

Images usually offer the least painful savings

A 1.5 MB hero can often become a few hundred kilobytes through suitable dimensions, responsive srcset, WebP or AVIF, and sensible quality. Sending a 4000-pixel source to a phone that displays it at 390 pixels does not make the photo better.

Fonts can add up in a similar way:

Regular
Medium
Semibold
Bold
Italic

Several weights across several families can add hundreds of kilobytes. A system stack removes those requests:

font-family:
  system-ui,
  -apple-system,
  sans-serif;

That is not the right identity for every site, but every loaded face should have a job beyond being available just in case.

Count third-party code in the real page

Your own assets may be 600 KB while analytics, chat, ads, embeds, social widgets, and cookie tools push the complete page to 2 MB. Inspect the full network waterfall, not only the bundle controlled by your repository.

Caching helps repeat visits, but it cannot erase the first visit. Assets expire, URLs change, and caches are cleared. A cache is a useful delivery mechanism, not permission to make the initial page unnecessarily heavy.

There is no universal ideal weight

A photography portfolio naturally carries more image data than a text article. A web application may need more JavaScript than a static blog. I prefer asking:

Does every file earn its size?

Then set a budget suited to the page’s purpose.

Lightweight pages happen because someone chooses smaller images, fewer fonts, restrained third-party scripts, and simpler components. Two megabytes may be common, but “common” and “small” are different claims. If the page can do the same job at 500 KB, visitors still pay for the other 1.5 MB.