The designer decides how heavy the page is

Performance is chosen at the design stage

A developer can compress an image. A developer cannot decide that the page does not need a full-bleed photographic hero, three web font families, an icon library and an animated background. Those are design decisions, and they set the floor for how fast the page can ever be.

This matters here because much of this readership, and much of their audience, is on a mid-range Android phone on a connection that is not the one in your office.

The arithmetic

Download time is size divided by throughput, and the numbers are unforgiving:

3 MB hero image on a 1.6 Mbps connection   ≈ 15 seconds
300 KB hero image on the same connection   ≈ 1.5 seconds

From the loading-state lesson: ten seconds is the limit of held attention. A 3MB hero image exceeds it on its own, before any other asset has loaded, on a connection that a large number of people have.

And on a metered plan the bytes are money. A visitor on a prepaid data pack is paying for your decorative background.

Images: the four decisions

Format. WebP is typically 25 to 35% smaller than JPEG at comparable quality and is supported everywhere that matters. AVIF is smaller again and slower to encode. PNG is for images that need transparency or crisp flat areas, not for photographs. SVG is for anything drawn rather than photographed, and it is usually a few kilobytes.

Dimensions. Serving a 2400-pixel image to a 390-pixel phone wastes roughly 85% of the bytes. srcset lets the browser choose:

<img src="hero-800.webp"
     srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     width="1600" height="900" alt="...">

The width and height attributes matter separately: they let the browser reserve the space before the image arrives, which prevents the layout shifting under the reader's finger.

Quality. JPEG or WebP at quality 75 to 80 is usually indistinguishable from 95 at roughly a third of the size. Exporting at maximum quality is a default nobody chose.

Whether the image is needed at all. The cheapest image is the one you did not use. A flat colour, a gradient, or a small SVG pattern costs a fraction of a photograph and frequently serves the layout better.

Free tools for all of this: Squoosh runs in a browser and shows a side-by-side comparison with file sizes as you move the quality slider. GIMP and Krita export with quality controls. ImageMagick and cwebp do it in batch from the command line.

Fonts

Each weight and style is a separate file. A family with four weights plus matching italics is eight files, easily 200 kilobytes in WOFF2 for Latin alone, and far more with Devanagari or CJK coverage.

The reductions, in order of effect:

1. Use fewer weights. Two is usually enough. This is the same restraint argument as everywhere else.
2. Subset to the characters you need, which for a Latin site removes a large fraction of most fonts.
3. Use a variable font, where one file covers a whole weight range and is often smaller than three static weights.
4. Use the system font stack, which costs nothing at all.

Layout shift

A specific and widely felt failure: content moves while the page is loading, and the reader taps the wrong thing because the button they were aiming at has been pushed down by an image that just arrived.

The causes are all reservations that were not made: images without dimensions, web fonts with different metrics from the fallback, advertisements or embeds inserted into the flow, content appearing above what is already visible.

The repairs are all design decisions: set aspect ratios on image containers, match fallback font metrics, reserve space for anything that will arrive later, and never insert content above the reader's current position.

The honest trade-off

This is not an argument that every page should be text on a white background. Images communicate, typefaces carry identity, and a page that is fast and says nothing has not succeeded either.

The argument is that weight is a design variable like any other, with a cost that somebody pays, and that it should be decided rather than defaulted. A hero photograph that genuinely carries the message is worth 300 kilobytes. The same photograph used because the layout looked empty is not worth anything, and on a slow connection it is worth less than nothing, because the reader left before the text arrived.

The test: open your own work on a mid-range phone, on mobile data, away from your office. Once. It changes what you design.